搜索
第6章用HTML5创建表单HTML表单•表单用于获取不同类型的用户输入HTML表单类型•常用表单类型–文本域inputtype=“text”或inputtype=“password”–文本区域textarea/textarea–按钮inputtype=“button”或inputtype=“submit”或inputtype=“reset”–复选框inputtype=checkbox–单选按钮inputtype=radio–选择列表select/select–文件域inputtype=file–图像域inputtype=image–隐藏域inputtype=hiddenHTML表单•常用的表单标签form表单input输入域textarea文本域label控制标签fieldset定义域legend域的标题select选择列表option下拉列表中的选项button按钮input标签•input标签用于搜集用户信息。•根据不同的type属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。•在HTML中，input标签没有结束标签。input标签的常用属性属性值描述autocomplete•on•off规定是否使用输入字段的自动完成功能autofocusautofocus规定输入字段在页面加载时是否获得焦点。（不适用于type=hidden）checkedchecked规定此input元素首次加载时应当被选中。maxlengthnumber规定输入字段中的字符的最大长度。namefield_name定义input元素的名称。requiredrequired指示输入字段的值是必需的。sizenumber_of_char定义输入字段的宽度。type•button•checkbox•file•hidden•image•password•radio•reset•submit•text规定input元素的类型。valuevalue规定input元素的值。input标签的传统类型•（1）text类型•定义用户可输入文本的单行输入字段。•默认宽度为20个字符。•例：•用户名：inputtype=text•input标签的传统类型•（2）password类型•定义密码字段。•该字段中的字符被掩码。•例：•密码：inputtype=“password•input标签的传统类型•（3）botton类型•定义可点击的按钮，但没有任何行为。•button类型常用于在用户点击按钮时启动JavaScript程序。•例：–html–head–scripttype=text/javascript–functionmsg()–{–alert(Helloworld!);–}–/script–/head–body–form–inputtype=buttonvalue=Clickmeonclick=msg()/–/form–/body–/htmlinput标签的传统类型•（4）submit类型•定义提交按钮。•提交按钮用于向服务器发送表单数据。数据会发送到表单的action属性中指定的页面。•例：•inputtype=“submit”value=“提交input标签的传统类型•（5）reset类型•定义重置按钮。•重置按钮会清除表单中的所有数据。•例：•inputtype=“reset”value=“重置input标签的传统类型•（6）radio类型•定义单选按钮。•单选按钮允许用户选取给定数目的选择中的一个选项。•例：•性别：•inputtype=“radio”name=“sex”value=“male”/男•inputtype=“radio”name=“sex”value=“female”/女input标签的传统类型•（7）checkbox类型•定义复选框。•复选框允许用户在一定数目的选择中选取一个或多个选项。•例：•兴趣方向：•inputtype=checkboxname=“ITvalue=“ITcheckedIT•inputtype=checkboxname=建筑value=建筑/建筑•inputtype=•checkboxname=体育value=体育/体育input标签的传统类型•（8）file类型•用于文件上传。•例：•你的照片：•inputtype=filename=picaccept=image/gifinput标签的传统类型•（9）image类型•定义图像形式的提交按钮。•例：•inputtype=imagesrc=“eg_submit.gifalt=Submit/input标签的传统类型•（10）hidden类型•定义隐藏字段。•隐藏字段对于用户是不可见的。•隐藏字段通常会存储一个默认值，它们的值也可以由JavaScript进行修改。•例：•inputtype=“hidden”name=“country”value=“中国/input新增输入类型•（1）email类型–在HTML5将一个input元素的类型设置为email时，表明该输入框用于输入电子邮件地址。当页面加载时，该input元素对应文本框与其他类型文本框显示效果相同，但是仅限于输入电子邮件格式的字符串。表单提交时，将会自动检测输入内容是否为email。input新增输入类型•（2）日期时间类型DatePickers（日期选择器）–HTML5中将一个input元素的类型设置为日期时间类型，即可在页面中生成一个日期时间类型的输入框。当用户点击对应日期输入框时，会弹出日期选择界面，选择日期后该界面自动关闭，并将用户选择具体日期填充在输入框中。input新增输入类型•HTML5拥有多个可供选取日期和时间的新输入类型：–date-选取日、月、年–month-选取月、年–week-选取周和年–time-选取时间（小时和分钟）–datetime-选取时间、日、月、年（UTC时间）–datetime-local-选取时间、日、月、年（本地时间）input新增输入类型•（3）number类型–number类型的input元素在HTML5中，用于提供一个数字类型的文本输入控件。该元素在页面中生成的输入框只允许用户输入数字类型信息，并可通过该输入框后面的上、下调节按钮来微调输入数字大小。input新增输入类型•（3）number类型主要属性属性值描述maxnumber规定允许的最大值minnumber规定允许的最小值stepnumber规定合法的数字间隔（如果step=3，则合法的数是-3,0,3,6等）valuenumber规定默认值input新增输入类型•（4）range类型–HTML5中当一个input元素的类型设置为range时，将在页面中生成一个数字区域选择控件，用于设置选择区域信息。–Range类型显示为滑动条。–Range类型的默认数字区域为0－100–默认步进值为1–默认初始值为最大值与最小值的和的一半input新增输入类型•（4）range类型的主要属性属性值描述maxnumber规定允许的最大值minnumber规定允许的最小值stepnumber规定合法的数字间隔（如果step=3，则合法的数是-3,0,3,6等）valuenumber规定默认值input新增输入类型•（4）range类型的数据显示–Range类型不能直接显示控件滑动结果，必须借助JavaScript脚本来实现–如：•head•script•functiongetValue()•{•varvalue=document.getElementById(rangeInput).value;•varresult=document.getElementById(result);•result.innerText=value;•}•/script•/head•body•form•请选择您的年龄:•inputid=rangeInputtype=rangeonChange=getValue()min=20max=100value=30•spanid=result/span•/forminput新增输入类型•（5）search类型–HTML5中当一个input元素的类型设置为search时，表明该输入框用于输入查询关键字。search类型的input元素在页面中显示效果与普通input元素相似，且也用于接收输入字符串信息，但是当输入文字后显示效果与普通input元素有所区别。input新增输入类型•（6）url类型–HTML5中input元素的类型设置为url时，表示该input元素将生成一个只允许输入网址格式字符串的输入框。当页面加载时，该input元素对应文本框与其他类型文本框显示效果相同，但是仅限于输入网址格式的字符串。当表单提交时，将会自动检测输入内容，如果用户输入非网址格式字符串，将给出错误提示。–不检测域名的正确性。input新增输入类型－－浏览器支持•只有Opera和Chrome几乎支持所有input新输入类型input元素的公共属性•（1）autofocus属性–autofocus属性主要用于设置在页面加载完毕时，页面中的控件是否自动获取焦点。所有的input元素都支持autofocus属性，该属性可设置值为true（自动获取焦点）和false（不自动获取焦点）。input元素的公共属性•（2）pattern属性–pattern属性主要用于设置正则表达式，以便对input元素对应输入框执行自定义输入校验。前面小节介绍的email，url类型的input元素，其实也是基于正则表达式进行校验的，只不过已经由系统设置，不需用户单独设置。正则表达式的功能非常强大，用户可以通过编写个性化正则表达式，实现复杂的校验逻辑。input元素的公共属性•（3）placeholder属性–placeholder属性用于设置一个文本占位符给出相应提示，当input元素设置了placeholder属性值，页面加载完毕后，input元素对应输入框内将显示placeholder属性设置的信息内容。当输入框获取焦点并有信息输入，输入框失去焦点后输入信息将代替原placeholder设置内容；当输入框获取焦点且没有信息输入，输入框失去焦点后将仍然显示原placeholder设置内容。–placeholder属性适用于以下类型的input标签：text,search,url,telephone,email以及password。input元素的公共属性•（4）required属性–required属性主要用于设置输入框是否必须输入信息，该属性可设置值分别为true和false。当input元素的required属性设置为true时，提交表单时对应的输入框不允许为空；当required属性设置为false时，提交表单时对应的输入框允许为空。输入表单的验证方式•1.自动验证方式–自动验证主要是通过表单元素的属性设置来实现的。与验证有关的元素属性包括：•（1）required，验证输入框是否为空•（2）pattern，验证输入信息是否符合设定正则表达式规则•（3）min/max，限制输入框所能输入的数值范围•（4）step，应用于数值型或日期型input元素，用于设置每次输入框内数值增加或减少的变化量输入表单的验证方式•2.调用checkValidity()方法实现验证–在Javascript中调用checkValidity()方法获取输入框信息是否通过校验。–checkValidity()方法用于检验输入信息与规则是否匹配，如果匹配返回true，否则返回false。–规则仍然由pattern决定。输入表单的验证方式•3.自定义验证提示信息–当表单校验未通过时，HTM