玩转html5(三)---智能表单（form），使排版更加方便

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>form表单学习笔记</title>
</head>
<body><!-- 在旧版的html中，form表单与input等元素必须嵌套使用，为了排版方便，在html中提出了新方法 表单的多个内容不必非得放到一块，为前台美工提供了非常大的方便--><!-- 首先新建一个form表单，给其定义一个id --><form id="regForm">   邮箱 :<input type="email" name="user_email" autofocus="autofocus"/></form><!-- 然后定义一个其它标签，比方input，submit，关联这个id -->username：<input name="name" type="text" form="regForm"/><input type="submit" form="regForm"/><!-- 点击button时，按默认方式提交，能够在地址栏看到提交信息 --><!--  关于html5新增的一些input属性，在我的还有一篇文章这样的专门讲过，给大家个链接，在这里就不在赘述了。 -->http://blog.csdn.net/u012116457/article/details/24577509<!-- 下来讲一下新增的表单属性   -->1.属性：required  值：required  表单拥有该属性表示内容不能为空，为必填项<input name="name" type="password" required="required" form="regForm"/>    2.属性：placeholder 值：提示文本  表单的提示信息，若存在默认值则不显示<!-- 讲这个属性有必要先搞明确旧版本号中是怎么提示默认值的，旧版本号使用的是value属性 -->username：<input type="text" name="name" value="默认值" form="regForm"/><!-- 当点击提交时，若用户不正确其进行改动，会把“默认值”这三个字也传向后台，而我们往往不须要，html5为我们提供的这个新属性，假设用户不正确默认值进行改动，其内容将不会被提交 -->username：<input type="text" name="name" placeholder="默认值" form="regForm"/><!-- 在表现形式上也有所改变，大家能够自己试试 -->3.属性：autofocus 值：autofocus    自己主动聚焦属性，页面载入完毕后光标会自己主动聚焦到指定表单username：<input type="text" name="name" autofocus="autofocus" form="regForm"/>刷新页面后，光标会自己主动聚焦到该文本框中4.属性：Pattern 值：正則表達式   输入的内容必须匹配到指定正则<!-- 在以往的html中使用正则须要写到js等里边，html5中能够直接使用正則表達式，在html中就能够直接推断，是不是省了好多事情呢？ --><!-- 以下这个样例中正则的意思是仅仅能输入8位数字，在前台页面，若不符合规则，会提示格式不正确 -->学号：<input type="text" name="num" Pattern="\d{8}"/></body>
</html>

请珍惜小编劳动成果，该文章为小编原创，转载请注明出处。

玩转html5(三)---智能表单（form），使排版更加方便相关推荐

HTML5基础智能表单
语义化标签:主要用于移动端低版本浏览器不可用 section:页面中的一个内容区块与div作用一样 header:页面中一个内容区块或整个页面的标题 nav:页面导航链接部 ...
前端三十三:表单form
表单域是表单的区域,用来控制表单提交时候的数据访问. input标记文本框 &l ...
HTML5中的智能表单
新增类型在html5中给表单新添加了一些类型 ,大致可以分为以下几种: 数字类型跟数字强相关的类型,其中number.range在移动端开发时,会弹出数字键盘,而range是一个范围滑动块. &l ...
html5下拉智能,HTML5新增标签 + 智能表单
一.HTML5的新增语义标签 1. 全新语义化标签 :用来定义文档或应用程序中的区域或章节. :用来定义文档的主导航区域,其中的链接指向其他页面或当前页面的某些区域. 用来包裹独立的内容片段,通常用来 ...
html 表单自动数值,web前端学习技术之对HTML5 智能表单的理解
原标题:web前端学习技术之对HTML5 智能表单的理解 Html5新增input的form属性,用于指向特定form表单的id,实现input无需放在form标签之中,即可通过表单进行提交. - t ...
HTML5中新增的表单元素[智能表单]
[HTML5 智能表单] H5新增input的form属性,用于指向特定form表单的id,实现input无需放在form标签之中,即可通过表单进行提交. <FORM id=foo> - ...
html5 智能表单介绍
智能表单介绍 1.XHTML中需要放在form之中的诸如inpu/button/select/textarea等标签元素,在HTML5中完全可以放在页面任何位置,然后通过新增的form属性指向元素所属 ...
html5 智能表单验证
<!DOCTYPE html> <head> <meta charset=utf-8> <title>HTML5智能表单</title> & ...
django一个html先后两个form,Django教程（三）- Django表单Form
目录: 1.Form 基本使用 django中的Form组件有以下几个功能: 生成HTML标签验证用户数据(显示错误信息) HTML Form提交保留上次提交数据初始化页面显示内容 2.Form中 ...
HTML5 - 智能表单
智能表单 <!doctype html> <html lang="zh-CN"><head><meta charset="utf ...

玩转html5(三)---智能表单（form），使排版更加方便

玩转html5(三)---智能表单（form），使排版更加方便相关推荐

最新文章

热门文章