Web前端开发实训案例教程(初级)_第3章 HTML5表单—注册页面.pptx

第3章HTML5表单—注册页面;3.1 技能和知识点;制作一个用户注册页面，页面分为头部和正文两部分。头部显示“用户注册”标题，正文部分为一个form表单，效果图如图所示。 （1）表单中的账号、密码、手机号需要非空验证。 （2）表单中的输入框需提示输入信息。 （3）表单中手机号、邮箱、年龄需使用HTML5新增的表单控件。 （4）表单中的上传头像可以一次上传多个文件。;1．项目设计 （1）项目名称：register。 （2）项目文件结构如表所示。;2．搭建用户注册页面主体结构 使用语义化标签搭建用户注册页面register.html主体结构，包括页头和正文两个部分，页头使用header标签，正文使用article标签，如下图所示。;3．编写页头 页头<header>编写一个标题<h2>和水平线<hr>，如下图所示。;4．编写正文 正文<article>部分编写表单内容。 （1）账号、密码、手机号设置required属性。 （2）输入框元素全部使用placehoder属性提示输入信息。 （3）手机号类型使用tel。 （4）邮箱类型使用email。 （5）年龄类型使用number。 （6）上传头像设置multiple属性。;3.4.1 创建注册页面 3.4.2 搭建头部和正文结构 3.4.3 编写头部 3.4.4 编写正文;创建一个注册页面，命名为register.html，基本结构如下。;使用HTML5语义化标签搭建页面结构。使用<header>搭建头部，<article>标签搭建正文结构。;在头部区域使用标题标签<h2>编写一个标题“用户注册”，使用<hr>标签创建一个下划线。 页面效果：;（1）在正文区域<article>标签内，编写一个form表单。在form表单内设置一个提交按钮，将提交按钮的value更改为“注册”。;（2）添加表单元素。 ① 用户账号的输入框type值为text，变更为文本输入框。 ② 用户密码的输入框type值为password，变更为密码输入框。 ③ 手机号码的输入框type值为tel，变更为电话号码输入框。 ④ 用户邮箱的输入框type值为email，变更为电子邮箱输入框。 ⑤ 用户年龄的输入框type值为number，变更为数字输入框。 ⑥ 上传头像控件的type值为file，变更为文件上传域。;（3）设置表单元素属性。 ① 用户账号，设置placehoder提???信息为“请输入账号”，设置require非空验证。 ② 用户密码，设置placehoder提示信息为“请输入密码”，设置require非空验证。 ③ 手机号码，设置placehoder提示信息为“请输入手机号”，设置require非空验证。 ④ 用户邮箱，设置placehoder提示信息为“请输入手机号”。 ⑤ 用户年龄，设置placehoder提示信息为“请输入年龄”。 ⑥ 上传头像：设置属性multiple可同时上传多个文件。;（3）设置表单元素属性。第3章HTML5表单—注册页面;3.1 技能和知识点;制作一个用户注册页面，页面分为头部和正文两部分。头部显示“用户注册”标题，正文部分为一个form表单，效果图如图所示。 （1）表单中的账号、密码、手机号需要非空验证。 （2）表单中的输入框需提示输入信息。 （3）表单中手机号、邮箱、年龄需使用HTML5新增的表单控件。 （4）表单中的上传头像可以一次上传多个文件。;1．项目设计 （1）项目名称：register。 （2）项目文件结构如表所示。;2．搭建用户注册页面主体结构 使用语义化标签搭建用户注册页面register.html主体结构，包括页头和正文两个部分，页头使用header标签，正文使用article标签，如下图所示。;3．编写页头 页头<header>编写一个标题<h2>和水平线<hr>，如下图所示。;4．编写正文 正文<article>部分编写表单内容。 （1）账号、密码、手机号设置required属性。 （2）输入框元素全部使用placehoder属性提示输入信息。 （3）手机号类型使用tel。 （4）邮箱类型使用email。 （5）年龄类型使用number。 （6）上传头像设置multiple属性。;3.4.1 创建注册页面 3.4.2 搭建头部和正文结构 3.4.3 编写头部 3.4.4 编写正文;创建一个注册页面，命名为register.html，基本结构如下。;使用HTML5语义化标签搭建页面结构。使用<header>搭建头部，<article>标签搭建正文结构。;在头部区域使用标题标签<h2>编写一个标题“用户注册”，使用<hr>标签创建一个下划线。 页面效果：;（1）在正文区域<article>标签内，编写一个form表单