1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > HTML5第6章上机 第6章__HTML5的表单.ppt

HTML5第6章上机 第6章__HTML5的表单.ppt

时间:2023-07-12 03:58:46

相关推荐

HTML5第6章上机 第6章__HTML5的表单.ppt

input元素的公共属性 (2)pattern属性 pattern属性主要用于设置正则表达式,以便对input元素对应输入框执行自定义输入校验。前面小节介绍的email,url类型的input元素,其实也是基于正则表达式进行校验的,只不过已经由系统设置,不需用户单独设置。正则表达式的功能非常强大,用户可以通过编写个性化正则表达式,实现复杂的校验逻辑。 input元素的公共属性 (3)placeholder属性 placeholder属性用于设置一个文本占位符给出相应提示,当input元素设置了placeholder属性值,页面加载完毕后,input元素对应输入框内将显示placeholder属性设置的信息内容。当输入框获取焦点并有信息输入,输入框失去焦点后输入信息将代替原placeholder设置内容;当输入框获取焦点且没有信息输入,输入框失去焦点后将仍然显示原placeholder设置内容。 placeholder 属性适用于以下类型的 标签: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. 自定义验证提示信息 当表单校验未通过时,HTML5提供了一些默认的提示信息,但默认提示不友好。因此,HTML5允许用户使用setCustomValidity()方法自定义提示信息内容。setCustomValidity()方法与checkvalidity()方法的用法相似,都是通过在Javascript中调用实现的。 输入表单的验证方式 对比以下三种情况: 不使用setCustomValidity 使用setCustomValidity 分情况使用setCustomValidity 输入表单的验证方式 4. 设置不验证 当某些时候,不需要校验输入信息即可直接提交表单数据的,可以为表单元素添加“novalidate”属性。该属性用于取消表单全部元素的验证。 本章实训 实现以下表单的制作: 第6章 用HTML5创建表单 HTML表单 表单用于获取不同类型的用户输入 HTML表单类型 常用表单类型 文本域 或 文本区域 按钮或或 复选框 单选按钮 选择列表 文件域 图像域 隐藏域 HTML表单 常用的表单标签

表单 输入域 文本域 控制标签 定义域 域的标题 选择列表 下拉列表中的选项 按钮 input标签 标签用于搜集用户信息。 根据不同的 type 属性值,输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等等。 在 HTML 中, 标签没有结束标签。 input标签的常用属性 属性 值 描述 autocomplete on off 规定是否使用输

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。