表单标签及属性

1.表单的组成 

在HTML中,一个完整的表单通常由表单域、表单控件(也称为表单元素)和提示信息3个部分构成。

 2.1 <input>表单元素

在英文单词中, input是输入的意思,而在表单元素中<input>标签用于收集用户信息。
在<input>标签中,包含一个type 属性,根据不同的type属性值,输入字段拥有很多种形式(可以是文本
字段、复选框、掩码后的文本控件、单选按钮、按钮等)。

<input type="属性值”  />

type属性的属性值及其描述如下:

属性值	描述
button	定义可点击按钮(多数情况下，用于通过JavaScript启动脚本) .
checkbox	定义复选框。
file	定义输入字段和“浏览"按钮，供文件上传。
hidden	定义隐藏的输入字段。
image	定义图像形式的提交按钮。
password	定义密码字段。该字段中的字符被掩码。
radio	定义单选按钮。
reset	定义重置按钮。重置按钮会清除表单中的所有数据。
submit	定义提交按钮。提交按钮会把表单数据发送到服务器。
text	定义单行的输入字段，用户可在其中输入文本。默认宽度为20个字符。

隐藏域在页面中对于用户是不可见的，在表单中插入隐藏域的目的在于收集或发送信息，以利于被处理表单的程序所使用（隐藏只是在网页页面上面不显示输入框，但是虽然隐藏了，还是具有form传值功能。一般用来传值，而不必让用户看到。）

除type属性外，<input>标签还有其他很多属性,其常用属性如下:

属性	属性值	描述
name	由用户自定义	定义input元素的名称
value	由用户自定义	规定input元素的值
checked	checked	规定此input元素首次加载时应当被选中
maxlength	正整数	规定输入字段中的字符的最大长度

1. name和value是每个表单元素都有的属性值,主要给后台人员使用.
2. name 表单元素的名字，要求单选按钮和复选框要有相同的name值
3. checked属性主要针对于单选按钮和复选框主要作用一打开页面，就要可以默认选中某个表单元素.
4. maxlength 是用户可以在表单元素输入的最大字符数,一般较少使用.

页面中的表单元素很多,如何区别不同的表单元素?
     name属性:当前input表单的名字,后台可以通过这个name属性找到这个表单。页面中的表单很多，name的主要作用就是用于区别不同的表单。

用户名: <input  type="text"   value="请输入用户名"   name="username" />

• name属性后面的值,是自定义的
• radio (或者checkbox )如果是一组,我们必须给他们命名相同的名字

<input type="radio" name="sex'  />男
<input type="radio" name="sex" />女

2.2 <label> 标签

<label>标签为 input 元素定义标注(标签) .
<label>标签用于绑定一个表单元素，当点击<label>标签内的文本时,浏览器就会自动将焦点(光标）转到或者选择对应的表单元素上，用来增加用户体验。
语法:

<label for="sex">男</label>
<input  type="radio"  name= "sex"   id="sex" />

2.3 <select>表单元素

在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用<select>标签控件定义下拉列表.
语法:

<select>
        <option>选项1</option>
        <option>选项2</option>
        <option>选项3</option>

        .......
</select>

2.4 <textarea>表单元素

使用场景:当用户输入内容较多的情况下,我们就不能使用文本框表单了,此时我们可以使用<textarea>标签。
在表单元素中，<textarea>标签是用于定义多行文本输入的控件。
使用多行文本输入控件,可以输入更多的文字,该控件常见于留言板,评论。

<textarea rows= ="3"  cols="20">
文本内容
</textarea>

1.通过<textarea>标签可以轻松地创建行文本输入框。
2. cols= "每行中的字符数”, rows=“ 显示的行数”, 我们在实际开发中不会使用,都是用CSS来改变大小。