学习笔记（三）——HTML中的表单标签

表单标签

表单主要用于收集用户信息，与用户交互，将数据提交给服务器。表单的三个主要元素为表单域、表单控件、提示信息。

1.表单域

表单域是指整个表单区域，标签为<form></form>（相当于表格中的<table>），这个标签会把它里面的信息提交给服务器。
<form>标签的属性：

属性	说明
action	用于指定接收并处理表单数据的服务器的地址
method	用于设置表单数据的提交方式，属性值为get或post
name	用于指定表单名称以区分同一页面内的多个表单

2.表单控件

（1）input输入表单元素（单标签）

• 基本语法：<input type=“属性值”>
• name属性：用于区别不同input表单元素，属性值由用户自定义，可用于单选按钮实现多选一功能
• value属性：属性值由用户自定义，定义input元素的值，只有在type为text的时候才会出现在网页上，其他类型是被隐藏的，主要给后台人员使用
• type属性：

属性值	说明
text	单行文本框，默认长度为20个字符
password	密码框，用户输入的内容会被加密不显示
radio	单选按钮，注意要给同一个问题的多个单选按钮设置同一个name才可以实现多选一的效果
checkbox	复选框，实现多选效果，要给同一系列的复选框定义相同的name
button	可点击按钮，不提交数据，只是完成某个任务，可以用于“获取短信验证码”，多数情况下用于通过js启动脚本
submit	提交按钮，把表单数据发送到服务器，通过value属性可以改变按钮的值，默认按钮的值为“提交”
reset	重置按钮，清除表单中的所有数据，通过value属性可以改变按钮的值，默认按钮的值为“重置”
file	定义输入字段和“浏览”按钮，供文件上传
image	定义图像形式的提交按钮
hidden	定义隐藏的输入字段

• checked属性：属性值checked，规定此input元素首次加载时应当被选中，即打开网页的时候就默认选中了（比如可用于注册时的同意协议）。一般用于单选按钮和复选框，且单选按钮中只有一个选项可以被设置默认选中，复选框可以有多个。
• maxlength属性：属性值正整数，规定输入字段中的字符最大长度，一般较少使用

<label>标签

<label>标签本身不属于表单元素，但经常和表单元素搭配使用，用于绑定一个表单元素，当点击标签内的文本时，浏览器就会自动将焦点（光标）转到或者选择对应的表单元素上，用来增加用户体验。
举个栗子：

<--! 设置这样一个单选按钮，直接点击"男"这个字，也可以选中按钮，不用将鼠标定位到按钮上（for属性和id属性属性值要一致） -->
<label for="sex">男</label>
<input type="radio" name="sex" value="男" id="sex">

（2）<select>表单元素

<select>表单元素用于定义下拉表单，使表单页面更加简洁。
基本语法：

提示信息
<select>
	<option>选项1</option>
	<option>选项2</option>
	<option>选项3</option>
	··· ···
</select>

• 注意事项：
  • <select>标签中至少包含一对<option>标签
  • 下拉表单会显示选项1的内容
  • 在<option>标签中定义selected="selected"时，当前项即默认选中项

（3）<textarea>表单元素

<textarea>表单元素用于表单域，当用户输入内容较多时使用，常用于留言板、评论等。

<textarea rows="5" cols="50">  <--! 确定文本框大小 -->
	文本内容
</textarea>

3.提示信息

提示用户的文字。