《3.3html5上机实践——设计注册页面》由会员分享，可在线阅读，更多相关《3.3html5上机实践——设计注册页面（11页珍藏版）》请在金锄头文库上搜索。
1、第3章 HTML5的表单,3.1 新的input输入类型及属性,3.3 上机实践设计注册页面,3.2 表单的验证方式,3.3 上机实践设计注册页面,3.3.1 实践目的 使用HTML5的新表单元素打造一个注册页面，该页面将应用新的表单元素及表单的输入验证。通过本上机实践，读者能够熟练掌握HTML5中新增表单元素的应用，以及表单验证方法的使用。 3.3.2 设计思路 一个相对完善的注册页面应该提供用户身份信息和用户个人信息两种用户信息。用户登录信息包括用户名、密码、邮箱，用户身份信息包括姓名、性别、出生年月日、住址等。同时对于用户各个输入信息，还应该进行输入合法性的校验。 根据以上分析，我们设定
2、设计步骤如下。 （1）使用HTML5表单原色设计页面基本结构。 （2）添加各表单验证方法。 3.3.3 实现过程 根据上面的分析，我们设计代码如下。, /验证密码强度 function checkStrength() var strength = document.getElementById(“strength“); var psw1 = document.getElementById(“psw1“).value; var length = psw1.length; if (length=1 ,else strength.innerHTML=“强“; /验证两次输入密码是否一致 functi
3、on checkPSW() var psw1 = document.getElementById(“psw1“).value; var psw2 = document.getElementById(“psw2“).value; var pswInfo = document.getElementById(“pswInfo“); if(psw1!=psw2) pswInfo.innerHTML=两次输入的密码必须一致; /注册方法,function reg() var username = document.getElementById(“username“).value; var email =
4、 document.getElementById(“email“).value; var gender = document.getElementById(“gender“).value; var birth = document.getElementById(“birth“).value; var address = document.getElementById(“address“).value; if(document.getElementById(“username“).checkValidity()/判断用户名是否通过校验 &document.getElementById(“psw1
5、“).checkValidity()/判断密码是否通过校验 &document.getElementById(“psw2“).checkValidity()/判断重复密码是否通过校验 &document.getElementById(“email“).checkValidity()/判断电子邮箱是否通过校验 &document.getElementById(“birth“).checkValidity()/判断生日是否通过校验 &document.getElementById(“address“).checkValidity()/判断地址是否通过校验 ) alert( 确认注册信息n+ 用户名
6、：+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位； 电子邮箱格式必须正确； 学号为数字。,
