HTML-表单

概述:

• 标签用于为用户输入创建 HTML 表单.
• 表单用于向服务器传输数据.
• 表单能够包含input 元素，比如文本字段、复选框、单选框、提交按钮等等。表单还可以包含textarea、fieldset、 legend 和 label 元素等。
• 表单使用表单标签 来设置:

·input 元素·

---

表单元素

1.输入元素: 标签

定义和用法:

input标签用于收集用户信息.根据不同的 type 属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。常用标签有:

• 文本域.用户可以在文本域写入文本。

名：



姓：

可以增加placeholder属性，在文本输入框中显示灰色提示文字，开始输入内容，提示文字会消失。

name: 

• 密码域.密码字段字符不会明文显示，而是以星号或圆点替代。

用户：



密码：

• 复选框.可以多项选择.

我喜欢自行车：



我喜欢汽车：

单选按钮.单向勾选时.

男性：



女性：

注意:
- 同一组的input,要采用相同的name,才能达到单选的效果
- 如某项input为check="checked" , 则该项初始状态时为被选中的那个.

• 提交按钮

submit类型

定义了提交按钮。当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。

Username: 

示例代码的执行是：在上面的文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 "test.html" 的页面。该页面将显示出输入的结果。

button类型

只是定义显示提交按钮。当用户单击确认按钮时，表单的内容不会被提交传送。

reset类型

定义清空按钮。当用户单击清空按钮时，input输入框内用户输入的内容都会被清空重置。

2.注记元素— 标签

标签为 input 元素定义标注.

label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。

注意： 标签的 for 属性应当与相关元素的 id 属性相同。使用"for"时,点击label内容会自动进入对应属性输入框.

 

  Male
  

  Female
  

  

3.下拉选择元素— 标签

元素用来创建下拉列表。 元素是一种表单控件，可用于在表单中接受用户输入。 元素中的 标签定义了列表中的可用选项。

Volvo
Saab
Mercedes
Audi

4文本域— 标签</h3> <p><textarea> 标签定义一个多行的文本输入控件。用于输入大段文字段落。文本区域中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。可以通过 cols 和 rows 属性来规定 textarea 的尺寸大小，<strong>不过更好的办法是使用 CSS 的 height 和 width 属性。</strong></p> <pre><code><form> <textarea rows="10" cols="30"> 我是一个文本框。

参考:

http://www.w3school.com.cn/tags/tag_form.asp
http://www.jianshu.com/p/9dad5c004002