HTML5上机实践-设计注册页面.ppt

第3章HTML5的表单 3 1新的input输入类型及属性 3 3上机实践 设计注册页面 3 2表单的验证方式 3 3上机实践 设计注册页面 3 3 1实践目的使用HTML5的新表单元素打造一个注册页面 该页面将应用新的表单元素及表单的输入验证 通过本上机实践 读者能够熟练掌握HTML5中新增表单元素的应用 以及表单验证方法的使用 3 3 2设计思路一个相对完善的注册页面应该提供用户身份信息和用户个人信息两种用户信息 用户登录信息包括用户名 密码 邮箱 用户身份信息包括姓名 性别 出生年月日 住址等 同时对于用户各个输入信息 还应该进行输入合法性的校验 根据以上分析 我们设定设计步骤如下 1 使用HTML5表单原色设计页面基本结构 2 添加各表单验证方法 3 3 3实现过程根据上面的分析 我们设计代码如下 验证密码强度functioncheckStrength varstrength document getElementById strength varpsw1 document getElementById psw1 value varlength psw1 length if length 1 else strength innerHTML 强 验证两次输入密码是否一致functioncheckPSW varpsw1 document getElementById psw1 value varpsw2 document getElementById psw2 value varpswInfo document getElementById pswInfo if psw1 psw2 pswInfo innerHTML 两次输入的密码必须一致 注册方法 functionreg varusername document getElementById username value varemail document getElementById email value vargender document getElementById gender value varbirth document getElementById birth value varaddress document getElementById address value if document getElementById username checkValidity 判断用户名是否通过校验 document getElementById psw1 checkValidity 判断密码是否通过校验 document getElementById psw2 checkValidity 判断重复密码是否通过校验 document getElementById email checkValidity 判断电子邮箱是否通过校验 document getElementById birth checkValidity 判断生日是否通过校验 document getElementById address checkValidity 判断地址是否通过校验 alert 确认注册信息 n 用户名 username n 电子邮箱 email n 性别 gender n 生日 birth n 住址 address n 用户注册页面用户登录信息用户名 邮箱 密码 确认密码 用户基本信息性别男女其他 住址 演示效果 图3 25用户注册界面 图3 26确认注册信息 保存上面的代码并在浏览器中运行 显示注册页面如图3 25所示 此注册页面中 用户名 邮箱 密码 确认密码项是必填字段 当这4个输入文本框中输入的信息不能通过校验时 将无法继续注册流程 当用户输入正确信息后 单击 注册新用户 按钮时 显示注册信息 如图3 26所示 小结 本章主要介绍了HTML5中表单的变化 主要包括新的input输入类型 input属性以及表单的验证方式 表单是网页开发中非常重要的组成部分 掌握HTML5表单的基础用法 是后续深入学习的重要基础之一 习题 1 HTML5中新增了哪几种input类型 2 要想使HTML5中某个输入框在页面加载时获取焦点该如何实现 3 在HTML5中使用pattern属性有什么作用 4 编写一个校园网注册页面 包括用户名 电子邮箱 学号 并要求做以下校验设置 用户名必须为英文和数字组合 且长度大于6位 电子邮箱格式必须正确 学号为数字