《使用HTML5实现响应式布局》第三章-HTML5表单-理论学习资料_第1页
《使用HTML5实现响应式布局》第三章-HTML5表单-理论学习资料_第2页
《使用HTML5实现响应式布局》第三章-HTML5表单-理论学习资料_第3页
《使用HTML5实现响应式布局》第三章-HTML5表单-理论学习资料_第4页
《使用HTML5实现响应式布局》第三章-HTML5表单-理论学习资料_第5页
已阅读5页，还剩19页未读， 继续免费阅读

付费下载

下载本文档

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

文档简介

第三章HTML5表单理论内容表单控件表单验证1.表单表单标签form是HTML5的一个重要组成部分，主要用于采集和提交用户输入的信息服务器表单提交反馈

表单form标签通常结合两个属性使用：action和method。action指明了处理表单信息的目标地址。method表示发送表单信息的方式，也可称为网页传值方式。其有两个属性值：get和post。get的方式是将表单控件的信息经过编码后，通过URL发送到目标地址，可以在地址栏中看到长串的数据，这是get方式的传值内容。而post则将表单的内容通过http协议封装后发送，在地址栏看不到表单的提交信息。通常，如果仅为取得和显示数据，则使用get传值；而一旦涉及数据的保存和更新，建议用post传值。2.

控件HTML5表单可以包含各种网页控件，这些网页控件帮助用户输入文字信息，或从选项中选择数据，以及完成提交操作的页面组件密码框文本框下拉框单选钮图片按钮提交按钮复选框表单HTML5表单常用控件的标签见下表表单控件标签写法说明<inputtype="text">单行文本输入框。使用的是input标签和type属性。<inputtype="submit">将表单中的信息提交给表单中action属性所指向的地址<inputtype="checkbox">复选框<inputtype="radio">单选钮<inputtype="password">密码输入框（输入的文字用*表示）<select>下拉框<textArea>多行文本输入框文本框单行文本输入框允许用户输入一些简短的单行信息<body>

<formaction="/s"method="get">请输入你查找的内容：

<inputtype="text"name="wd">

<inputtype="submit"value="提交到Baidu搜索">

</form></body>表单文本框将内容发送到百度搜索密码框密码输入框主要用于一些保密信息的输入，如密码。因为用户输入时，显示的不是输入的内容，而是“*”符号<form>请输入你的姓名：<inputtype="text"name="yourname">请输入你的密码：

<inputtype="password"name="yourpw"><inputtype="submit"value="提交"></form>密码框复选框复选框允许用户在一组选项中，选择多个数据<form>

<inputtype="checkbox"name="fruit"value="apple">苹果

<inputtype="checkbox"name="fruit"value="orange">桔子

<inputtype="checkbox"name="fruit"value="mango">芒果

<inputtype="submit"value="提交"></form>复选框单选钮使用单选钮，用户在一组选项中只能选择一个数据。<form>

<inputtype="radio"name="fruit"value="Apple">苹果<inputtype="radio"name="fruit"value="Orange">桔子<inputtype="radio"name="fruit"value="Mango">芒果<inputtype="submit"value="提交"></form>单选钮下拉框下拉框的标签是select，它既可以用于单选，也可用于复选<form>

<selectname="fruit"><optionvalue="apple">苹果</option><optionvalue="orange">桔子</option><optionvalue="mango">芒果</option>

</select><inputtype="submit"value="提交"></form>下拉框下拉选项多行文本框多行文本框的标签是textarea，它用于输入较长的文本信息<form>请提宝贵意见：<textareaname="suggest"

cols="50"rows="3"></textarea><inputtype="submit"value="提交"></form>多行文本框cols属性设置textarea的宽度，rows属性设置textarea的高度图片按钮显示图片的提交按钮<form>输入商品编号：<inputtype="text"name="yourname">

<inputtype="image"src="buy.gif"alt="提交"name="imagesubmit"></form>图片按钮src属性表示图片的路径数据列表使用datalist和list属性，开发人员能够为某个输入型控件构造一个选值列表。该列表本身并不显示，而是当文本框获得焦点时以提示输入的方式显示。当用户想要设定的值不在选择列表之内时，允许其自行输入数据列表数据列表datalist创建数据列表<form>

<inputtype="url"list="url_list"name="link"><datalistid="url_list"><optionlabel="Apple"value=""><optionlabel="Google"value=""><optionlabel="Microsoft"value="">

</datalist></form>数据列表3.表单验证表单在提交之前应该执行输入验证，以检查用户输入内容是否符合要求。如验证用户是否输入、比较两次输入的内容是否相同、输入内容的长度是否过长等。表单只能在输入符合要求的情况下才能提交。表单必填验证表单比较验证表单验证HTML5的表单验证必填验证类型匹配验证控制字符数量验证输入范围取消验证

必填验证required属性可应用于大多数input标签上。在提交时，如果元素中的内容为空白，则不允许提交，同时在浏览器中显示提示信息文字，提示用户该元素中必须输入内容<form>输入查询内容：<inputtype="text"required><inputtype="submit"value="提交"></form>必填验证类型匹配验证在HTML5中，增加了input标签的type属性值，可以使用这些type属性值实现基本的类型匹配功能<form>

URL：<inputtype="url">Email：<inputtype="email"><inputtype="submit"></form>验证url格式验证email格式控制字符数量可以使用maxlength属性设置输入字符的最大数量，以防止用户输入大量无效内容<form>用户：<inputtype="text"maxlength="5"><inputtype="submit"></form>最长输入5个字符验证输入范围min、max属性是数值类型或日期类型的input标签的专用属性，它们限制了在input标签中输入的数值与日期的范围<form>

Count：<inputtype="number"id="count"name="count"min="0"max="100"step="10"></form>输入0~100必须是10的倍数取消验证HTML5取消验证的用法<form>E-mail:<inputtype="email"n

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

温馨提示

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

最新文档

评论

0/150

提交评论