web（四）html表单类标签

表单类标签

　　操作者用于输入信息，并将信息提交给服务器的标签集合。

　　表单标签介绍

　　　　　　form标签：表单元素（其余标签）标签的容器标签

　　　　　　input标签：用于用户信息输入的标签。

　　　　　　button标签：按钮标签。

　　　　　　select/option标签：下拉框标签。

　　　　　　textarea标签：文本域标签。

　　　　　　lable标签：修饰输入元素的文字标签。

　　表单元素标签公有的属性（html4标准）

　　　　　　id：表单标签的唯一索引，一般在js中根据唯一索引获取表单元素。

　　　　　　name：表单标签的名称，在提交数据时，以name属性作为实际值的索引。

　　　　　　disabled:禁用当前表单元素。

　　　　　　readonly：规定表当前表单元素为只读元素。

　　　　　　value：设定或获取当前表单元素的输入值。

　　　　　　accessKey：访问当前元素的快捷键，非表单类属性，但通常用在表单元素中。

　　form标签：输入标签项的容器，封装子输入标签，主要作用如下

　　　　　　设定当前表单提交的目标服务器地址。

　　　　　　设定提交的http请求类型。

　　　　　　设定提交数据的编码格式。

　　　　　　通过js可以在提交前验证数据的合法性。

　　　　　　

　　　　　　method的设定

　　　　　　　　取值范围

　　　　　　　　　　get:声明本次请求的目的是从服务器获取数据。

　　　　　　　　　　post：声明本次请求的目的是向服务器传送数据。

　　　　　　　　get与post的区别

　　　　　　　　　　目的不同

　　　　　　　　　　提交方式不同（一个在响应头，一个在响应体）

　　　　　　　　　　提交数据长度不同，get：不超过255个字符，post理论上不受限制。

　　　　　　　　　　安全性get在地址栏显示信息，不安全。

　　　　　　　　　　缓存机制不同，get请求的地址会保存到浏览器的访问历史记录中，post不会。

　　　　　　enctype的设定的取值范围

　　　　　　　　　　

　　input标签：用来声明一组用于用户输入信息的标签，使用type属性可以设定输入的类型。

　　input标签的分类

　　　　输入类

　　　　　　　　text：文本框，type的默认值，

　　　　　　　　password：密码框，密码框的文字以黑点方式显示。

　　　　　　　　hidden：隐藏框，元素不显示，可以通过此标签提交用户不可见信息如id等。

　　　　　　私有属性（具备表单标签的公有属性）

　　　　　　　　maxlength：限定输入字符的长度。

<input type="text" value="userName" name="text" maxlength="10" />
<input type="password" value="password" name = "password" maxlength="10" />

　　　　选择类

　　　　　　　　checkbox：多选框。

　　　　　　　　radio：单选框，表单中name属性相同的radio，只能有一个被选中。

　　　　　　私有属性（具备表单标签的公有属性）

　　　　　　　　checked：设定是否被选中，在html中只要声明此属性就被选中

<input type="radio" name = "sex"  value = "1"/></br>
<input type="checkbox" name="fav" checked="false" value="1"/>

　　　　文件类

　　　　　　　　file：文件选择框。

　　　　　　私有属性（具备表单标签的公有属性）

　　　　　　　　multiple：设定是否可以多选，在html中只要声明此属性就可以多选。

　　　　　　　　accept：设定选择文件的mime类型，多个类型用逗号分隔开。

<input type="file" name = "file" multiple accept="image/gif, image/jpeg"/>

　　　　按钮类

　　　　　　　　button：按钮标签。

　　　　　　　　image：图片按钮标签。

　　　　　　　　submit：提交按钮标签，默认行为是提交当前form表单。

　　　　　　　　reset：重置按钮标签，默认行为是当前表单恢复到网页初始化状态。

<input type="submit" value = "提交" />
<input type="reset" value = "重置" />

　　　　　　　　button标签：按钮标签，非闭合标签，可以在该标签内部插入其他html元素，因此可以定义出功能强大的按钮。

　　　　　　私有属性（具备表单标签的公有属性）

　　　　　　　　type：按钮的类型。

　　　　　　　　reset：重置类型按钮

　　　　　　　　submit：提交类型按钮

　　　　　　　　button：不同按钮，无默认行为。

<button type="submit"><div>大家好</div></button>

　　

　　下拉框标签：使用select、option两个标签声明下拉框。　　

<select name="pro" >
    <option value="1">北京</option>
    <option value="2">上海</option>
</select>

　　　　　　select标签私有属性

　　　　　　　　multiple：规定可选择多个选项。

　　　　　　　　size：规定可见下拉框选项的数量。

　　　　　　option标签私有属性

　　　　　　　　selected:当前下拉明细项是否被选中。

　　

　　textarea标签：设定多行的文本输入控件。

　　　　私有属性（具备表单标签的公有属性）

　　　　　　cols:规定文本区内的可见宽度。

　　　　　　rows:规定文本区内的可见行数。

　　　　　　maxlength:文本输入的最大字符数量。

<textarea name = "introduce" maxlength="500" cols="20" rows="10"></textarea>

　　label元素：输入标签的文字描述标签，可以代替输入标签响应用户的操作。

　　　　　　私有属性说明

　　　　　　　　 for:输入标签的id属性值。

<label for="sex1">女</label>
<input id = "sex1" type="radio" name = "sex"  value = "1"/>