HTML表单标签

HTML标签（二）

表单标签

使用场景：注册页面

使用表单的目的为了与用户进行交互，收集用户信息

一个完整的表单通常由表单域，表单控件（表单元素）和信息元素等 3部分构成

表单域

表单域是一个包含表单元素的区域

form标签用于定义表单域，以实现用户信息的收集和传递，form会把他范围内的表单元素信息提交给服务器（双标签）

基本语法

<form action="url地址" method="提交方式" name="表单域名词">
    各种表单元素控件
</form>

属性	属性值	作用
action	url地址	用于指定接受并处理表单数据的服务器程序的url地址
method	get/post	用于设置表单数据的提交方式，其取值为get或post
name	名称	用于指定表单的名称，以区分同一个页面中的多个表单域

2.表单元素
允许用户在表单中输入或者选择的内容控件
1.input输入表单元素

标签用于收集用户信息（单标签）

标签包含一个type属性，根据不同的type属性值，来指定不同的控件类型

属性值	描述	注
text	定义单行的输入字段，用户可在其中输入文本。默认宽度为20个字符	value属性值显示为默认值
password	定义密码字段，该字段中的字符被隐藏
radio	定义单选按钮	实现多选一时，多个单选按钮需要同样的name属性值
checkbox	定义复选框	复选框也需要同样的name属性值
submit	定义提交按钮，提交按钮会把表单的数据发送给服务器	value值可以改变按钮上的显示字符
reset	定义重置按钮，重置按钮会清除表单中的所有数据，还原到默认状态
button	定义可点击按钮（多数情况下，用于通过js启动脚本）	如发送验证码按钮
file	定义输入字段和“浏览”按钮，供文件上传
hidden	定义隐藏的输入字段
image	定义图像形式的提交按钮

除type属性外，标签还有其他很多属性，其常用属性如下：

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

name和value是每个表单元素都有的属性值，主要给后台人员使用

checked属性主要针对于单选按钮和复选框

额外知识：
标签
双标签
标签用于绑定一个表单元素，当点击标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验
语法：

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

核心：标签的for属性应当于相关元素的id属性相同

表单常用按钮：

<!-- 普通按钮 -->
<input type="button" value="普通按钮">
<!-- 文件域 -->
<input type="file" name="headTmg">
<!-- 表单提交按钮submit -->
<input type="submit" >
<!-- 表单还原按钮 -->
<input type="reset" value="重新填写">

2.select下拉表单元素

双标签
使用场景：如果有多个选项让用户选择，并且想要节约页面空间时，使用标签定义下拉列表
语法

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

在中定义selected="selected"时，当前项为默认选中项

3.textarea文本域元素

双标签
使用场景：当用户输入内容较多的情况下，就不能使用文本框表单了，可以使用标签定义多方文本输入控件，常用于留言板、评论
语法

<textarea rows="3" cols="20">
    这里显示默认文本内容，且会显示于标签间的空格
</textarea>

cols=“每行中的字符数”，rows=“显示的行数”（并不是所有行数，超过显示行数后会自动加上滚动条），在实际开发中不会使用，都是用CSS来改变大小