第7章 使用表单

                                  第7章 使用表单

7.1 form元素创建表格

（1）form元素用于定义表单。form元素可以设置表单的基本属性，包括表单的名称，处理程序和传送方法等。一般情况下，表单的处理程序action和传送方法method是必不可少的属性。

表7-1 form元素的属性

属性	描述
accept-charset	规定在被提交表单中使用的字符集（默认：页面字符集）
action	规定提交表单的地址（URL）
autocomplete	规定浏览器应该自动完成表单（默认：开启）
enctype	规定被提交数据的编码（默认：url-encoded）
method	规定在提交表单是所用的HTTP方法（默认:GET）
name	规定识别表单的名称
novalidate	规定浏览器不验证表单
target	规定action属性指定目标窗口的打开方式

7.1.1 提交表单action

（1）action用于指定表单数据提交的地址。
（2）语法：

<form action="表单的提交地址">
...
</form>

（3）表单的处理程序是表单要提交的地址，也就是表单中收集到的资料将要传递的程序地址。这一地址可以是绝对地址，也可以是相对地址，还可以是一些其他形式的地址。

例子7-1
使用action属性，指定表单数据提交到form_action.asp进行处理。

<form action="form_action.asp">
...
</form>

7.1.2 表单名称name

（1）name用于给表单命名，这一属性不是表单的必要属性，但是为了防止表单提交到后台处理程序时出现混乱，一般需要给表单命名。
（2）语法：

<form name="表单名称">
...
</form>

（3）说明：
表单名称中不能包含特殊字符和空格。

例子7-2
使用name属性，将表单命名为"form1"。

<form action="form_action.asp" name="form1">
...
</form>

7.1.3 传送方法method

（1）表单的method属性用于指定在数据提交到服务器的时候使用哪种HTTP提交方法，可取值为get或post。
get:表单数据被传送到action属性指定的URL，然后这个URL被送到处理程序上。
post:表单数据被包含在表单主体中，然后被送到处理程序上。
（2）语法：

<form method="传送方法">
...
</form>

例子7-3
使用method属性，指定将表单使用post方式提交到form_action.asp

<form action="form_action.asp" name="form1" method="post">
...
</form>

7.2 插入input元素

（1）input元素是最重要的表单元素。input元素可以有很多不同的形态，通过type属性来指定input的类型。input元素的类型包括文字字段，单选按钮，复选框，菜单，列表，以及按钮。表7-2中罗列了input元素的常用属性，表7-3中罗列了input元素的其他属性。

表7-2 input元素的常用元素

属性	值	描述
name	field_name	定义input元素的名称
type	button checkbox file hidden image password radio reset submit text	规定input元素的类型
placeholder	text	规定帮助用户填写输入字段的提示
value	value	规定input元素的值
width	pixels %	定义input字段的宽度（适用于type=“image”）
disabled	disabled	当input元素加载时禁用此元素
height	pixels %	定义input字段的高度（适用于type=“image”）
alt	text	定义图像输入的替代文本
autocomplete	on off	规定是否使用输入字段的自动完成功能
autofocus	autofocus	规定输入字段在页面加载时是否获得焦点 （不适用于type=“hidden”）
checked	checked	规定此input元素首次加载时应当被选中
readonly	readonly	规定输入字段为只读
src	URL	定义以提交按钮形式显示图像的URL
maxlength	number	规定输入字段中字符的最大长度
max	number data	规定输入字段的最大值 与min属性配合使用，来创建合法值的范围
size	number_of_char	定义输入字段的宽度
min	number data	规定输入字段的最小值 与max属性配合使用，来创建合法值的范围
multiple	multiple	如果使用该属性，则允许一个以上的值

表7-3

属性	值	描述
pattern	regexp_pattern	规定输入字段的值的模式与格式 例如
required	required	指示输入字段的值是必需的
step	number	规定输入字的合法数字间隔
form	formname	规定输入字段所属的一个或多个表单
formaction	URL	覆盖表单的action属性 （适用于type="submit"和type=“image”）
formenctype	编码方式	覆盖表单的enctype属性 （适用于type="submit"和type=“image”）
formmethod	get post	覆盖表单的method属性 （适用于type="submit"和type=“image”）
formnovalidate	formnovalidate	覆盖表单的novalidate属性 如果使用该属性，则提交表单时不进行验证
formtarget	_blank _self _parent _top framename	覆盖表单的target属性 （适用于type="submit"和type=“image”）
accept	mime_type	规定通过文件上传来提交文件的类型
list	datalist_id	引用包含输入字段预定义选项的datalist

7.2.1 文本框text

（1）在网页中最常见的表单元素就是文本框，用户可以在文字字段内输入字符或单行文本。
（2）语法：

<input type="text" name="文本框的名称">

例子7-4
创建两个文本框，分别用于输入用户名和邮箱，使用用户名的文本框name属性设置为username,输入邮箱的文本框name属性设置为email.placeholder属性可以规定文本框的提示信息，提示内容在用户未输入内容是显示，在浏览器中显示。

<form action="">
   用户名：<input type="text" name="username" placeholder="请输入用户名">
   邮箱: <input type="text" name="email">
</form>

7.2.2 密码框password

（1）密码框是一种特殊的文字字段，它的各属性和文字字段是相同的；所不同的是，密码框输入的字符全部以星号"*"显示。
（2）语法：

<input type="password" name="密码框的名称">

提示：
密码域仅仅使周围的人看不见输入的文本，它不能保证数据安全。为了保证数据安全，需要在浏览器和服务器之间建立一个安全链接。

例子7-5
创建一个密码框，在浏览器中的显示。

<form action="">
  密码：<input type="password" name="pw">
</form>

7.2.3 单选按钮radio

（1）单选按钮是小而圆的按钮，它可以使用户从选择列表中选择一个选项。
（2）语法：

<input type="radio" name="单选按钮名称" value="单选按钮的取值" checked>

（3）说明：
在单选按钮中必须设置value的值，表示选项的值。对于一个选择列表中的所有单选按钮来说，需要设置相同的name属性进行标记，这样在传递时才能更好地对某一个选择内容进行判断。在一个单选按钮组中只有一个单选按钮可以设置为"checked",表示默认选中。

例子7-6
使用单选按钮来选择性别，默认选中“男”，在浏览器中的显示。

<form action="">
     性别：
     <input type="radio" name="gender" value="male" checked> 男
     <input type="radio" name="gender" value="female"> 女
</form>

7.2.4 复选框checkbox

（1）复选框可以让用户从一个选项列表中选择多个选项。
（2）语法：

<input type="checkbox" name="复选框名称" value="复选框的取值" checked>

（3）说明：
在复选按钮中必须设置value的值，表示选项的值。对于一个选择列表中的所有复选按钮来说，需要设置相同的name属性进行标记，这样在传递时才能更好地对某一个选择内容进行判断。checked参数表示该项在默认情况下已经被选中，一个选项列表中可以有多个复选框被选中。

例子7-7
使复选框的形式列出供用户选择的兴趣爱好，在浏览器中显示。

<form action="">
  兴趣爱好：
        <input type="checkbox" name="interst" value="game" checked>游戏
        <input type="checkbox" name="interst" value="footable" checked>足球
        <input type="checkbox" name="interst" value="swimming" checked>游泳
        <input type="checkbox" name="interst" value="read" checked>读书
    </form>

7.2.5 普通按钮button

（1）在网页中按钮也很常见，在提交页面，清除内容时常常用到。普通按钮一般情况下要配合脚本来进行表单处理。
（2）语法：

<input type="button" name="按钮名称" value="按钮的取值" onclick="处理程序">

（3）说明：
value的取值就是显示在按钮上的文字，在button属性中可以添加onclick来实现一些特殊的功能。

例子8-7
创建一个普通按钮，使用value属性来设置按钮文本为“关闭窗口”，在浏览器属性。使用onclick增加JavaScript脚本实现关闭窗口的功能，当单击按钮时，浏览器的窗口关闭。

 <form action="">
       <input type="button" name="close" value="关闭窗口" onclick="windows.close()">
    </form>

7.2.6 提交按钮submit

（1）提交按钮是一种特殊的按钮，单击该按钮可以实现表单内容的提交。
（2）语法：

<input type="submit" name="按钮名称" value="按钮的取值">

（3）说明：
value同样用来设置显示在按钮上的文字。

例子7-9
创建一个表单，其中包含文本输入框（用户名），密码框和提交按钮。当单击提交按钮时，填写的用户名和密码被提交到form元素中action属性指定的地址。提交的信息同时会添加在浏览器的地址栏后面，在浏览器中的显示。

<form action="">
       用户名：<input type="text" name="username">
       <br>
       <br>
       密码：<input type="password" name="pw">
       <br>
       <br>
       <input type="submit" name="submit" value="提交">
    </form>

7.2.7 重置按钮reset

（1）重置按钮用来清除用户在网页中输入的信息。
（2）语法：

<input type="reset" name="按钮名称" value="按钮的取值">

例子7-10
创建表单，在表单中填写用户名和密码。当单击重置按钮时，表单中填写的内容被清空。

<form action="">
       用户名：<input type="text" name="username">
       <br>
       <br>
       密码：<input type="password" name="pw">
       <br>
       <br>
       <input type="submit" name="submit" value="提交">
       <input type="reset" name="clean" value="重置">
    </form>

7.2.8 图像域

（1）还可以使用图像作为按钮，这样做可以创建能想象到的任何外观的按钮。
（2）语法：

<input type="image" name="图像域名称" src="图像路径">

（3）说明：
在语法中，图像的路径可以是绝对地址，也可以是相对地址。

例子7-11
创建图像按钮，在浏览器中显示。

 <input type="image" name="图像域名称" src="img/按钮.png">

7.3 HTML5新增输入类型

7.3.1 数值number

（1）number类型用于数值的输入域，可以使用表7-5中的属性对输入的数值进行限制。

表7-5 数值输入框的限制属性

属性	值	描述
max	number	规定允许的最大值
min	number	规定允许的最小值
step	number	规定合法的数字间隔(如果step=“3”,则合法的数是-3,0，3,6等)
value	number	规定默认值

（2）语法：

<input type="number" name="数值输入框的名称">

例子7-12
创建数值输入框，设置默认值为3，数值的变化范围为0~10，并规定数值只能以2的倍数进行变化，在浏览器中显示。

<form action="" method="post">
      <input type="number" name="num" value="3" max="10" step="2">
    </form>

7.3.2 时间选择器DatePicker

（1）HTML5拥有多个新的可供选取日期和时间的输入类型。
date：选取日，月，年。
month：选取月，年。
week：选取周和年。
time：选取时间（小时和分钟）。
datetime-local：选取时间（小时和分钟），日，月，年（本地时间）。
（2）语法：

<input type="时间类型" name="时间选择器的名称">

例子7-13
将时间选择器的类型设置为date的时候，单击下拉按钮可从下拉菜单中选择日，月，年3种类型的日期，在浏览器中的显示。

<form action="" >
      <input type="date" name="date">
    </form>