学习笔记 第十章 使用CSS美化表单

第10章   使用CSS美化表单

【学习重点】

• 正确使用各种表单控件
• 熟悉HTML5新增的表单控件
• 掌握表单属性的设置
• 设计易用性表单页面

10.1  表单的基本结构

表单包含多个标签，由很多控件组成。一个完整的表单结构由下面三部分组成：

• 表单框架（<form>标签）：<form>标签是一个包含框，里面包含所有表单对象。
• 表单域（<input>、<select>等标签）：用于采集用户的输入或选择的数据。
• 表单按钮（<input>、<buttom>等标签）：用于将数据发送给服务器，还可以用来控制其它脚本行为。

所有表单元素都包含两个基本属性：

• name：定义表单对象的名称；
• id：定义表单对象的ID编码，以便JavaScript和CSS访问该对象。

name和id属性可以设置相同值。

<form>标签包含很多属性，其中HTML5支持的属性说明如下：

HTML5中<form>标签属性列表

属性	取值	说明
accept-charset	charset_list	设置服务器可服务的表单数据字符集
action	URL	设置当提交表单时向何处发送表单数据
autocomplete	On/Off	设置是否启用表单的自动完成功能
enctype	application/x-www-form-urlencoded multipart/form-data text-plain	设置在发送表单数据之前如何对其进行编码
method	get/post	设置在发送表单数据之前如何对其进行编码
name	form_name	设置表单的名称
novalidate	novalidate	如果使用该属性，则提交表单时不进行验证
target	_blank、_self、_parent、_top、_framename	设置在何处打开actionURL

10.2  创建表单控件

10.2.1  输入型控件

<input>标签可定义多种形式的输入框，基本应用方式如下：

<input type=" "/>

如果不设置type属性，默认显示为单行文本框。

HTML5中<input>标签的属性说明如下：

HTML5中<input>标签属性列表

属性	取值	说明
accept	mime_type	设置通过文件上传来提交的文件的类型
alt	text	定义图像输入的替代文本
autocomplete	On/Off	HTML5新增，设置是否使用输入字段的自动完成功能
autofocus	autofocus	HTML5新增，设置字段在页面加载时是否获得焦点
checked	checked	设置此input元素首次加载时应当被选中
disabled	disabled	当input元素加载时禁用此元素
form	formname	HTML5新增，设置输入字段所属的一个或多个表单
formaction	URL	覆盖表单的action属性，适用于type="submit"和type="image"
formenctype	application/x-www-form-urlencoded multipart/form-data text/plain	HTML5新增，覆盖表单的enctype属性，适用于type="submit"和type="image"
formmethod	get post	HTML5新增，覆盖表单的method属性，适用于type="submit"和type="image"
formnovalidate	formnovalidate	HTML5新增，覆盖表单的novalidate属性，使用该属性，则提交表单时不进行验证
formtarget	_blank、_self、_parent、_top、framename	HTML5新增，覆盖表单的target属性，适用于type="submit"和type="image"
height	像素、%	HTML5新增，定义input字段的高度，适用于type="image"
list	datalist-id	HTML5新增，引用包含输入字段的预定义选项的datalist
max	number、date	HTML5新增，设置输入字段的最大值，与min属性配合使用，创建合法值的范围
maxlength	number	设置输入字段中字符的最大长度
min	number、date	HTML5新增，设置输入字段的最小值，与max属性配合使用，创建合法值的范围
multiple	multiple	HTML5新增，如果使用该属性，则允许一个以上的值
name	field_name	定义input元素的名称
pattern	regexp_pattern	HTML5新增，设置输入字段的值的模式或格式
placeholder	text	HTML5新增，设置帮助用户填写输入字段的提示
readonly	readonly	设置输入字段为只读
required	required	HTML新增，指示输入字段的值是必需的
size	number_of_char	定义输入字段的宽度
src	URL	定义以提交按钮形式显示的图像的URL
step	number	HTML5新增，设置输入字的合法数字间隔
type	button、checkbox、file、hidden、image、password、radio、reset、submit、text	设置input元素的类型
value	value	设置input元素的值
width	像素、%	HTML5新增，定义input字段的宽度，适用于type="image"

10.2.2 选择型控件

单选按钮（<input type="radio">）。多个单选按钮可以合并为一个单选按钮组，单选按钮组中的name值必须相同，单选按钮组同一时刻只能选择一个。

复选框（<input type="select">）组可以允许多项选择，每个复选框都是一个独立的元素，且必须有一个唯一的名称（name）。

 <form>
       <p>姓名：<input type="text" value=" " /></p>
       <p> 喜欢的运动：
             <label>
                    <input name="足球" type="checkbox" value="足球"/></label>
             <label>
                    <input name="排球" type="checkbox" value="排球"/></label>
             <label>
                    <input name="篮球" type="checkbox" value="篮球"/></label>
             <label>
                    <input name="羽毛球" type="checkbox" value="羽毛球"/></label>
        </p>
        <p><input type="submit" value="提交"/></p>
 </form>

复选框

<select>标签与<option>标签配合使用可以设计下拉菜单或者列表框。<optgroup>标签是对<option>标签的分组，即多个<option>标签放到一个<optgroup>标签内。

 <form>
       <p>姓名：<input type="text" value="" /></p>
       <p>所在城市：
              <select name="选择城市">
                   <optgroup label="山东省">
                   <option value="潍坊">潍坊</option>
                   <option value="青岛" selected="selected">青岛</option>
                   </optgroup>
                   <optgroup label="山西省">
                   <option value="太原">太原</option>
                   <option value="榆次">榆次</option>
                   </optgroup>
               </select>
        </p>
        <p><input type="submit" value="提交"/></p>
 </form>

列表框

10.2.3 辅助控件

使用<fieldset>和<ledend>标签可以对表单控件进行分组。

• <fieldset>：为表单对象进行分组，一个表单可以包含多个<fieldset>标签。表单区域分组的外围会显示一个包围框。
• <ledend>：定义每组的标题，默认显示在<fieldset>包含框的左上角。

<label>标签定义表单对象的提示信息，不允许嵌套使用。<label>标签包含for专有属性，可将提示信息与表单对象绑定在一起；当用户单击提示信息时，将会激活对应的表单对象。如果不使用for属性，通过<label>标签包含表单对象，也可以实现相同的设计目标。

HTML5为表单中的元素提供了三个属性：accesskey（快捷访问键）、tabindex（Tab访问键）、disabled（禁用表单域，用户不能输入）。

10.3  HTML5新增输入类型

10.3.1 email类型

email类型的input元素是一种专门用于输入email地址的文本框，用法如下：

<input type="email" name="user_email"/>

10.3.2 url类型

url类型的input元素用于输入URL地址这类特殊文本的文本框，用法如下：

<input type="url" name="user_url"/>

10.3.3 number类型

number类型的input元素提供用于输入数值的文本框。用户可以设定对所接受的数字的限制，包括设置允许最大值和最小值、合法的数字间隔或默认值等。例：

<form action="demo_form.php" method="get">
请输入数值：<input type="number" name="number1" min="1" max="20" step="4">
<input type="submit"/>
</form>

number类型使用下面的属性来设置对数字类型的限定：

number类型的属性

属性	取值	说明
max	number	设置允许的最大值
min	number	设置允许的最小值
step	number	设置合法的数字间隔（如果step=“4”，则合法的数字是-4,0,4,8等）
value	number	设置默认值

10.3.4 range类型

range类型的input元素提供用于输入包含一定范围内数字值得文本框，在网页中显示为滑动条。用户还可以设定对所接受的数字的限制。

range类型和属性和number属性完全一致，而不同点仅仅在外观表现上。

10.3.5 日期选择器类型

HTML5提供了6种日期选择器控件，分别用于选取：日期、月、星期、时间、日期+时间、日期+时间+时区，如下表所示：

日期选择器类型

输入类型	HTML代码	功能和说明
date	<input type="date">	选取日、月、年
month	<input type="month">	选取月、年
week	<input type="week">	选取周和年
time	<input type="time">	选取时间（小时和分钟）
datetime	<input type="datetime">	选取时间、日、月、年（UTC时间）
datetime-local	<input type="datetime-local">	选取时间、日、月、年（本地时间）

10.3.6 search类型

search类型的input元素提供用于输入搜索关键词的文本框。

10.3.7 tel类型

tel类型的input元素提供专门用于输入电话号码的文本框，不限定只输入数字。

10.3.8 color类型

color类型的input元素提供专门用于输入颜色的文本框。当color类型文本框获取焦点后，会自动调用系统的颜色窗口。IE和Safari浏览器暂时不支持。

10.4  HTML5新增输入属性

10.4.1 autocomplete属性

autocomplete属性可以帮助用户在input类型的输入框中实现自动完成内容输入。

autocomplete属性有两个值：on、off。

当autocomplete属性值设置为“on”时，可以使用HTML5中新增加的datalist标签和list属性提供一个数据列表供用户选择。

10.4.2 autofocus属性

HTML5新增了autofocus属性，它可以实现在页面加载时，某表单控件自动获得焦点。

10.4.3 form属性

可以把表单内的从属元素写在页面中的任一位置，只需要为这个元素指定一下form属性并为其指定属性值为该表单的id。

10.4.4 表单重写属性

HTML5新增了多个表单重写属性，用于重写form元素的某些属性设定，包括：

• formaction：用于重写表单的action属性。
• formenctype：用于重写表单的enctype属性。
• formmethod：用于重写表单的method属性。
• formnovalidate：用于重写表单的novalidate属性。
• formtarget：用于重写表单的target属性。

表单重写属性并不适用于所有的input输入类型，仅适用于submit和image输入类型。

10.4.5 height和width属性

height和width属性用于设置image类型的标签的图像高度和宽度，这两个属性只适用于image类型的<input>标签。

<form action="testform.asp" method="get">
请输入用户名：<input type="text" name="user_name"/><br/>
<input type="image" src="data:images/1.png" width="72" height="26"/>
</form>

如以上代码所示，image类型的input标签被限制为72X26像素。

10.4.6 list属性

HTML5中新增了一个datalist元素，可以实现数据列表的下拉效果，其外观类似autocomplete，用户可以从列表中选择，也可以自行输入。

目前支持这一属性的浏览器只有Opera。

 <form action="testform.asp" method="get ">
     请输入网址：
     <input type="url" list="url_list" name="weblink"/>
     <datalist id="url_list">
         <option label="新浪" value="http://www.sina.com.cn" />
         <option label="搜狐" value="http://www.sohu.com" />
         <option label="网易" value="http://www.163.com"/>
     </datalist>
     <input type="submit" value="提交"/>
 </form>

list属性示例代码

10.4.7 min、max和step属性

HTML5新增了min、max和step属性，用于为包含数字或日期的input输入类型设置限值。

10.4.8 multiple属性

在HTML5之前，input输入类型中file类型支持选择单个文件来上传，而HTML5新增的multiple属性支持一次性选择多个文件。

10.4.9 pattern属性

pattern属性用于验证input类型输入框中用户输入的内容是否与自定义的正则表达式相匹配。

该属性适用于以下类型的<input>标签：text、search、URL、telephone、email、password。

pattern属性允许用户自定义一个正则表达式，pattern属性中的正则表达式语法与JavaScript中的语法相匹配。

<form action="testform.asp" method="get ">
    请输入邮政编码：
    <input type="text" name="zip_code" pattern="[0-9]{6}" title="请输入6位数的邮政编码"/>
    <input type="submit" value="提交"/>
</form>

10.4.10 placeholder属性

placeholder属性用于为input类型的输入框提供一种提示（hint），这些提示可以描述输入框期待用户输入何种内容，在输入框为空时显式出现，当输入框获得焦点时消失。

<form action="testform.asp" method="get ">
    <input type="text" name="zip_code" pattern="[0-9]{6}" placeholder="请输入6位数的邮政编码"/>
    <input type="submit" value="提交"/>
</form>

10.4.11 required属性

新增的required属性用于定义输入框填写的内容不能为空，否则不允许用户提交表单。示例：

<input type="text" name="user_name" required="required"/>

10.5  HTML5新增控件

10.5.1 datalist元素

datalist元素用于为输入框提供一个可选的列表。该列表由datalist中的option元素创建。用户也可以不从列表中选择，自行输入其它内容。

在实际应用中，如果要把列表绑定到某个输入框，则需要使用输入框的list属性来引用datalist元素的id。

每一个option元素都必须设置value属性。

10.5.2 keygen元素

keygen元素是秘钥相对生成器，能够使得用户验证更为可靠。用户提交表单时会生成两个键，一个私钥，一个公钥。私钥会被储存在客户端，公钥则会被发送到服务器。

<form action="testform.asp" method="get ">
    请输入用户名：
    <input type="text" name="user_name"/>
    <br/>
    请输入加密强度：
    <keygen name="security"/>
    <br/>
    <input type="submit" value="提交"/>
</form>

10.5.3 output元素

output元素用于在浏览器中显示计算结果或脚本输出，包含完整的开始和结束标签，语法如下：

<output name="">Text</output>

10.6 HTML5表单属性

HTML5新增了2个form属性，分别是autocomplete和novalidate。

10.6.1 autocomplete属性

当autocomplete属性用于整个form时，所有从属于该form的元素便都具备自动完成功能。

如果要使个边元素关闭自动完成功能，则单独为该元素指定“autocomplete="off"”即可。

10.6.2 novalidate属性

form元素的novalidate属性用于在提交表单时取消整个表单的验证，即关闭对表单内所有元素的有效性检查。

10.6.3 显式验证

除了为input元素新增属性，来对输入内容进行自动验证外，HTML5为form、input、select和textarea元素都定义了一个checkValidity（）方法。调用该方法，可以显式地对表单内所有元素内容或单个元素内容进行有效性验证。checkValidity（）方法将返回布尔值。