新HTML5基础开发教程 教学课件 范立锋 于合龙 孙丰伟 第03章__HTML5的表单.ppt

3.1 input输入类型 HTML4中input元素仅用于输入最基础的文本信息，HTML5为input元素新增了如下几种输入类型 （1）email类型 在HTML5将一个input元素的类型设置为email时，表明该输入框用于输入电子邮件地址。当页面加载时，该input元素对应文本框与其他类型文本框显示效果相同，但是仅限于输入电子邮件格式的字符串。表单提交时，将会自动检测输入内容是否为email。 （2）日期时间类型 HTML5中将一个input元素的类型设置为日期时间类型，即可在页面中生成一个日期时间类型的输入框。当用户点击对应日期输入框式，会弹出日期选择界面，选择日期后该界面自动关闭，并将用户选择具体日期填充在输入框中。用户可设置的日期时间类型包括date、week、month、time、datetime、datetime-local，各种类型对应的输入框界面及功能有所区别。 （3）range类型 HTML5中当一个input元素的类型设置为range时，将在页面中生成一个区域选择控件，用于设置选择区域信息。 （4）search类型 HTML5中当一个input元素的类型设置为search时，表明该输入框用于输入查询关键字。search类型的input元素在页面中显示效果与普通input元素相似，且也用于接收输入字符串信息，但是显示效果与普通input元素有所区别。 （5）number类型 number类型的input元素在HTML5中，用于提供一个数字类型的文本输入控件。该元素在页面中生成的输入框只允许用户输入数字类型信息，并可通过该输入框后面的上、下调节按钮来微调输入数字大小。 （6）url类型 HTML5中input元素的类型设置为url时，表示该input元素将生成一个只允许输入网址格式字符串的输入框。当页面加载时，该input元素对应文本框与其他类型文本框显示效果相同，但是仅限于输入网址格式的字符串。当表单提交时，将会自动检测输入内容，如果用户输入非网址格式字符串，将给出错误提示。 3.2 input元素的公共属性 HTML5的input元素增加了一些新的公共属性，包括： （1）autofocus属性 autofocus属性主要用于设置在页面加载完毕时，页面中的控件是否自动获取焦点。所有的input元素都支持autofocus属性，该属性可设置值为true（自动获取焦点）和false（不自动获取焦点）。 （2）pattern属性 pattern属性主要用于设置正则表达式，以便对input元素对应输入框执行自定义输入校验。前面小节介绍的email，url类型的input元素，其实也是基于正则表达式进行校验的，只不过已经由系统设置，不需用户单独设置。正则表达式的功能非常强大，用户可以通过编写个性化正则表达式，实现复杂的校验逻辑。 （3）placeholder属性 　 placeholder属性用于设置一个文本占位符，当input元素设置了placeholder属性值，页面加载完毕后，input元素对应输入框内将显示placeholder属性设置的信息内容。当输入框获取焦点并有信息输入，输入框失去焦点后输入信息将代替原placeholder设置内容；当输入框获取焦点且没有信息输入，输入框失去焦点后将仍然显示原placeholder设置内容。 （4）required属性 　 required属性主要用于设置输入框是否必须输入信息，该属性可设置值分别为true和false。当input元素的required属性设置为true时，提交表单时对应的输入框不允许为空；当required属性设置为false时，提交表单时对应的输入框允许为空。 3.3 输入表单的验证方式 HTML5的input元素验证方式包括： 1. 自动验证方式 自动验证主要是通过表单元素的属性设置来实现的。与验证有关的元素属性包括： （1）required，验证输入框是否为空 （2）pattern，验证输入信息是否符合设定正则表达式规则 （3）min/max，限制输入框所能输入的数值范围 （4）step，应用于数值型或日期型input元素，用于设置每次输入框内数值增加或减少的变化量 2. 调用checkValidity()方法实现验证 在Javascript中调用checkValidity()方法获取输入框信息是否通过校验。 checkValidity()方法用于检验输入信息与规则是否匹配，如果匹配返回true，否则返回false。 3. 自定义验证提示信息 当表单校验未通过时，HTML5提供了一些默认的提示信息。与此同时，HTML5还允许用户使用setCust