网页制作案例教程HTML5+CSS3 课件 项目8 表单的应用_第1页
网页制作案例教程HTML5+CSS3 课件 项目8 表单的应用_第2页
网页制作案例教程HTML5+CSS3 课件 项目8 表单的应用_第3页
网页制作案例教程HTML5+CSS3 课件 项目8 表单的应用_第4页
网页制作案例教程HTML5+CSS3 课件 项目8 表单的应用_第5页
已阅读5页，还剩52页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

HTML5CSS3项目8表单的应用网页制作案例教程（HTML5+CSS3）教学目标了解表单的构成，能够根据不同情况选择相应的表单元素1了解掌握掌握2掌握表单相关标记，能够创建各种表单元素会使用表单制作登录、注册、问卷调查等常见表单页面4掌握3掌握HTML5中新增的表单标签及属性1form表单元素2input控件3select控件4其它常用控件任务分解5HTML5新增的表单控件和属性6制作“用户注册表”页面01form表单元素PART01form表单元素表单元素表单是交互式网站的重要组件，它可以向服务器提交数据，收集用户信息。它由表单元素<form>和一些表单控件组成，使用<form></form>标记定义表单范围。基本语法格式<formname="表单名称"action="url地址"method="提交方式">各种表单控件</form>form表单元素属性名功能name用于设置表单<form>的名称，以区分同一个页面中的多个表单method用于设置表单数据的提交方式，其取值为get或post，默认值是post。get方法中数据传输是通过url传递的，有缓存机制，效率较高，get传递的数据大小有限制，数据很容易地在浏览器地址栏中看到，如果参数包含敏感信息，存在安全风险。post方法浏览器将请求的数据打包并放置在http请求体中，数据大小不受限制，更安全。action用于指定接收并处理表单数据的服务器程序的url地址<formname="register"action="register.php"method="get">表单中控件</form>表单属性02input控件PART02input控件input控件<input>是比较常用的表单控件，根据type属性值的不同，表示不同的控件类型，包含单行文本框、密码框、单选框、复选框、普通按钮、提交按钮、重置按钮、隐藏域、文件域等。基本语法格式<inputtype="属性值">input控件属性名属性值功能type

text单行文本框，用于输入单行文本password密码框，用于输入密码radio单选框，用于多选一，如性别checkbox复选框，用于多选多，如爱好button普通按钮，通常配合js使用submit提交按钮，用于提交表单输入的数据reset重置按钮，用于重置表单输入的数据image定义图像形式的提交按钮hidden隐藏域file文件域type属性input控件属性名功能name用来设置<input>标记的名称value预先设置内容，指定值size设置此栏可显现的宽度maxlength设置允许用户输入到文本框的最大字符数量readonly规定输入字段是只读的，不能编辑修改disabled禁用，定义需禁用的控件checked将单选框或复选框某些选项默认选中(只针对type="checkbox"或者type="radio")其它属性input控件<body><formname="register"action="register.php"method="get">用户名：<inputtype="text"name="username"><br>密码：<inputtype="password"name="password"><br>性别：<inputtype="radio"name="sex"id="boy"checked>男<inputtype="radio"name="sex"id="girl">女<br>爱好：<inputtype="checkbox"name="hobby"id="run"checked>跑步<inputtype="checkbox"name="hobby"id="read"checked>看书<inputtype="checkbox"name="hobby"id="music">听音乐<br>头像：<inputtype="file"name="img"><br><inputtype="submit"name="btnSubmit"value="提交"><inputtype="reset"name="btnReset"value="重置"><inputtype="button"name="btnButton"value="普通按钮"><br></form></body>动手实践demo103select控件PART03select控件除常见的<input>控件外，在交互式页面上比较常见的还有下拉列表，下拉列表用<select>标记定义，通常和<option>配合使用，<option>定义列表项。基本语法格式<selectname=“属性值”><option属性名=“属性值”></option><option属性名=“属性值”></option><option属性名=“属性值”></option></select>select控件select控件属性名功能name名称，用来标记<select>标记的名字value定义菜单项的值，定义在<option>标记上selected定义下拉列表中的某一项默认选中，定义在<option>标记上form设定字段隶属于哪一个或多个表单，当页面中，某个控件不在表单内部写的时候，但想把此控件归属于某个表单，可使用此属性进行标明下拉列表常见的属性有name、value、selected等，其主要功能如表所示：select控件<body><formname="register"action="register.php"method="get">所在地址：<selectname="address"><optionvalue="bj">北京</option><optionvalue="sh">上海</option><optionvalue="gz">广州</option><optionvalue="sz">深圳</option><optionvalue="xc"selected>许昌</option></select><br></form></body>动手实践demo204其他常用控件PART04label控件input控件<label>控件用于为表单元素（如单选框、复选框等）提供标签或说明文本。基本语法格式<labelfor=“属性值”>说明文本</label>label控件<label>

控件通常与<input>控件配合使用，用于把说明文本与<input>控件绑定，其中<label>控件中的for属性值与相关元素的id属性值相同。如用在单选框上，可使说明文本与单选框绑定在一起，当点击单选框后面对应的文字时，该选项会被选中或者取消选中。方法一：先使用

<label>控件把内容文本包裹起来，然后在表单控件上添加id属性，最后在<label>控件的for属性中设置与id属性对应的值。例如：<inputtype=“radio”name=“名称”id=“boy”><labelfor=“boy”>男</label>方法二：使用<label>控件把本内容文和表单控件一起包裹起来例如：<label><inputtype=“radio”name=“名称”>男</label>label控件<body><formname="register"action=""method="get">性别：<inputtype="radio"name="sex"id="boy"checked><labelfor="boy">男</label>

<inputtype="radio"name="sex"id="girl"><labelfor="girl">女</label><br>爱好：<label><inputtype="checkbox"name=""id=""checked>跑步</label>

<label><inputtype="checkbox"name=""id=""checked>看书</label>

<label><inputtype="checkbox"name=""id="">听音乐</label><br></form></body>动手实践demo3多行文本控件多行文本控件有时候需要浏览者输入比较多的文字，如注册时的简介、留言板、评论区等。使用<textarea>控件定义一个多行的文本输入控件。文本区域中可容纳无限数量的文本。基本语法格式<textareacols=“可见宽度”rows=“可见行数”></textarea>多行文本控件在多行文本控件<textarea>中，可使用cols和rows属性来规定<textarea>的尺寸大小，但更好的办法是使用CSS的height和width属性。cols：设置文本区域内可见的宽度，以字符数为单位；rows：设置文本区域内可见的行数。<formname="register"action="register.php"method="get">简介：<textareaname=""id=""cols="30"rows="10"></textarea><br/></form>例button控件button控件<button>控件用于定义按钮。它与<input>控件定义的按钮相似。但在<button>控件内部，可以放置内容，比如文本或图像。这是该控件与使用<input>控件创建的按钮之间的不同之处。基本语法格式<buttontype=“属性值”>文本或图像</button>button控件属性名属性值功能typebutton普通按钮，通常配合js使用submit提交按钮，用于提交表单输入的数据reset重置按钮，用于重置表单输入的数据<formname="register"action="register.php"method="get"><buttontype="submit"name="btnSubmit">提交</button><buttontype="reset"name="btnReset">重置</button><buttontype="button"name="btn">普通按钮</button></form>例05HTML5新增的表单控件和属性PART05HTML5新增控件<datalist>控件用来定义选项列表，它无法单独使用，需要与<input>控件配合使用，来定义<input>可能的值。<datalist>控件为<input>控件提供可选数据，用户能看到一个下拉列表，作为用户的输入数据。datalist控件基本语法格式<inputlist="datalist的id值"><datalistid="id值"><optionvalue="属性值"><optionvalue="属性值"><optionvalue="属性值"></datalist>HTML5新增控件<form>所在省份：<inputlist="provinceList"><!--通过<datalist>设置<input>元素的预定义值--><datalistid="provinceList"><optionvalue="河南省"><optionvalue="河北省"><optionvalue="山东省"><optionvalue="山西省"></datalist></form>例HTML5新增控件<output>控件用定义不同类型的输出(例如脚本的输出)。<output>控件通常和<form>表单一起使用，用来输出显示计算结果。output控件基本语法格式<outputname="名称"for="元素id">默认内容</output> HTML5新增控件<formoninput="x.value=parseInt(a.value)+parseInt(b.value)"><inputtype="text"id="a"value="0">+<inputtype="text"id="b"value="0"><!--<output>标签显示计算结果或脚本输出-->=<outputname="x"for="ab">0</output></form>例HTML5新增input类型属性名属性值功能typecolor颜色输入类型，用来创建颜色选择器email创建只能输入e-mail地址的输入框number创建只能输入数值的输入框range创建拖动条，通过拖动条在一定范围内输入数值search创建搜索框tel创建只能输入电话号码框的输入框url创建只能输入url地址的输入域date创建日期选择器(包含年、月、日)week创建星期选择器(包含年、第几周)month创建月份选择器(包含年、月)time创建时间选择器(包含时、分)datetime创建UTC时间选择器(包含年、月、日、时、分)datetime-local创建本地时间和日期选择器(包含年、月、日、时、分)HTML5新增了多项表单输入类型，这些新类型具有更明确的含义，提供了更好的输入控制和验证，为开发人员带来了极大的方便。新增的输入类型如表所示。HTML5新增input类型color类型用来选取颜色，它提供了一种颜色选取器。颜色<form>你喜欢的颜色：

<inputtype="color"

name="color"><br/></form>例HTML5新增input类型在提交表单时，会自动验证email域的值是否符合email的标准格式，不用自己用正则表达式去写email的格式验证。电子邮箱<form>邮箱：<inputtype="email"name="mail"><br/></form>例HTML5新增input类型number类型是用来专门输入数字的文本框，在提交时会检测其中内容是否为数字。数字<form>身高：<inputtype="number"max="226"min="80"step="10"><br/></form>例HTML5新增input类型range类型用于包含一定范围内数字值的输入域，显示为滑动条。还能够设定对所接收的数字的范围。数值范围<form>身高：<inputtype="range"max="226"min="80"

step="10"><br/></form>例HTML5新增input类型search类型是一种专门用来输入搜索关键词的文本框。不同于普通类型的文本框，当用户开始输入数据时，输入框的右边会出现一个用于清除内容的图标❌，单击此图标可以快速清除。搜索<form>搜索：<inputtype="search"name="search"><br/></form>例HTML5新增input类型tel类型的元素用于让用户输入和编辑电话号码，因为世界各地的电话号码格式差别很大，在提交表单之前，输入值不会被自动验证为特定格式。电话号码<form>手机号码：<inputtype="tel"name="tel"><br/></form>例HTML5新增input类型type属性设置为url，在提交表单时，会自动验证url域的值是否符合url的标准格式，输入的内容中必须包含"http://"，后面必须有内容，如百度网址或谷歌网址。网络地址<form>博客：<inputtype="url"name="blog"><br/></form>例HTML5新增input类型date、week、month、time、datetime、datetime-local类型是6种样式不同的时间日期选择器控件，统称为日期选择器。日期选择器HTML5新增input类型<body><form>日期：<br><inputtype="date"><br><inputtype="week"><br><inputtype="month"><br><inputtype="time"><br><inputtype="datetime"><br><inputtype="datetime-local"><br></form></body>动手实践demo4HTML5新增表单属性除新增的控件外，HTML5表单新增了大量的属性，以前需要使用JavaScript来实现的一些功能，使用HTML5的属性即可实现，大大的优化了用户体验，减轻了Web前端开发的工作量。新增属性HTML5新增表单属性属性名功能autocomplete规定<form>域应该拥有自动完成功能，可设置该功能打开或关闭autocomplete=“on/off”novalidateHTML表单元素的一个布尔属性，用于设置浏览器不对表单进行验证，当该属性被添加到<form>元素上时，浏览器将不会执行默认的表单验证，不会检查输入字段是否符合指定的验证规则HTML5的<form>表单中添加了一些新属性，具体如表所示。HTML5新增表单属性<body><formautocomplete="on/off"novalidate>用户名：<inputtype="text"name="userName"><br>密码：<inputtype="password"name="password"><br><inputtype="submit"name="btnSubmit"></form></body>自动完成属性值为on效果图自动完成属性值为off效果图动手实践demo5HTML5新增表单属性属性名功能required校验输入框填写内容不能为空，如果为空将弹出提示框，并阻止表单提交。placeholder占位符，提示用户在此文本框输入的内容，默认灰色显示，当鼠标光标在文本框时，此提示文本会自动消失max最大值，规定<input>元素最大值min最小值，规定<input>元素最小值step步长，规定<input>元素步长autofocus指定页面加载后是否自动获取焦点pattern规定用于验证<input>元素的值的正则表达式autocomplete设定是否自动完成表单字段内容。填写并提交表单，然后重新刷新页面查看如何自动填充内容。默认为不填充form设定字段隶属于哪一个或多个表单，当页面中，某个控件不在表单内部写的时候，但想把此控件归属于某个表单，可使用此属性进行标明formaction属性覆盖form元素的action属性，规定向何处发送表单数据formmethod覆盖form元素的method属性。定义发送表单数据到actionurl的HTTP方法list指定字段的候选数据值列表multiple指定输入框是否可以选择多个值，常用于一次性选中上传多个文件HTML5的<input>控件中添加了一些新属性，具体如表所示。HTML5新增表单属性一旦为某输入型控件设置了required属性，则此项必填项，不能为空，如果为空将弹出提示框，并阻止提交表单。适用于以下类型的<input>控件：text,search,url,tel,email,password,datepickers,number,checkbox,radio以及file。required属性<form>用户名：<inputtype="text"name="userName"required>密码：<inputtype="password"name="password"required><inputtype="submit"name="btnSubmit"></form>HTML5新增表单属性placeholder属性为input控件提供一种提示信息，该属性的值将会以灰色的字体显示在文本框中，当文本框获得焦点时，提示信息消失；当失去焦点时，提示信息显示。placeholder属性<form>用户名：<inputtype="text"name="userName"placeholder="请输入用户名..."><br/>密码：<inputtype="password"name="password"placeholder="请输入密码..."><br/><inputtype="submit"name="btnSubmit"></form>输入提示内容效果图输入提示内容效果图例HTML5新增表单属性autofocus是指在页面加载时，控件自动获得焦点，可以直接输入内容。这个属性在注册登录页面及其他表单的第1个input中比较实用。autofocus属性<form>用户名：<inputtype="text"name="userName"

autofocus><br/>密码：<inputtype="password"name="password"><br/><inputtype="submit"name="btnSubmit"></form>例HTML5新增表单属性pattern属性描述了一个正则表达式用于验证<input>元素的值。适用于以下类型的<input>控件:text,search,url,tel,email,和password。pattern属性<form>用户名：<inputtype="text"name="userName"><br/>密码：<inputtype="password"name="password"pattern="^[a-zA-Z]\w{5,17}$"><br/><inputtype="submit"name="btnSubmit"></form>例HTML5新增表单属性拓展：常见的正则表达式如表所示。属性名功能^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$Email地址[a-zA-z]+://[^\s]*或^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$URL地址^\d{15}|\d{18}$身份证号(15位、18位数字)^([0-9]){7,18}(x|X)?$或^\d{8,18}|[0-9x]{8,18}|[0-9X]{8,18}?$以数字、字母x结尾的短身份证号码^[a-zA-Z][a-zA-Z0-9_]{4,15}$帐号是否合法(字母开头，允许5-16字节，允许字母数字下划线)^[a-zA-Z]\w{5,17}$密码(以字母开头，长度在6~18之间，只能包含字母、数字和下划线)HTML5新增表单属性，但在HTML5中，表单控件可以写在<form>表单外，在<input>控件内使用form属性指定属于对应表单（该<input>控件仍然属于<form>表单的一部分）。form属性规定输入域所属的一个或多个表单，如需引用一个以上的表单，请使用空格分隔的列表。form属性<form>表单中设置id=”login”，在<form>表单外的<input>

属性中使用form=”login”指定提交按钮仍属于上面id名为login的表单。<formaction="#"method="get"id="login">用户名：<inputtype="text"name="userName"><br/>密码：<inputtype="password"name="password"><br/></form><inputtype="submit"name="btnSubmit"form="login">例HTML5新增表单属性formaction属性用于描述表单提交的URL地址，它会覆盖<form>元素中的action属性；formmethod属性定义了表单提交的方式，它会覆盖<form>元素的method属性。formaction、formmethod属性<formaction="login.php"method="get"id="login">用户名：<inputtype="text"name="userName"><br/>密码：<inputtype="password"name="password"><br/><inputtype="submit"name="btnSubmit"value="登录"><inputtype="submit"name="btnSubmit"value="注册"formaction="register.php"formmethod="post"></form>例06制作“用户注册表”网页PART06制作“用户注册表”网页用户注册是网站的一个非常重要的常见功能，通过账号注册，网站或平台能够对用户身份进行核实，并采取相应的安全措施来保护用户的个人信息免受黑客攻击和数据泄露。网站可以通过注册来保存用户信息，从而方便用户访问及查阅个人信息。在用户注册页面设计中，运用了HTML5中的表单控件。下面我们要制作一个关于“用户注册表”页面。制作“用户注册表”网页网页分析制作“用户注册表”网页制作步骤输入网页标题和内容0403新建文本文件，生成网页基本代码02打开VScode，打开项目文件夹01新建项目文件夹，准备素材制作“用户注册表”网页<body><divclass="register"><divclass="left"><imgsrc="./img/left.png"alt=""></div><formaction="#"method="get"autocomplete="off"><h1>用户注册表</h1><p><span>用户名：</span><inputtype="text"name="user_name"placeholder="请输入用户名..."required/>（必须填写）</p><p><span>密码：</span><inputtype="password"name="user_passwprd"placeholder="请输入密码..."

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论