下载掌阅APP，畅读海量书库
立即打开
2.3 表单及表单元素 |
|
2-9 表单简介
表单是HTML的一个重要组成部分，一般来说，网页通常会通过“表单”形式供浏览者输入数据，然后将表单数据返回服务器，以备登录或查询之用。
表单可以提供输入的界面，供浏览者输入数据，常见的应用有Web搜索、问卷调查、注册用户、在线订购等。
2-10 表单标签
表单是页面上的一块特定区域，这块区域由一对<form>标签定义，有两个作用，一方面，限定表单的范围，其他表单对象都要插入表单之中，单击“提交”按钮时，提交到服务器的也就是表单范围之内的内容；另一方面，携带表单的相关信息，如服务器端处理表单数据的程序位置、提交表单的方法，这些信息对于浏览者是看不到的，但是对于处理表单却有着重要的作用。
<form>标签的主要作用是设定表单的起始位置，并指定处理表单数据程序的URL地址，表单所包含的控件就在<form>与</form>之间定义。
表单定义基本语法：
语法解释：
用户填入表单的信息总是需要程序进行处理，action属性就指明了处理表单信息的路径与文件名称。
method表示发送表单信息的方式，有get和post两个值。get方式是将表单控件的name=value信息经过编码之后通过URL发送（可以在地址栏中看到），而post方式则将表单的内容通过http发送，在地址栏中看不到表单的提交信息。那什么时候使用get，什么时候使用post呢？一般这样来判断，如果只是取得和显示数据，用get方式；一旦涉及数据的保密和更新，建议使用post方式。
2-11 表单域
1.表单常用控件及属性
（1）表单常用控件
通过HTML表单的各种控件，用户可以输入或者从选项中选择文字信息，做提交的操作。表单常用控件及相应的HTML标签见表2-8。
表2-8 表单中的常用控件及相应的HTML标签
（续）
（2）表单控件属性
以上类型的输入区域有一个公共的属性name，此属性给每一个输入区域定义一个名字。这个名字与输入区域是一一对应的，即一个输入区域对应一个名字。服务器就是通过调用某一输入区域名字的value值来获取该区域数据的。value属性还可以用来指定输入区域的默认值。
表单控件属性设置基本语法：
表单常用属性见表2-9。
表2-9 表单常用属性
2.基本语法
（1）单行文本输入框（input type="text"）
单行文本输入框允许用户输入简短的单行信息，如用户姓名，基本语法：
（2）密码输入框（input type="password"）
密码输入框主要用于保密信息的输入，如密码。一般情况下，用户输入的时候显示的不是输入的内容，而是“*”号。
基本语法：
（3）单选框（input type="radio"）
用户填写表单时，有一些内容可以通过选择的形式来实现输入，如常见的网上调查，首先提出若干问题，然后让浏览者在若干个选项中做出选择。使用单选框可以让用户在一组选项里只能选择一个，选项以一个圆框表示。
基本语法：
（4）复选框（input type="checkbox"）
复选框允许用户在一组选项中选择多个，用checked表示默认已选的项。
基本语法：
（5）标注
<label>标签为input元素定义标注（标签）。label元素不会向用户呈现任何特殊效果，不过，它为鼠标用户改进了可用性。如果在label元素内单击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
提示： for属性规定label与哪个表单元素绑定，可把label绑定到另外一个元素，所以需要把for属性的值设置为相关元素的id属性相同的值。
基本语法如下。
使用<label>标签环绕也可以达到一样的效果，语句如下。
（6）列表框（select）
下拉列表框是一种最节省空间的控件，正常状态下只能看到一个选项，单击下拉按钮打开列表后才能看到全部选项。
列表框可以显示一定数量的选项，如果超出了这个数量，会自动出现滚动条，浏览者可以通过拖动滚动条来查看各选项。
通过<select>和<option>标签可以设计页面中的下拉列表框和列表框效果，基本语法：
相关各属性的含义见表2-10。
表2-10 列表框标签的属性
（续）
（7）多行文本输入框（textarea）
多行文本输入框主要用于输入较长的文本信息。
基本语法：
相关各属性的含义见表2-11。
表2-11 多行文本输入框的属性
（8）普通按钮
在表单中，按钮起着至关重要的作用，可以触发提交表单的动作，可以在用户需要的时候将表单恢复到初始状态，还可以根据程序的需要发挥其他作用。
表单中的按钮分为普通按钮、提交按钮、重置按钮，其中普通按钮本身没有指定特定的动作，需要配合JavaScript脚本来进行表单处理，基本语法：
语法解释：
value的值代表显示在按钮上面的文字。
（9）提交按钮
通过提交按钮可以将表单中的信息提交给表单中的action所指向的文件。
基本语法：
语法解释：
单击提交按钮时，可以实现表单的提交。value的值代表显示在按钮上面的文字。
（10）图片式提交按钮（input type="image"）
使用传统的按钮形式可能会让人感觉单调，而且如果网页使用丰富的色彩或稍微复杂的设计，再使用传统的按钮形式，可能会影响整体美感。这时，可以使用图片式提交按钮，即在提交按钮位置上放置图片，这幅图片具有提交按钮的功能。
基本语法：
语法解释：
type="image"相当于type="submit"，不同的是type="image"以一个图片作为表单的按钮；src属性表示图片的路径；alt属性表示图像无法显示时的替代文本。
（11）重置按钮（input type="reset"）
通过重置按钮可将表单内容全部清除，恢复成默认的表单内容设定，然后重新填写。
基本语法：
语法解释：
value用于按钮上的说明文字。
1.placeholder
2-12 placeholder属性
指文本框处于未输入状态并且未获得光标焦点时，降低显示输入提示文字的不透明度，如搜索框效果：<input type="text"placeholder="点击这里搜索">，placeholder是HTML 5的新属性，仅有支持HTML 5的浏览器才支持placeholder。
2.type
HTML5加入了新的input类型number，这是方便数值输入的。如果是在移动端，属性type="number"会唤起系统的数字键盘，这对于交互还是挺友好的。type字段只是为输入提供选择格式，更多情况下应该说新增的type是为了适配移动端WebApp而存在的。
3.pattern
该属性规定用于验证输入字段的模式，当触发表单提交的时候，浏览器会将输入与pattern属性匹配来最终判断是否有效输入，示例如下。
4.autofocus
2-13 autofocus属性
规定在页面加载时，输入域自动获得焦点。例如让name属性为"stuId"的input输入域在页面载入时自动聚焦的语法示例：
5.required
2-14 required属性
规定必须在表单提交之前填写输入域（不能为空），示例如下。
注意： Internet Explorer 9及更早IE版本不支持input标签的这些新属性。