表单的应用

表单的应用

一、认识表单

1.表单的构成

一个完整的表单通常由表单控件（也称为表单元素）、提示信息和表单域3个部分构成。

（1）表单控件

包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

（2）填写信息

（3）表单域

用来容纳所有的表单控件和提示信息，可以通过它定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。

2.创建表单（

标记)

二、表单属性

1.action属性

用于指定接收并处理表单数据的服务器程序的url地址。

还可以为接收数据的E-mail邮箱地址。

2.method属性

用于设置表单数据的提交方式，其取值为get或post。get为method属性的默认值，采用get方法，提交的数据将显示在浏览器的地址栏中，保密性差，且有数据量的限制，而post方式的保密性好，并且无数据量的限制。

3.name属性

用于指定表单的名称，以区分同一个页面中的多个表单。

4.autocomplete属性

用于指定表单是否有自动完成功能。

•on：表单有自动完成功能

•off：表单无自动完成功能

5.novalidate属性

指定在提交表单时取消对表单进行有效的检查。

注：标记的属性并不会直接影响表单的显示效果。要想让一个表单有意义，就必须在与之间添加相应的表单控件。

三、Input元素及属性

1.Input元素的type属性

（1）单行文本输入框

（2）密码输入框

（3）单选按钮

注：在定义单选按钮时，必须为同一组中的选项指定相同的name值，这样“单选”才会生效。

（4）复选框

（5）普通按钮

（6）提交按钮

（7）重置按钮

（8）图像形式的提交按钮

（9）隐藏域

（10）文件域（用于将文件提交给后台）

（11）email类型

（12）url类型

（13）tel类型

（14）search 类型

（15）color类型

（16）number类型

用于提供输入数值的文本框。在提交表单时，会自动检查该输入框中的内容是否为数字。如果输入的内容不是数字或者数字不在限定范围内，则会出现错误提示。number类型的输入框可以对输入的数字进行限制，规定允许的最大值和最小值、合法的数字间隔或默认值等。

•value：指定输入框的默认值。

•max：指定输入框可以接受的最大的输入值。

•min：指定输入框可以接受的最小的输入值。

•step：输入域合法的间隔，如果不设置，默认值是1。

（17）range类型：用于提供一定范围内数值的输入范围，在网页中显示为滑动条。

（18）Date pickers类型 ：指时间日期类型

2.Input元素的其他属性

（1）autofocus属性：用于指定页面加载后是否自动获取焦点。

（2）form属性

（3）list属性：通过datalist元素实现数据列表的下拉效果。

（4）multiple属性：指定输入框可以选择多个值。

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

（6）placeholder属性：用于为input类型的输入框提供相关提示信息，以描述输入框期待用户输入何种内容。在输入框为空时显式出现，而当输入框获得焦点时则会消失。

（7）required属性：用于规定输入框填写的内容不能为空，否则不允许用户提交表单。

四、其他表单元素

1、textarea元素

用于创建多行文本输入框，其基本语法格式如下：

2.select控件（定义下拉菜单）

基本语法格式：

3、datalist元素

用于定义输入框的选项列表，列表通过datalist内的option元素进行创建。在使用标记时，需要通过id属性为其指定一个唯一的标识，然后为input元素指定list属性，将该属性值设置为option元素对应的id属性值。

4、keygen元素

用于表单的密钥生成器，能够使用户验证更为安全、可靠。当提交表单时会生成两个键：一个是私钥，它存储在客户端；一个是公钥，它被发送到服务器，验证用户的客户端证书。

5、output元素（用于不同类型的输出）

五、CSS控制表单样式

使用CSS可以轻松地控制表单控件的样式，主要体现在控制表单控件的字体、边框、背景和内边距等。

注：•由于form是块元素，重置浏览器的默认样式时，需要清除其内边距padding和外边距margin。

•input控件默认有边框效果，当使用标记定义各种按钮时，通常需要清除其边框。

•通常情况下需要对文本框和密码框设置2到3像素的内边距，以使用户输入的内容不会紧贴输入框。