任务目标

HTML表单控件制作注册页表单区域。

任务要求

（1）按照效果图完成用户注册页面。

（2）“注册”按钮使用input标签完成。

（3）对文本框、密码框和表单控件使用label标签进行包裹。

（4）对应文本框中添加对应文本预占位提示内容。

（5）添加验证条件，“注册账户”“注册密码”“确认密码”为必填。

（6） 添加验证条件，“注册账户”文本框验证为手机号格式，正则表达式为^1[3456789]\d{9}$。

（7）添加验证条件，“注册密码”密码框、“确认密码”密码框验证为密码格式，正则表达式为^[a-z0-9_-]{6,18}$。

效果如下图：

任务实施

（1）在项目根目录中创建reg.html文件。

（2）使用form标签并设定method与action属性，action为空，method值为“post”。

（3）添加“注册账户”文本框。

（4）添加“注册密码”密码框。

（5）添加“确认密码”密码框。

（6）添加“注册”按钮。

（7）添加对应文本框的required与pattern属性。

教学微课

教学课件

经验分享

对于selected属性、requred属性等，属性名与属性值相等表示真或假的属性，我们称为布尔属性，通常只写属性名即可代表完整写法。有布尔属性即该属性为真；无该属性即为假。

能量贴士

知者不惑，仁者不忧，勇者不惧。语出《论语》。