项目6 网页中的表单

任务6网页中的表单Web前端开发项目式教程HTML5+CSS3登录页面的设计任务6-1任务描述大多数网站都具备用户注册、用户登录和搜索功能，这些页面使用的都是表单元素。表单在网页中主要实现数据采集功能。当用户填写了相应信息后，这些信息会经过表单服务器提交到网站的后台。后台管理人员可以经过一系列操作获取用户输入的信息，来判断是否允许用户登录或注册。在本任务中，我们将学习表单的相关标记及样式属性。学习目标知识目标掌握表单的基本用法及各种表单控件掌握表单样式的应用技能目标能够熟练制作表单能够熟练使用各种表单控件能够根据需要设计表单样式素质目标培养学生的自我认知能力、独立思考能力、发现解决问题的能力培养学生的社会实践能力，引导学生做到心平气和、善良有礼、守信用，有耐心、有爱心，以及有判断力，学会包容他人知识点表单的组成01

创建表单02

表单控件03登录页面的设计任务6-1一、

表单的组成HTML表单用于搜集不同类型的用户输入。HTML表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到Web服务器。一、

表单的组成1.表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器.2.表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。3.表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。在HTML中使用<form>标签来表示表单，表单里的元素都需要放在<form>和</form>标签之间。具体语法如下：<formaction="url地址"method="提交方式"name="表单名称">

各种表单控件和提示信息</form>form二、创建表单action属性定义提交表单时要执行的操作。通常，当用户单击“提交”按钮时，表单数据将发送到服务器上的文件中action属性二、

创建表单method属性指定提交表单数据时要使用的HTTP方法。表单数据可以作为URL变量（使用method="get"）或作为HTTPpost事务（使用method="post"）发送。提交表单数据时，默认的HTTP方法是GET。格式如下：在提交表单数据时使用GET方法：<formaction="/action_page.php"method="get">在提交表单数据时使用POST方法：<formaction="/action_page.php"method="post">method属性二、

创建表单name属性用于指定表单的名称，以区分同一个页面中的多个表单，为在脚本中引用表单提供方便name属性二、

创建表单<inputtype="text">定义用于文本输入的单行输入字段。<form>姓名:<br><inputtype="text"name="username"><br>年龄:<br><inputtype="text"name="age"></form>单行文本输入框三、

表单控件<inputtype="password">定义密码字段。<form>用户名:<br><inputtype="text"name="username"><br>密码:<br><inputtype="password"name="psw"></form>密码输入框三、

表单控件<inputtype="radio">定义单选按钮。<form><inputtype="radio"name="sex"value="male"checked>男<br><inputtype="radio"name="sex"value="female">女</form>单选按钮三、

表单控件<inputtype="checkbox">定义复选框。<form><inputtype="checkbox"name="vehicle"value="Bike">自行车<br><inputtype="checkbox"name="vehicle"value="Car">汽车</form>复选框三、

表单控件<inputtype="button>定义按钮。<inputtype="button"onclick="alert（'HelloWorld!'）"value="单击!">普通按钮三、

表单控件<inputtype="submit">定义了提交按钮。<formname="input"action="html_form_action.php"method="get">用户名:<inputtype="text"name="user"><inputtype="submit"value="Submit"></form>提交按钮三、

表单控件<select>元素定义下拉菜单的基本语法.<selectname="下拉列表名"><option>选项1</option><option>选项2</option><option>选项3</option><option>选项4</option></select><select>元素（下拉列表）三、

表单控件<select>元素定义下拉菜单的基本语法.<textarea>请在这里描述您的个人简介</textarea><textarea>控件三、

表单控件<label>标签用于聚焦，为<input>元素定义标注（标记）。点击<label>元素内的文本，就会触发此控件。也就是说，当用户点击<label>元素内的文本时，浏览器就会自动将焦点转到与该文本相关的表单控件（如输入框等）上。<div><labelfor="school">所在城市：</label><selectname="city"><optionvalue="dalian">大连</option></select></div><label>标签三、

表单控件任务

查看页面源代码任务实现任务效果图6.2用户登录页面效果制作用户登录页面.注册页面任务6-2任务描述

表单数据提交是网站中比较常见的用户交互行为，在HTML页面中，注册表单是常见的一种，它会在提交数据前检查表单数据的完整性，确保没有漏填、误填。如果出现漏填、误填，会提示用户，以确保填写数据的准确有效。本任务使用HTML5新增元素来制作用户注册页面，并进行数据检查。学习目标知识目标掌握使用CSS样式改变表单外观的方法掌握HTML5新增类型的用法技能目标能够熟练将CSS样式应用在表单元素中能够熟练使用各种新增元素能够根据项目需求设计表单页面素质目标培养用户思维培养学生的自信心，鼓励学生自觉遵守规章制度，以积极的态度促进科学技术发展培养学生的创新能力，鼓励学生勇于探索，敢于创新，将创新理念融入课程学习中知识点HTML5新增类型01一、

HTML5新增类型HTML5增加了多个新的输入类型：color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week。<inputtype="number">用于包含数字值的输入字段，可以对数字进行限制。根据浏览器支持，限制可以应用到输入字段。格式如下：<form>数量（从1至5）:<inputtype="number"name="quantity"min="1"max="5"></form>输入类型：number一、HTML5新增类型<inputtype="date">用于包含日期的输入字段。格式如下：<form>出生日期:<inputtype="date"name="bday"></form>输入类型：date一、HTML5新增类型<inputtype="color">用于包含颜色的输入字段。格式如下：<form>请选择一个你最喜欢的颜色:<inputtype="color"name="favcolor"></form>输入类型：color一、HTML5新增类型<inputtype="range">用于包含一定范围内值的输入字段。格式如下：<form><inputtype="range"name="points"min="0"max="10"></form>输入类型：range一、HTML5新增类型<inputtype="month">允许用户选择月份和年份。格式如下：<form>生日（月和年）:<inputtype="month"name="bdaymonth"></form>输入类型：month一、HTML5新增类型<inputtype="week">允许用户选择周和年。格式如下：<form>请选择周次:<inputtype="week"name="week_year"></form>输入类型：week一、HTML5新增类型<inputtype="time">允许用户选择时间（无时区）。格式如下：<form>请选择一个时间:<inputtype="time"name="usr_time"></form>输入类型：time一、HTML5新增类型<inputtype="datetime">允许用户选择日期和时间（有时区）。格式如下：<form>生日（日期和时间）:<inputtype="datetime"name="bdaytime"></form>输入类型：datetime一、HTML5新增类型<inputtype="email">用于包含电子邮件地址的输入字段。根据浏览器支持，能够在提交时自动对电子邮件地址进行验证。格式如下：<form>E-mail:

<inputtype="email"name="email"></form>输入类型：email一、HTML5新增类型<inputtype="search">用于搜索字段的表现类似常规文本字段。格式如下：<form>搜索谷歌:<inputtype="search"name="googlesearch"></form>输入类型：search一、HTML5新增类型<inputtype="tel">用于包含电话号码的输入字段。目前只有Safari8支持tel类型。格式如下：<form>电话号码:<inputtype="tel"name="usrtel"></form>输入类型：tel一、HTML5新增类型<inputtype="url">用于包含URL地址的输入字段。根据浏览器支持，在提交时能够自动验证URL字段。格式如下：<form>请输入一个网址:<inputtype="url"name="homepage"></form>输入类型：url一、HTML5新增类型任务

制作用户注册页面任务实现1、启动HBuilderX打开HBuilder，选择默认Web项目HelloHBuilder中的index.html右键单击重命名为demo6-2.html。。2、新建项目修改demo6-2.html文件中<title>和<body>中的内容，按下“Ctrl