您的位置：首页 > Web前端 > HTML5

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

2014-09-24 19:47 411 查看

<!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>

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航