HTML5+CSS3网站设计表单地应用

第7章表单地应用《HTML5+CSS3网站设计基础教程》（第2版）学习目地/Target了解表单功能,能够快速创建表单。掌握表单有关元素,能够准确定义不同地表单控件。掌握表单样式地控制,能够美化表单界面。章节概述/Summary表单是HTML网页地重要元素,它通过收集来自用户地信息,并将信息发送给服务器端程序处理,来实现网上注册,网上登录,网上交易等多种功能。本章将对表单控件与属性以及如何使用CSS控制表单样式进行详细讲解。目录/Contents01认识表单02表单属性03Input元素及属性目录/Contents04其它表单元素05CSS控制表单样式06阶段案例——制作信息登记表认识表单017.1认识表单对于"表单"读者可能比较陌生,其实它们在互联网上随处可见,例如注册页面地用户名与密码输入,性别选择,提交按钮等都是用表单有关地标记定义地。简单地说,"表单"是网页上用于输入信息地区域,用来实现网页与用户地交互,沟通。本节将带领读者认识并创建表单。7.1认识表单了解表单地构成,能够说出一个表单内包含了哪些元素。掌握创建表单地方法,能够使用<form>标记创建表单。学习目地提示信息表单域表单控件7.1认识表单1.表单地构成7.1认识表单1.表单地构成一个表单通常需要包含一些说明性地文字,提示用户进行填写与操作。相当于一个容器,用来容纳所有地表单控件与提示信息。包含了具体地表单功能项,如单行文本输入框,密码输入框,复选框,提交按钮,重置按钮等。提示信息表单控件表单域7.1认识表单2.创建表单在HTML5,<form></form>标记被用于定义表单域,即创建一个表单,以实现用户信息地收集与传递,<form></form>地所有内容都会被提交给服务器。<formaction="url地址"method="提交方式"name="表单名称">各种表单控件</form>结论<form>与</form>之间地表单控件是由用户自定义地,action,method为表单标记<form>地常用属性。表单属性027.2表单属性在HTML5,表单拥有多个属性,通过设置表单属性可以实现提交方式,自动完成,表单验证等不同地表单功能。下面将对form标记地有关属性进行讲解。7.2表单属性掌握设置表单属性地方法,能够设置表单地提交方式,自动完成,表单验证等多个表单功能。学习目地7.2表单属性在HTML5,表单拥有多个属性,通过设置表单属性可以实现提交方式,自动完成,表单验证等不同地表单功能。action属性用于指定接收并处理表单数据地服务器程序地url地址action属性method属性用于设置表单数据地提交方式,其取值为get或postmethod属性name属性用于指定表单地名称,以区分同一个页面地多个表单name属性autoplete属性用于指定表单是否有自动完成功能autoplete属性novalidate属性指定在提交表单时取消对表单进行有效地检查novalidate属性7.2表单属性注意:<form>标记地属性并不会直接影响表单地显示效果。要想让一个表单有意义,就需要在<form>与</form>之间添加相应地表单控件。Input元素及属性037.3Input元素及属性<input/>元素是表单最常见地元素,网页常见地单行文本框,单选按钮,复选框等都是通过它定义地。在HTML5,<input/>标记拥有多种输入类型及有关属性。本节将对input元素地有关属性进行讲解。7.3Input元素及属性属性属性值描述typetext单行文本输入框password密码输入框radio单选按钮checkbox复选框button普通按钮submit提交按钮reset重置按钮image图像形式地提交按钮hidden隐藏域file文件域emaile-mail地址地输入域urlURL地址地输入域number数值地输入域range一定范围内数字值地输入域Datepickers(date,month,week,time,datetime,datetime-local)日期与时间地输入类型search搜索域color颜色输入类型

tel电话号码输入类型7.3Input元素及属性name由用户自定义控件地名称value由用户自定义input控件地默认文本值size正整数input控件在页面地显示宽度readonlyreadonly该控件内容为只读（不能编辑修改）disableddisabled第一次加载页面时禁用该控件（显示为灰色）checkedchecked定义选择控件默认被选地项maxlength正整数控件允许输入地最多字符数autopleteon/off设定是否自动完成表单字段内容autofocusautofocus指定页面加载后是否自动获取焦点form

form元素地id设定字段隶属于哪一个或多个表单listdatalist元素地id指定字段地候选数据值列表multiplemultiple指定输入框是否可以选择多个值min,max与step数值规定输入框所允许地最大值,最小值及间隔pattern字符串验证输入地内容是否与定义地正则表达式匹配placeholder字符串为input类型地输入框提供一种提示requiredrequired规定输入框填写地内容不能为空属性属性值描述7.3Input元素及属性掌握<input>元素地多个type属性值地不同作用,能够定义不同地控件类型。学习目地1.Input元素地type属性7.3Input元素及属性1.Input元素地type属性在HTML5,<input>元素拥有多个type属性值,用于定义不同地控件类型。单行文本输入框<inputtype="text"/>单行文本输入框常用来输入简短地信息,如用户名,账号,证件号码等,常用地属性有name,value,maxlength。<inputtype="text"value="张三"maxlength="6"/>7.3Input元素及属性1.Input元素地type属性在HTML5,<input>元素拥有多个type属性值,用于定义不同地控件类型。密码输入框<inputtype="password"/>密码输入框用来输入密码,其内容将以圆点地形式显示。<inputtype="password"size="40"/>7.3Input元素及属性1.Input元素地type属性在HTML5,<input>元素拥有多个type属性值,用于定义不同地控件类型。单选按钮<inputtype="radio"/>单选按钮用于单项选择,如选择性别,是否操作等。<inputtype="radio"name="sex"checked="checked"/>男7.3Input元素及属性1.Input元素地type属性在HTML5,<input>元素拥有多个type属性值,用于定义不同地控件类型。复选框<inputtype="checkbox"/>复选框常用于多项选择,如选择兴趣,爱好等,可对其应用checked属性,指定默认选项。<inputtype="checkbox"/>唱歌7.3Input元素及属性1.Input元素地type属性在HTML5,<input>元素拥有多个type属性值,用于定义不同地控件类型。普通按钮<inputtype="button"/>普通按钮常常配合javascript脚本语言使用,读者了解即可。<inputtype="button"value="普通按钮"/>7.3Input元素及属性1.Input元素地type属性在HTML5,<input>元素拥有多个type属性值,用于定义不同地控件类型。提交按钮<inputtype="submit"/>提交按钮是表单地核心控件,用户完成信息地输入后,一般都需要单击提交按钮才能完成表单数据地提交。<inputtype="submit"/>7.3Input元素及属性1.Input元素地type属性在HTML5,<input>元素拥有多个type属性值,用于定义不同地控件类型。重置按钮<inputtype="reset"/>当用户输入地信息有误时,可单击重置按钮取消已输入地所有表单信息。可以对其应用value属性,改变重置按钮上地默认文本。<inputtype="reset"/>7.3Input元素及属性1.Input元素地type属性在HTML5,<input>元素拥有多个type属性值,用于定义不同地控件类型。图像形式地提交按钮<inputtype="image"/>图像形式地提交按钮与普通地提交按钮在功能上基本相同,只是它用图像替代了默认地按钮,外观上更加美观。<inputtype="image"src="images/login.gif"/>7.3Input元素及属性1.Input元素地type属性在HTML5,<input>元素拥有多个type属性值,用于定义不同地控件类型。隐藏域<inputtype="hidden"/>隐藏域对于用户是不可见地,通常用于后台地程序,读者了解即可。<inputtype="hidden"/>7.3Input元素及属性1.Input元素地type属性在HTML5,<input>元素拥有多个type属性值,用于定义不同地控件类型。文件域<inputtype="file"/>当定义文件域时,页面将出现一个文本框与一个"浏览..."按钮,用户可以通过填写文件路径或直接选择文件地方式,将文件提交给后台服务器。<inputtype="file"/>7.3Input元素及属性1.Input元素地type属性在HTML5,<input>元素拥有多个type属性值,用于定义不同地控件类型。email类型<inputtype="email"/>email类型地input元素是一种专门用于输入E-mail地址地文本输入框,用来验证email输入框地内容是否符合Email邮件地址格式;如果不符合,将提示相应地错误信息。请输入您地邮箱:<inputtype="email"name="formmail"/>7.3Input元素及属性1.Input元素地type属性在HTML5,<input>元素拥有多个type属性值,用于定义不同地控件类型。url类型<inputtype="url"/>url类型地input元素是一种用于输入URL地址地文本框。请输入个网址:<inputtype="url"name="user_url"/>7.3Input元素及属性1.Input元素地type属性在HTML5,<input>元素拥有多个type属性值,用于定义不同地控件类型。tel类型<inputtype="tel"/>tel类型用于提供输入电话号码地文本框,由于电话号码地格式千差万别,很难实现一个通用地格式。因此,tel类型通常会与pattern属性配合使用。请输入电话号码:<inputtype="tel"name="telphone"pattern="^\d{11}$"/>7.3Input元素及属性1.Input元素地type属性在HTML5,<input>元素拥有多个type属性值,用于定义不同地控件类型。search类型<inputtype="search"/>search类型是一种专门用于输入搜索关键词地文本框,它能自动记录一些字符。在用户输入内容后,其右侧会附带一个删除图标,单击这个图标按钮可以快速清除内容。输入搜索关键词:<inputtype="search"name="searchinfo"/>7.3Input元素及属性1.Input元素地type属性在HTML5,<input>元素拥有多个type属性值,用于定义不同地控件类型。color类型<inputtype="color"/>color类型用于提供设置颜色地文本框,用于实现一个RGB颜色输入。其基本形式是#RRGGBB,默认值为#000000,通过value属性值可以更改默认颜色。请选取一种颜色:<inputtype="color"name="color1"/>7.3Input元素及属性1.Input元素地type属性在HTML5,<input>元素拥有多个type属性值,用于定义不同地控件类型。number类型<inputtype="number"/>number类型地input元素用于提供输入数值地文本框。在提交表单时,会自动检查该输入框地内容是否为数字。如果输入地内容不是数字或者数字不在限定范围内,则会出现错误提示。请输入数值:<inputtype="number"name="number1"value="1"min="1"max="20"step="4"/>7.3Input元素及属性1.Input元素地type属性在HTML5,<input>元素拥有多个type属性值,用于定义不同地控件类型。range类型<inputtype="range"/>range类型地input元素用于提供一定范围内数值地输入范围,在网页显示为滑动条。它地常用属性与number类型一样。请输入数值:<inputtype="range"name="number1"value="1"min="1"max="20"step="4"/>7.3Input元素及属性1.Input元素地type属性在HTML5,<input>元素拥有多个type属性值,用于定义不同地控件类型。Datepickers类型<inputtype=date,month,week…"/>Datepickers类型是指时间日期类型,HTML5提供了多个可供选取日期与时间地输入类型,用于验证输入地日期<inputtype="date"/>7.3Input元素及属性1.Input元素地type属性在HTML5,<input>元素拥有多个type属性值,用于定义不同地控件类型。Datepickers类型—时间与日期类型时间与日期类型说明date选取日,月,年month选取月,年week选取周与年time选取时间（小时与分钟）datetime选取时间,日,月,年（UTC时间）datetime-local选取时间,日,月,年（本地时间）7.3Input元素及属性了解Input元素地其它属性,能够列举<input/>标记还有哪些属性及属性地功能。学习目地2.Input元素地其它属性7.3Input元素及属性2.Input元素地其它属性除了type属性之外,<input/>标记还可以定义很多其它地属性,以实现不同地功能。autofocus属性用于指定页面加载后是否自动获取焦点,将标记地属性值指定为true时,表示页面加载完毕后会自动获取该焦点。autofocus属性17.3Input元素及属性2.Input元素地其它属性除了type属性之外,<input/>标记还可以定义很多其它地属性,以实现不同地功能。HTML5地form属性,可以把表单内地子元素写在页面地任一位置,只需为这个元素指定form属性并设置属性值为该表单地id即可。form属性27.3Input元素及属性2.Input元素地其它属性除了type属性之外,<input/>标记还可以定义很多其它地属性,以实现不同地功能。list属性用于指定输入框所绑定地datalist元素,其值是某个datalist元素地id。list属性37.3Input元素及属性2.Input元素地其它属性除了type属性之外,<input/>标记还可以定义很多其它地属性,以实现不同地功能。multiple属性指定输入框可以选择多个值,该属性适用于email与file类型地input元素。multiple属性47.3Input元素及属性2.Input元素地其它属性除了type属性之外,<input/>标记还可以定义很多其它地属性,以实现不同地功能。HTML5地min,max与step属性用于为包含数字或日期地input输入类型规定限值,也就是给这些类型地输入框加一个数值地约束,适用于date,pickers,number与range标签。min,max与step属性5min规定输入框所允许地最小输入值。max规定输入框所允许地最大输入值。step为输入框规定合法地数字间隔,如果不设置,默认值是1。7.3Input元素及属性2.Input元素地其它属性除了type属性之外,<input/>标记还可以定义很多其它地属性,以实现不同地功能。pattern属性用于验证input类型输入框,用户输入地内容是否与所定义地正则表达式相匹配。pattern属性适用于地类型是:text,search,url,tel,email与password地<input/>标记。pattern属性67.3Input元素及属性2.Input元素地其它属性除了type属性之外,<input/>标记还可以定义很多其它地属性,以实现不同地功能。正则表达式说明^[0-9]*$数字^\d{n}$n位地数字^\d{n,}$至少n位地数字^\d{m,n}$m-n位地数字^(0|[1-9][0-9]*)$零与非零开头地数字^([1-9][0-9]*)+(.[0-9]{1,2})?$非零开头地最多带两位小数地数字^(\-|\+)?\d+(\.\d+)?$正数,负数,与小数^\d+$或^[1-9]\d*|0$非负整数^-[1-9]\d*|0$或^((-\d+)|(0+))$非正整数^[\u4e00-\u9fa5]{0,}$汉字^[A-Za-z0-9]+$或^[A-Za-z0-9]{4,40}$英文与数字7.3Input元素及属性2.Input元素地其它属性除了type属性之外,<input/>标记还可以定义很多其它地属性,以实现不同地功能。^[A-Za-z]+$由26个英文字母组成地字符串^[A-Za-z0-9]+$由数字与26个英文字母组成地字符串^\w+$或^\w{3,20}$由数字,26个英文字母或者下划线组成地字符串^[\u4E00-\u9FA5A-Za-z0-9_]+$文,英文,数字包括下划线^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$Email地址[a-zA-z]+://[^\s]*或^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$URL地址^\d{15}|\d{18}$身份证号(15位,18位数字)^([0-9]){7,18}(x|X)?$或^\d{8,18}|[0-9x]{8,18}|[0-9X]{8,18}?$以数字,字母x结尾地短身份证号码^[a-zA-Z][a-zA-Z0-9_]{4,15}$帐号是否合法(字母开头,允许5-16字节,允许字母数字下划线)^[a-zA-Z]\w{5,17}$密码(以字母开头,长度在6~18之间,只能包含字母,数字与下划线)正则表达式说明7.3Input元素及属性2.Input元素地其它属性除了type属性之外,<input/>标记还可以定义很多其它地属性,以实现不同地功能。placeholder属性用于为input类型地输入框提供有关提示信息,以描述输入框期待用户输入何种内容。placeholder属性77.3Input元素及属性2.Input元素地其它属性除了type属性之外,<input/>标记还可以定义很多其它地属性,以实现不同地功能。required属性用于规定输入框填写地内容不能为空,否则不允许用户提交表单。required属性8其它表单元素047.4其它表单元素在7.3节,介绍了一系列地input控件。除了input元素外,HTML5表单元素还包括textarea,select,datalist,keygen,output等,本节将对它们进行详细讲解。7.4其它表单元素掌握textarea元素地使用方法,能够在网页创建多行文本输入框。学习目地1.textarea元素7.4其它表单元素1.textarea元素textarea控件可以创建多行文本输入框。<textareacols="每行地字符数"rows="显示地行数"> 文本内容</textarea>属性属性值描述name由用户自定义控件地名称readonlyreadonly该控件内容为只读（不能编辑修改）disableddisabled第一次加载页面时禁用该控件（显示为灰色）7.4其它表单元素掌握select元素地使用方法,能够制作选项地下拉菜单。学习目地2.select元素7.4其它表单元素2.select元素7.4其它表单元素2.select元素<select><option>选项1</option><option>选项2</option><option>选项3</option>...</select>标记名常用属性描述<select>size指定下拉菜单地可见选项数（取值为正整数）。multiple定义multiple="multiple"时,下拉菜单将具有多项选择地功能,方法为按住Ctrl键地同时选择多项。<option>selected定义selected="selected"时,当前项即为默认选项。7.4其它表单元素2.select元素在实际网页制作过程,有时候需要对下拉菜单地选项进行分组,这样当存在很多选项时,要想找到相应地选项就会更加容易。例如:7.4其它表单元素使用Dreamweaver工具生成表单控件。选择菜单栏地窗口→插入选项。多学一招:单击插入栏上方地"表单"选项单击表单工具组不同地选项,即可生成不同地表单控件7.4其它表单元素掌握datalist元素地使用方法,能够定义输入框地选项列表。学习目地3.datalist元素7.4其它表单元素3.datalist元素datalist元素用于定义输入框地选项列表,列表通过datalist内地option元素进行创建。如果用户不希望从列表选择某项,也可以自行输入其它内容。在使用<datalist>标记时,需要通过id属性为其指定一个唯一地标识,然后为input元素指定list属性,将该属性值设置为option元素对应地id属性值即可。例如:7.4其它表单元素掌握keygen元素地使用方法,通过keygen元素能够生成表单密钥。学习目地4.keygen元素7.4其它表单元素keygen元素用于表单地密钥生成器,能够使用户验证更为安全,可靠。当提交表单时会生成两个键。4.keygen元素私钥存储在客户端公钥被发送到服务器,验证用户地客户端证书7.4其它表单元素keygen元素用于表单地密钥生成器,能够使用户验证更为安全,可靠。当提交表单时会生成两个键:4.keygen元素keygen元素地常用属性属性说明autofocus使keygen字段在页面加载时获得焦点。challenge如果使用,则将keygen地值设置为在提交时询问。disabled禁用keytag字段。form定义该keygen字段所属地一个或多个表单。keytype定义keytype。rsa生成RSA密钥。name定义keygen元素地唯一名称。name属性用于在提交表单时搜集字段地值。7.