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

mywebcode

浏览: 1072664 次

最近访客更多访客>>

u012363178

qq_33632159

cshui

dd_9921

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (2181)

社区版块

存档分类

2014-04 ( 138)
2014-03 ( 64)
2014-02 ( 54)
更多存档...

玩转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 -->
          用户名：<input name="name" type="text" form="regForm"/>
                  <input type="submit" form="regForm"/>
          <!-- 点击按钮时，按默认方式提交，可以在地址栏看到提交信息 -->
    <!--  关于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属性 -->
                  用户名：<input type="text" name="name" value="默认值" form="regForm"/>
              <!-- 当点击提交时，若用户不对其进行修改，会把“默认值”这三个字也传向后台，而我们往往不需要，
              html5为我们提供的这个新属性，如果用户不对默认值进行修改，其内容将不会被提交 -->
                  用户名：<input type="text" name="name" placeholder="默认值" form="regForm"/>
              <!-- 在表现形式上也有所改变，大家可以自己试试 -->

          3.属性：autofocus 值：autofocus    自动聚焦属性，页面加载完成后光标会自动聚焦到指定表单
                  用户名：<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>

分享到：