学习笔记 第十章 使用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）。

 1 <form>
 2       <p>姓名：<input type="text" value=" " /></p>
 3       <p> 喜欢的运动：
 4             <label>
 5                    <input name="足球" type="checkbox" value="足球"/></label>
 6             <label>
 7                    <input name="排球" type="checkbox" value="排球"/></label>
 8             <label>
 9                    <input name="篮球" type="checkbox" value="篮球"/></label>
10             <label>
11                    <input name="羽毛球" type="checkbox" value="羽毛球"/></label>
12        </p>
13        <p><input type="submit" value="提交"/></p>
14 </form>
复选框

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

 1 <form>
 2       <p>姓名：<input type="text" value="" /></p>
 3       <p>所在城市：
 4              <select name="选择城市">
 5                   <optgroup label="山东省">
 6                   <option value="潍坊">潍坊</option>
 7                   <option value="青岛" selected="selected">青岛</option>
 8                   </optgroup>
 9                   <optgroup label="山西省">
10                   <option value="太原">太原</option>
11                   <option value="榆次">榆次</option>
12                   </optgroup>
13               </select>
14        </p>
15        <p><input type="submit" value="提交"/></p>
16 </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="images/1.png" width="72" height="26"/>
</form>

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

10.4.6 list属性

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

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

 1 <form action="testform.asp" method="get ">
 2     请输入网址：
 3     <input type="url" list="url_list" name="weblink"/>
 4     <datalist id="url_list">
 5         <option label="新浪" value="http://www.sina.com.cn" />
 6         <option label="搜狐" value="http://www.sohu.com" />
 7         <option label="网易" value="http://www.163.com"/>
 8     </datalist>
 9     <input type="submit" value="提交"/>
10 </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（）方法将返回布尔值。

posted @ 2017-12-03 15:53  金牛acho  阅读(3748)  评论(0)  编辑  收藏  举报