Web前端开发课件 项目五 网页中的表单_第1页
Web前端开发课件 项目五 网页中的表单_第2页
Web前端开发课件 项目五 网页中的表单_第3页
Web前端开发课件 项目五 网页中的表单_第4页
Web前端开发课件 项目五 网页中的表单_第5页
已阅读5页，还剩41页未读， 继续免费阅读

下载本文档

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

文档简介

网页中的表单项目五授课教师：姓名WEB前端开发Contents一项目描述本项目学习要点表单的高级应用；使用CSS样式修饰表单。表单的作用和语法格式；表单中各元素的作用和语法格式；二知识准备表单概述；表单高级元素。表单基本元素；表单其他元素；表单概述在HTML文档中，使用表单可以收集用户的相关信息，提交后的数据可以交付后台进行处理，比如登录界面、调查问卷、个人信息填写等。表单的标签为<form></form>，其格式如下：<formname="表单名称"action="url"method=”get/post”target=”目标显示方式”enctype=”mime”></form>表单概述其中各属性的含义如表所示。属性含义说明name表单名称为了区分多个表单，用该属性给表单命名，以防止表单提交到后台程序出现混乱。action表单提交地址用于指定表单数据提交到哪个地址进行处理或者以邮件形式发送到哪个邮箱。如：action=”form-action.asp”或者action=”mailto:415770947@”method传送方法指明提交表单的HTTP方法，取值为get或post，由于get方法安全性较低，所以大部分采用post的方法。target目标显示方式目标窗口的打开位置，与超链接<a>标签一样，有四个属性值：_self：默认值，表示在当前的窗口打开页面。_blank：表示在新的窗口打开页面（常用）。_parent：表示在父级窗口中打开页面。_top：页面载入到包含该链接的窗口，取代当前在窗口中的所有页面。enctype编码方式用于设置表单信息提交的编码方式，有两个值：application/x-www-form-urlencoded：默认的编码方式。multipart/form-data：MIME编码，对于“上传文件”这种表单必须选择该值。表单概述结合以上表单属性的介绍，可以创建如图所示的表单。第8、9行代码为：<formname="form1"action=”form-action.asp”method=”post”target=”_blank”enctype=”application/x-www-form-urlencoded”></form>这句代码创建了一个表单，name=“form1”表示表单名称为form1，action=”form-action.asp”表示提交表单后将数据交给form-action.asp文件来执行，method=”post”表示传送方法为post，target=”_blank”表示提交表单后在新的窗口打开页面，enctype=”application/x-www-form-urlencoded”定义了表单信息提交时的编码方式。表单概述也可以如图所示创建表单。第8、9行代码为：<formaction="mailto:someone@"method="post"enctype="text/plain"></form>这句代码中action=mailto:someone@表示提交表单后将表单内容以邮件形式发送给someone@。表单基本元素按照上面的方法创建的表单，在网页上并没有内容显示，因为表单是一个包含表单元素的容器，只有通过插入各种表单元素，才能显示不同的交互界面。<input>标签用于搜集用户信息，通过设置不同的type属性值，可以有很多类型，type属性值如表所示。type值含义说明text单行文本框用户可在其中输入简短文本，默认宽度为20个字符。password密码为了保证文本的安全性，该字段中的字符被掩码，以点的形式显示。checkbox复选框用户在一组选项中可以选择一项或多项。radio单选按钮用户在一组选项中只能选择一项。button普通按钮可点击的按钮，一般用于通过JavaScript启动脚本。submit提交按钮作用是把表单数据发送到服务器。reset重置按钮作用是清除表单中的所有数据。image图像域图像形式的提交按钮。file上传按钮定义输入字段和浏览按钮，供文件上传。hidden隐藏字段需要提交数据又不显示在浏览器中的表单元素。表单基本元素【例5-1】制作一个登录框实例，代码如下所示（示例文件5-1.html）。<!DOCTYPEhtml><htmllang="en"><head> <metacharset="UTF-8"> <title>创建一个登录框</title></head><body> <formmethod="post"action="">

姓名：<inputtype="text"value="请输入姓名"size="20"maxlength="15"/><br/>

密码：<inputtype="password"size="20"maxlength="15"/><br/> <inputtype="submit"value="登录"/> <inputtype="reset"value="重置"/> </form></body></html>插入了一个单行文本框，其type属性值为“text”，value属性定义文本框的初始值为“请输入姓名”；size属性定义文本框的宽度为“20”个字符宽度；maxlength属性文本框定义最多输入的字符数为“15”。插入了一个密码框，其type属性值为“password”，其他的属性及含义和文本框是一样的，密码文本框的中的文本以点的形式显示，但它仅仅使周围的人看不见输入的文本，但并不能真正使得数据安全。为了数据安全，还需要后端技术解决。插入一个提交按钮，其type属性是“submit”，value的取值“登录”就是显示在按钮上的文字。提交按钮单击后会将表单的信息提交给表单form的action属性所指向的文件进行处理。插入一个重置按钮，其type属性为“reset”，value属性的意义与提交按钮相同，重置按钮的作用是将表单中的内容清空。表单基本元素【例5-1】制作一个登录框实例，代码如下所示（示例文件5-1.html）。在chrome浏览器中预览表单基本元素【例5-2】制作一个满意度测评表单实例，代码如下所示（示例文件5-2.html）。<body> <formmethod="post"action="">

网站满意度打分：<br/> <inputtype="radio"name="Question1"value="best"checked="checked"/>非常满意<br/> <inputtype="radio"name="Question1"value="better"/>比较满意<br/> <inputtype="radio"name="Question1"value="good"/>一般<br/> <inputtype="radio"name="Question1"value="bad"/>不满意<br/>

您希望我们增加些哪方面的知识：<br/> <labelfor="c1">网页设计：</label> <inputtype="checkbox"id="c1"value="painting"checked="checked"><br/> <labelfor="c2">css3动画：</label> <inputtype="checkbox"id="c2"value="writting"><br/> <labelfor="c3">后期运营维护：</label> <inputtype="checkbox"id="c3"value="travelling"><br/> <inputtype="submit"value="提交"/> </form></body>设置了一个单选按钮组，共四个选项，单选按钮的type属性为radio，name属性为单选项命名，value属性为该选项的值，它是与服务器连接的重要参数。设置了一个复选按钮组，共三个选项，复选按钮的type值为checkBox，复选框checkbox不像单选按钮radio，它不需要设置选项列表的name属性，因为复选框可以多选，一个选项列表中可以有多个复选框被选中。表单基本元素【例5-2】制作一个满意度测评表单实例，代码如下所示（示例文件5-2.html）。在chrome浏览器中预览表单基本元素【例5-3】制作上传附件页面实例，代码如下所示（示例文件5-3.html）。<!DOCTYPEhtml><htmllang="en"><head> <metacharset="UTF-8"> <title>上传附件</title></head><body> <formmethod="post"action="">

上传图片：<inputtype="file"/><br/> <inputtype="button"value="图片要求"onclick="alert('文件不能大于10M；必须是JPG类型文件；')"><br/> <inputtype="image"src="images/upload.png"/><br/> </form></body></html>创建了一个文件域，用于上传文件，其type属性值是file。当使用文件域file时，必须在<form>标签中说明编码方式：enctype=“multipart/form-data，这样服务器才能接收到正确的信息。创建了一个普通的表单按钮，type属性值为button，value属性值是显示在按钮上的文字，onclick表示单击该按钮触发的事件：alert('欢迎来到我们的网站！')，表示弹出窗口并显示“欢迎来到我们的网站！”。创建了一个图片域，type属性值为“image”，src表示图片路径，其作用相当于提交按钮。表单基本元素【例5-3】制作上传附件页面实例，代码如下所示（示例文件5-3.html）。在chrome浏览器中预览单击“选择文件”按钮单击“图片要求”按钮表单其他元素表单其他元素如表所示。标签含义说明textarea多行文本输入框主要用于输入较长的文本信息。select下拉列表框下拉列表是一种简单的带有预选值的下拉列表，能够在有限空间设置多个选项表单其他元素【例5-4】制作入库单实例，代码如下所示（示例文件5-4.html）。<!DOCTYPEhtml><htmllang="en"><head> <metacharset="UTF-8"> <title>入库单</title> <styletype="text/css"> body{line-height:30px;} </style></head><body> <formmethod="post"action=""> <h1>入库单</h1>

入库产品编号：<br/> <inputtype="text"size="20"maxlength="15"/><br/>表单其他元素【例5-4】制作入库单实例，代码如下所示（示例文件5-4.html）。

请选择所入仓库：<br/> <selectname="stock"> <optionvalue="stock1">仓库一</option> <optionvalue="stock2">仓库二</option> <optionvalue="stock3"selected="selected">仓库三</option> </select><br/>

请选择经手库管员：<br/> <selectname="stockman"size="3"> <optionvalue="stockman1">张金红</option> <optionvalue="stockman2">李颖</option> <optionvalue="stockman3">王占坤</option> </select><br/>

入库原因：<br/> <textarearows="5"cols="30">填写货物来源</textarea><br/> <inputtype="submit"value="入库"/> </form></body></html>创建了一个下拉列表，下拉列表是一种简单的带有预选值的下拉列表，能够在有限空间设置多个选项，由<select>和<option>这两个标签配合使用，<select>表示整个列表，<option>表示一个列表项，Value属性表示选项值，Selected表示是否被选中。创建了一个可以同时显示三条记录的列表，它的写法与仓库列表类似，不同之处是在select标签后面加上size属性：<selectname="stockman"size="3">，表示下拉列表展开，可见列表项数目为3。创建了一个文本区域，标签是<textarea></teaxtarea>，rows属性定义文本框的高度，cols属性定义文本框的宽度，单位是单个字符数。表单其他元素【例5-4】制作入库单实例，代码如下所示（示例文件5-4.html）。在chrome浏览器中预览表单高级元素input标签还有一些高级应用，如表所示。type值含义说明urlURL地址输入框要求输入网站网址，在提交表单时，会自动验证是否是URL地址。emailemail地址输入框要求输入email地址，在提交表单时，会自动验证是否是email地址。date日期选择框选择一个日期。time时间选择框选择一个时间。number数字输入框用户可以直接输入数字，也可以通过上下箭头选择数字。range滑条控件可以通过滑块选择合适的数值。表单高级元素【例5-5】将上例的入库单继续完善一下，修改成如图所示效果，增加了入库日期、入库时间、入库数量、入库产品合格率等内容（示例文件5-5.html）。表单高级元素【例5-5】将上例的入库单继续完善一下，修改成如图所示效果，增加了入库日期、入库时间、入库数量、入库产品合格率等内容（示例文件5-5.html）。在【例5-4】的26行之后插入如下代码：入库日期：<br/><inputtype="date"name="indate"/><br/>入库时间：<br/><inputtype="time"name="intime"/><br/>入库数量：<br/><inputtype="number"name="num"/><br/>入库产品合格率：<br/><inputtype="range"min="1"max="100"step="2"name="qualified"/><br/>创建了日期选择框，type属性值为date，用户单击输入框中的向下按钮，即可在弹出的窗口中选择需要的日期，也可以通过微调按钮选择日期。创建了时间选择框，type属性值为time，用户可以直接输入时间，也可以点击右侧的微调按钮，选择时间。创建了数字选择框，type属性值为number，用户可以直接输入数字，也可以单击微调按钮上下选择合适的数值。创建了一个滑块控件，type属性值为range，min属性表示滑块的最小数值，max属性值表示滑块的最大数值，step属性表示滑块梯度的大小。表单高级元素【例5-6】验证URL地址和email地址的功能实例，代码如下所示（示例文件5-6.html）。<head> <metacharset="UTF-8"> <title>验证地址</title> <styletype="text/css"> body{line-height:30px;} </style></head><body> <formmethod="post"action="">

验证一个网址：<br/> <inputtype="url"name="user_date"required="required"/><br/>

验证邮箱地址：<br/> <inputtype="email"name="user_email"required="required"/><br/> <inputtype="submit"value="提交"/> </form></body>创建了URL地址输入框，type属性值为url，如果在此输入的不是网站地址，当单击提交按钮时，会弹出错误提示。required属性值为“required”，表示该项不能为空，用户如果没填写这一项，就单击“提交”按钮，将弹出提示信息。创建了email地址输入框，type属性值为email，如果在此输入的不是邮箱地址，在提交表单时，会弹出错误提示。表单高级元素【例5-6】验证URL地址和email地址的功能实例，代码如下所示（示例文件5-6.html）。在chrome浏览器中预览三项目实施利用所学的表单知识制作网上银行注册页面，如图所示。<styletype="text/css"> caption{ font-size:24px; line-height:50px; } td{height:30px;}</style>三项目实施启动Sublime程序，新建并保存文件名称为5-7.html。第一步第二步Head标签内的CSS代码输入如下：设置了表格标题的样式：文字大小为24像素；标题文字行高为50像素。设置了单元格的样式，高为30像素。三项目实施第三步在body标签中，先插入form表单，再在form表单中插入10行2列的表格，在表格中填写内容。<formmethod="post"action=""> <tablewidth="600"border="0"cellspacing="0"cellpadding="0"> <caption>

中国XXX银行注册页面

</caption> <tr> <tdwidth="255px">注册卡/账户类型</td> <tdwidth="345px"> <inputtype="radio"name="type"value="standard"checked="checked"id="type_0"> <labelfor="type_0">标准卡/账户</label> <inputtype="radio"name="type"value="fast"id="type_1"> <labelfor="type_1">闪酷卡</label> </td> </tr> 创建了一个表单，将所有的表格以及表单元素都放在表单标签<form>中。创建表格标题。表格第一行，第二个单元格中是一个单选按钮组，包含两个单选项。三项目实施第三步 <tr> <td>请输入注册卡（账）号</td> <td><inputtype="text"name="account"required="required"></td> </tr> <tr> <td>注册卡（帐）户密码</td> <td><inputtype="password"name="password"size="10"required="required"></td> </tr> <tr> <td>手机号码</td> <td><inputtype="text"name="telephone"></td> </tr> <tr> <td>证件类型</td> <td> <selectname="card"> <optionvalue="idcard"selected="selected">身份证</option> <optionvalue="certificate">军官证</option> </select> </td> </tr>表格第二行，第二个单元格中是一个文本框。表格第三行，第二个单元格中是一个密码框。表格第四行，第二个单元格中是一个文本框。表格第五行，第二个单元格中是一个列表框，包含两个列表项。三项目实施第三步 <tr> <td>请输入证件号码</td> <td><inputtype="text"name="card_number"required="required"></td> </tr> <tr> <td>请留下你的联系邮箱</td> <td><inputtype="email"></td> </tr> <tr> <td>选择您要开通的业务</td> <td> <inputtype="checkbox"name="business"value="business_0"id="business_0"> <labelfor="business_0">短信提醒</label> <inputtype="checkbox"name="business"value="business_1"id="business_1"> <labelfor="business_1">信用卡自动还款</label> <inputtype="checkbox"name="business"value="business_2"id="business_2"> <labelfor="business_2">支付宝</label> </td> </tr>表格第六行，第二个单元格中是一个文本框。表格第七行，第二个单元格中是一个email地址输入框。表格第八行，第二个单元格中是一个复选框组，包含三个复选项。三项目实施第三步 <tr> <td>个人备注信息</td> <td> <textareaname="textarea"cols="40"rows="5"></textarea> </td> </tr> <tr> <tdcolspan="2">

您确定注册并开通以上业务吗？

<inputtype="submit"name="button_0"value="提交"> <inputtype="reset"name="button_1"value="重置"> </td> </tr> </table></form>表格第九行，第二个单元格中是一个文本框。表格第八行，第二个单元格中是是两个按钮，一个提交按钮，另一个是重置按钮。三项目实施再次保存文件后，在页面中右击，从弹出的快捷菜单中选择“在浏览器中打开”命令，效果如图所示。第四步四项目拓展通过项目实施，表单以及表单元素的标签、属性已经基本掌握，如何能让表单在内容完整的同时又能美化一点呢？这就要结合css进行样式设置，此项目拓展制作如图所示的调查问卷。四项目拓展首先要创建一个大的div块，需要给块设置背景和边框，然后创建标题、表单以及具有布局作用的表格。第一步分析需求第二步Head标签内的CSS代码输入如下：<style> #layout{ width:700px; margin:0auto; background-color:#F6F6F6; border:2pxsolid#8FC629; } h1{ border-bottom:2pxsolid#8FC629; text-align:center; }设置了ID名为“layout”的div块样式，宽为700像素；居中显示；背景颜色灰色；边框为2像素的黄绿色实线边框。设置了标题h1的样式，下边框为2像素的黄绿色实线边框；文本对齐方式为居中对齐。四项目拓展第二步 h3{padding:10px;} table{width:500px;font-size:12px;} th,td{padding:3px;} th{text-align:right;} .textInput{ width:150px; height:20px; border:1pxsolid#58805f; } .textStyle{border:1pxsolid#58805f;} .submitBut{ width:100px; height:25px; margin:10px; font-weight:bold; border:2pxsolid#abd8b3; }</style>设置了标题h3的样式，内边距为10像素。设置了标题行单元格th，普通单元格的样式td内边距为3像素。设置了标题行单元格th的样式，文本右对齐。设置了表格table的样式，宽为500像素，字号为12像素。设置了类名为.textInput的姓名输入框和email地址框的样式，宽为150像素，高为20像素，边框为1像素的青色实线边框。设置类名为.textStyle的文本框边框为1像素的青色实线边框。设置了类名为.submitBut的按钮的样式宽为100像素；高为25像素；外边距为10像素；文字加粗；边框为2像素的青色实线边框。四项目拓展第三步<divid="layout"> <h1>几个有关Web标准的问题</h1> <h3>帮助我们更好的了解您对Web标准网页设计的想法与看法</h3> <formmethod="post"action=""> <tablecellspacing="0"cellpadding="0"> <tr> <th>您是否曾使用表格式布局？</th> <td> <labelfor="c1_0">是</label> <inputname="c1"type="radio"value="yes"id="c1_0"/> <labelfor="c1_1">否</label> <inputname="c1"type="radio"value="no"id="c1_1"/> </td> </tr> <tr> <th>您是否开始使用CSS布局？</th> <td> <labelfor="c2_0">是</label> <inputname="c2"type="radio"value="yes"id="c2_0"/> <labelfor="c2_1">否</label> <inputname="c2"type="radio"value="no"id="c2_1"/> </td> </tr>body标签内的HTML代码输入如下：表格的第一行，第二个单元格中是一个单选按钮组，name值为“c1”。表格的第二行，第二个单元格中是一个单选按钮组，name值为“c2”，包含两个单选项。四项目拓展第三步 <tr> <th>是否订阅CSS邮件？</th> <td> <inputname="submail"type="checkbox"value="sub"id="sub"/> <labelfor="sub">是的</label> </td> </tr> <tr> <th>您所从事的行业：</th> <td> <selectname="job"> <optionselected="selected"value="job_0">设计师</option> <optionvalue="job_1">程序员</option> <optionvalue="job_2">总监</option> <optionvalue="job_3">美术编辑</option> <optionvalue="job_4">项目经理</option> </select> </td> </tr>表格的第三行，第二个单元格中是一个复选框。表格的第四行，第二个单元格中是一个下拉列表框。四项目拓展第三步 <tr> <th>请留下您的姓名：</th> <td><inputtype="text"name="name"class="textInput"/></td> </tr> <tr> <th>请留下您的Email地址：</th> <td><inputname="email"type="text"class="textInput"/></td> </tr> <tr> <th>请留下您的建议：</th> <td><textareacols="40"rows="5"name="comment"class="textStyle"></textarea></td> </tr> </table> <inputtype="submit"value="提交"class="submitBut"/> </form></div>表格的第五行，第二个单元格中是一个文本框，用于输入姓名。表格的第七行，第二个单元格中是一个多行文本输入框，用于输入建议。表格的第六行，第二个单元格中是一个email地址输入框。定义了提交按钮。四项目拓展再次保存文件后，在页面中右击，从弹出的快捷菜单中选择“在浏览器中打开”命令，效果如图所示。第四步五项目小结本项目通过项目实施和项目拓展制作了银行注册页面和用css样式修饰过的调查问卷页面，学习了HTML中表单、各种表单元素以及一些高级属性的应用，也学习了一些CSS样式的新用法。五项目小结本项目知识点总结如表所示。标签属性说明formname表单名称action表单提交地址method提交表单的HTTP方法，取值为get或posttarget目标显示方式：_self、_blank、_parent、_topenctype编码方式inputtypetext单行文本框password密码checkbox复选框radio单选按钮button普通按钮submit提交按钮reset重置按钮image图像域file上传按钮hidden隐藏字段URLURL地址输入框emailemail地址输入框date日期选择框time时间选择框number数字输入框range滑条控件required必填项textarearows文本框的高度cols文本框的宽度selectselected下拉列表选中项value值六知识巩固一、单选题1.下列选项关于标签默认样式说法正确的是（）A.标题标签只是默认加粗B.段落标签默认带有外边距和内边距C.无序列表默认带有外边距和内边距D.input无默认样式2.input标签的值是用哪个属性来描述的？（）A.typeB.disabledC.idD.value3.在表单中，实现输入的数字只显示小圆点的type类型是（）A.te

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

温馨提示

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

最新文档

评论

0/150

提交评论