数据库设计与应用第3章　Web 表单

Web表单第3章汇报人：***目录CONTENT表单概述表单标记表单控件表单属性HTML5对表单的改进本章导读表单的用处很多，在网站中无处不见。表单可以用来收集用户在客户端提交的各种信息，例如，用户在网站上提交的登录和注册信息，就是通过表单作为载体传递给服务器的，可以说表单是用户和浏览器交互的重要媒介。本章主要介绍表单概念、<form>标记的属性、表单的结构、表单控件、HTML5对表单的改进等。第一节PART.01表单概述表单通常是设计在一个

HTML文档中，当用户填写完信息后做提交操作，将表单的内容从客户端的浏览器传送到服务器上，经过服务器的处理程序处理后，再将用户所需信息传回客户端的浏览器上，这样网页就具有了交互性，HTML表单是用户与网站实现交互的重要手段。表单的主要功能是收集信息，具体说是收集浏览者的信息，例如，天猫商城的用户登录界面，就是通过表单填写用户的相关信息的，如图3-1所示。在网页中，最常见的表单形式主要包括文本框、单选按钮、复选按钮等。图3-1用户登录界面在

HTML文档中，一个完整的表单通常由表单控件（也称表单元素）、提示信息和表单域3个部分组成，其中表单控件包含具体的表单功能项，如文本输入框、密码输入框、复选框、提交按钮、重置按钮等；提示信息即一个表单中包含的一些说明性文字，用于提示用户进行填写和操作；表单域相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过它定义处理表单数据所用程序的

URL地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器，表单组成如图3-2所示。图3-2表单组成第二节PART.02表单标记表单是网页上的一个特定区域，这个区域通过

<form></form>标记声明。在

<form>标记中，还可以设置表单的基本属性，包括表单的名称、处理程序、传送方式等，其基本语法格式如下：<formaction="url地址"method="提交方式"name="表单名称">表单控件</form>第三节PART.03表单控件表单控件是表单的核心内容，不同的表单控件具有不同的功能，如密码输入框、文本域、下拉列表、复选框、提交按钮等。只有掌握这些控件的使用方法才能正确地创建表单。3.3.1input控件input控件是表单元素中用得最多的一种元素，通常网页中单行文本输入框、单选按钮、复选框、提交按钮、重置按钮等都是通过

input控件定义的，其基本语法格式如下：<inputtype="控件类型"name="控件名称"><input>标记为单标记，type属性为最基本属性，根据其

type属性的不同取值可输入不同的数据。除了

type属性外，<input>还可以定义很多属性，其属性值详见表3-1。3.3.1input控件表3-1input控件常用属性属性属性值描述typetext单行输入文本框，默认宽度为20个字符password密码输入框，输入的内容以掩码的形式出现radio单选按钮，用于从若干给定的选项中选取一项checkbox复选框，用于从若干给定的选项中选取一项或多项button普通按钮，多数情况下用于从

JavaScript启动脚本submit提交按钮，用于将表单数据发送到服务器reset重置按钮，用于清除表单中的数据image图像形式的提交按钮，用户可以选择不同的图像来定义这种形式的按钮hidden隐藏域，定义隐藏的输入字段file文件域，用于上传文件name控件的名称valueinput控件中默认的文本值3.3.1input控件表3-1input控件常用属性属性属性值描述size正整数input控件在页面中的显示宽度readonlyreadonly该控件的内容为只读，不能编辑修改disableddisabled第一次加载页面时禁用该控件（显示为灰色）checkedchecked定义默认被选中的项maxlength正整数控件允许输入的最多字符数表3-1中列出的为

input控件的常用属性，下面通过具体的案例演示其使用方法和效果。3.3.1input控件1.单行文本框单行文本框常用来输入简短的信息，如用户名、账号、证件号码等，常用的属性有

name、value、maxlength等，其语法格式如下：<inputtype="text"name=""size=""maxlength=""value="">3.3.1input控件2.创建密码输入框密码输入框是一种特殊的文本域，主要用于输入一些保密信息，当浏览者输入文本时，显示为黑点或其他符号，目的是增加输入文本的安全性，其语法格式如下：<inputtype="password"name=""size=""maxlength="">3.3.1input控件3.创建单选按钮单选按钮主要是让浏览者在一组选项中只能选择一个，其语法格式如下：<inputtype="radio"name=""value="">注意：单选按钮都是以组为单位使用的，在同一组中的单选项都必须用同一个名称，value属性定义单选按钮的值，在同一组中，它们的域值必须是不同的。3.3.1input控件4.创建复选框复选框主要是让浏览者在一组选项中可以同时选取多个选项，其语法格式如下：<inputtype="checkbox"name=""value="">注意：在同一组中的复选框必须用同一个名称。每一个复选框都是一个独立的元素，都必须有一个唯一的

value值。3.3.1input控件5.创建隐藏域隐藏域对用户是不可见的，通常用于后台程序，其语法格式如下：<inputtype="hidden"name=""value="">3.3.1input控件6.创建按钮在

HTML中，提交按钮

<inputtype="submit">，是表单中的核心控件，用户完成信息输入后，一般都需要单击表单提交按钮来完成表单数据的提交，可以通过设置

value属性，改变提交按钮上的默认文本。重置按钮

<inputtype="reset">，当用户输入有误时，可单击重置按钮取消已输入的所有表单信息，可以通过

value属性，改变重置按钮上的默认文本。普通按钮

<inputtype="button">，图像形式的提交按钮

<inputtype="images">，它们在功能上基本相同，只是图像形式的提交按钮用图像替代了默认的按钮，外观上更加美观，需要注意的是，必须为其定义

src属性指向图像的

url地址。3.3.2textarea控件文本区域（textarea）主要用来输入较长的文本信息，其语法格式如下：<textareaname=""cols="每行中的字符数"rows="显示的行数"></textarea>其中，name属性定义文本区域的名称，要保证数据的准确采集，必须定义一个独一无二的名称。cols属性定义文本区域每行的字符数，rows属性定义文本区域中显示的行数。3.3.3select控件浏览网页时，经常会看到包含多个选项的下拉菜单，如选择所在城市、出生年月、学历等。在

HTML中，使用

select控件制作下拉菜单，其基本语法格式如下：<selectname=""><optionvalue="选项1">选项1</option><optionvalue="选项2">选项2</option><optionvalue="选项3">选项3</option><optionvalue="选项4">选项4</option><optionvalue="选项5">选项5</option></select>3.3.3select控件需要注意的是，<option></option>标记嵌套在

<select></select>标记中，用于定义下拉列表中的具体选项，每对

<select></select>中至少包含一对

<option></option>。select控件的常用属性详见表3-2。表3-2select控件的常用属性标记属性描述selectsize指定下拉菜单的可见选项数（取正整数）multiple定义为

multiple时，下拉菜单将具有多项选择的功能，即按住

Ctrl键的同时选择多项第四节PART.04表单属性通过3.2节的学习我们知道，创建表单的基本语法格式如下：<formaction="url地址"method="提交方式"name="表单名称">表单控件</form>3.3节已对表单控件进行了详细的介绍，下面将对表单的

name、action、method等常用属性进行说明。1.namename属性用于指定表单的名称，以区分同一个页面中的多个表单。例如：<formname="form1"></form>2.action当表单收集到信息后，需要将信息传递给服务器进行处理，action属性用于指定接收并处理表单数据的服务程序的

url地址，例如：<formaction="reg.asp"name="form1"></form>提示：以上代码表示提交表单时，表单数据会传送到名为“reg.asp”的页面去处理。如果

action=""，则表示提交给当前页面。3.methodmethod属性用于设置表单数据的提交方式，其取值为

get或

post。其中，get为默认值，通过这种方式提交的数据将显示在浏览器地址栏中，保密性差，且有数据量的限制。而

post方式的保密性好，并且无数据量限制，使用

method="post"可以大量地提交数据。第五节PART.05HTML5对表单的改进HTML5中增加了表单方面的诸多功能，包括

input输入类型、表单元素、form属性和

input属性等，使用这些新元素，前端设计人员可以更加省力高效地制作出标准的

Web

表单。3.5.1新增

input输入类型在

HTML5中，增加了多个新的表单

input输入类型，通过使用这些新增的元素，设计人员可以实现更好的输入控制和验证。下面通过示例来逐一介绍这些新的

input输入类型。3.5.1新增

input输入类型1.email类型email类型的

input类型元素是一种专门用于输入

E-mail地址的文本输入框，在提交表单时会自动验证

email输入框的值。如果不是一个有效的

E-mail地址，则该输入框不允许提交该表单。其语法格式如下：<inputtype="email"name="">3.5.1新增

input输入类型2.url类型url类型的

input元素提供用于输入

url地址这类特殊文本的文本框。当提交表单时，如果所输入的内容是

url地址格式的文本，则会提交数据到服务器；如果不是

url地址格式的文本，则不允许提交。其用法格式如下：<inputtype="url"name="user_url">3.5.1新增

input输入类型3.number类型number类型的

input元素提供用于输入数值的文本框。我们还可以设定对所接受的数字的限制，包括规定允许最大值和最小值、合法的数字间隔或默认值等。如果所输入的数字不在限定范围之内，则会出现错误提示，其语法格式如下：<inputtype="number"name="user_number"max=""min=""step="">3.5.1新增

input输入类型3.number类型number类型的属性详见表3-3。属性值描述maxnumber最大值minnumber最小值stepnumber数字间隔valuenumber默认值表3-3number类型的属性3.5.1新增

input输入类型4.range类型range类型提供用于包含一定范围内数字值的文本框，在网页中显示为滑动条。我们还可以设定对所接受的数字的限制，包括最大值和最小值、合法的数据间隔和默认值。与

number类型相同，这两种类型的不同之处在于外观表现上，支持

range类型的浏览器会显示为滑块的形式，不支持的浏览器则会将其显示为普通的文本输入框，即以type="text"来处理。如果输入的数字不在限定的范围内，则会出现错误提示。其语法格式如下：<inputtype="range"name="range1"max=""min="">3.5.1新增

input输入类型5.日期检出器类型日期检出器类型（datepickers）是网页中经常用到的一种控件，在

HTML5之前的版本中，并没有提供任何形式的日期检出器控件。在网页前端设计中，多是采用一些

JavaScript框架来实现日期检出器控件的功能，如

jQueryUI，YUI等，在具体使用时会比较麻烦。HTML5提供了6个日期检出器控件，分别用于选择以下日期格式：日期、月、星期、时间、日期+时间和日期+时间+时区，详见表3-4。3.5.1新增

input输入类型5.日期检出器类型表3-3number类型的属性类型HTML代码功能说明date<inputtype="date">选取日、月、年month<inputtype="month">选取月、年week<inputtype="week">选取周和年time<inputtype="time">选取时间（小时和分钟）datetime<inputtype="datetime">选取时间、日、月、年（UTC时间）datetime-local<inputtype="datetime-local">选取时间、日、月、年（本地时间）3.5.1新增

input输入类型5.日期检出器类型UTC是

universaltimecoordinated的英文缩写，即“协调世界时”，是由国际无线电咨询委员会规定和推荐，并由国际时间局（BIH）负责保持的以秒为基础的时间标度，简单地说，UTC时间就是0时区时间，而本地时间即地方时间。例如，北京时间早上8点，是

UTC时间0点，即

UTC时间比北京时间晚8小时。6个时间检出器类型的代码格式彼此相似，下面就以

date为例，其语法格式如下：<inputtype="date"name="">3.5.1新增

input输入类型6.search类型search类型的

input元素提供用于输入搜索关键词的文本框。虽然从外观看，search

类型的

input元素与普通的

text类型只是稍有区别，但实现起来却并不那么容易。search类型搜索框可用于任一网页。目前大多数网站的搜索框都是采用

<inputtype="text">的方式来实现的，即采用纯文本的文本框，而

HTML5中定义了专用于搜索的

search类型，其语法格式如下：<inputtype="search"name="">3.5.1新增

input输入类型7.tel类型tel类型的

input元素提供专门用于输入电话号码的文本框，但它并不限定只输入数字，因为很多电话号码还包括其他字符（如“+”“-”等），其语法格式如下：<inputtype="tel"name="">3.5.1新增

input输入类型8.color类型color类型的

input元素提供专门用于设置颜色的文本框，通过单击文本框，可以快速地打开拾色器面板，方便用户可视化选择颜色。其语法格式如下：<inputtype="color"name="">3.5.2新增

input属性input元素不但增加了新的输入类型，而且还新增几个

input属性，用于指定输入类型的行为和限制，这些属性分别是

autocomplete、autofocus、form、formoverrides、placeholder、height和

width、min和

max、step、pattern以及

required。本节将详细介绍这些属性。3.5.2新增

input属性1.autocomplete属性多数浏览器都带有辅助用户完成输入的自动完成功能，只要是开启了该功能，用户下次输入相同的内容时，浏览器就会自动完成内容的输入。autocomplete属性可以帮助用户在

input类型的输入框中实现自动完成内容输入，这些类型包括：text、search、url、tel、email、password、datepickers、range以及

color。不过在某些浏览器中，可能需要首先启用浏览器本身的自动完成功能，才能使

autocomplete属性起作用。3.5.2新增

input属性1.autocomplete属性autocomplete同样适用于

<form>标签，默认情况下表单的autocomplete属性为打开状态，其中的输入类型继承所在表单的autocomplete属性，也可以单独将表单的某一输入类型的

autocomplete状态设置为打开状态，这样可以更好地实现自动完成。autocomplete属性有3种值：on、off和空值。3.5.2新增

input属性2.autofocus属性HTML5新增的

autofocus属性，它是一个布尔值，可以使得在页面加载时，某表单控件自动获得焦点。这些表单控件可以是文本框、复选框、单选按钮和普通按钮等所有

<input>标签类型，autofocus属性使用代码如下：<inputtype="tel"name="usertel"autofocus="autofocus">3.5.2新增

input属性2.autofocus属性autofocus属性的出现使得页面中的表单控件自动获取焦点变得非常容易，但要注意，在一个页面中只能指定一个

autofocus属性值，所以必须谨慎使用。当页面中的表单控件比较多时，建议选择最需要聚焦的那个控件来使用这一属性，例如，一个搜索页面中的搜索文本框或一个同意某许可协议的“同意”按钮。3.5.2新增

input属性3.form属性在

HTML5之前，如果用户要提交一个表单，必须把相关的控件元素都放在表单内部，即

<form>和

</form>标签对之间，在提交表单时，会将页面中不是表单子元素的控件直接忽略掉。然而有些时候，可能需要一并提交表单之外的一些元素，而表单固有的缺陷使得这一要求不容易实现。3.5.2新增

input属性3.form属性HTML5新增的

form属性，使得这一问题得到了很好的解决。有了form属性，便可以把表单内的子元素写在页面中的任一位置，然后为这个元素指定

form属性并设置属性值为该表单的

id。如此一来，便规定了该表单元素属于指定的这一表单。此外，form属性也允许规定一个表单元素从属于多个表单。form属性适用于所有的

input类型。在使用时，必须引用所属表单的

id。3.5.2新增

input属性4.表单重写属性（formoverride）HTML5中新增了几个表单重写（formoverride）属性，用于重写form元素的某些属性设定，包括以下几种：（1）formaction

：用于重写表单的

action属性。（2）formenctype

：用于重写表单的

enctype属性。（3）formmethod

：用于重写表单的

method属性。（4）formnovalidate

：用于重写表单的

novalidate属性。（5）formtarget

：用于重写表单

target属性。3.5.2新增

input属性4.表单重写属性（formoverride）提示：表单重写属性并不适用于所有的

input类型，而只适用于

submit和

image输入类型。3.5.2新增

input属性5.width和

height属性width和

height属性规定用于

image类型的

<input>标签的图像高度和宽度，因此这个属性只能用于

image类型的

<input>标签。3.5.2新增

input属性6.list属性HTML5新增了一个

datalist元素，可以实现数据列表的下拉效果，其外观类似

autocomplete，用户可以从列表中选择，也可自行输入。而list属性用于指定输入框所绑定的

datalist元素，其值是某个datalist的

id。list属性适用于以下

input输入类型：text、search、url、tel、email、datepickers、number、range和

color。下面以

url类型为例介绍

list属性的应用。（详见课本p66【例3.28】）3.5.2新增

input属性7.min、max和

step属性在

HTML5中新增的

min、max和step属性用于包含数字或日期的input输入类型规定限值，也就是给这些类型的输入框加一个数值的约束，适用于

datepickers、number和

range类型。（1）max属性

：规定输入框允许的最大值。（2）min属性

：规定输入框允许的最小值。（3）step