HT5LM+Less表单设计

技术与健康

于 2015-04-10 11:29:19 发布

阅读量987

点赞数 1

分类专栏： CSS HTML5 JavaScript

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/Practicer2015/article/details/44977177

版权

JavaScript 同时被 3 个专栏收录

12 篇文章 0 订阅

订阅专栏

CSS

4 篇文章 0 订阅

订阅专栏

HTML5

1 篇文章 0 订阅

订阅专栏

HTML5表单

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>CSS3 Web Form Design - 网页表单设计</title>

<!--<link rel="stylesheet" href="include/css/style.css" />-->
<link rel="stylesheet/less" href="include/less/style.less" />

<link href="http://fonts.googleapis.com/css?family=Sansita+One" rel="stylesheet" />

<script src="include/js/libs/modernizr.min.js"></script>
<script src="include/js/libs/jquery.min.js"></script>
<script src="include/js/script.js"></script>

</head>
<body>
 <div id="reg">
   <h2 title="注册">HTML5标准注册表单</h2>
   <form id="reg_form" action="#" method="post">
	<p>
     	<label for="u_name">姓名</label>
        <input id="u_name" name="u_name" type="text" placeholder="姓名" required/>
     </p>
     <p>
     	<label for="u_phone">电话号码</label>
        <input id="u_phone" name="u_phone" type="tel" placeholder="电话号码" required/>
     </p>
      <p>
     	<label for="u_mail">电子邮件</label>
        <input id="u_email" name="u_email" type="email" placeholder="电子邮件" required/>
     </p>
      <p>
     	<label for="u_site">网站</label>
        <input id="u_site" name="u_site" type="url" placeholder="网站"/>
     </p>
      <p>
     	<label for="u_pass">密码</label>
        <input id="u_pass" name="u_pass" type="password" placeholder="密码" required/>
     </p>
     
     <p id="accept">
     	<input id="accept_terms" name="accept_terms" type="checkbox"/>
     	<label for="accept_terms">
        	<strong><a href="#" rel="external" target="_blank">服务使用条款</a>
        	<a  href="#" rel="external" target="_blank">个人信息收集使用</a>我同意</strong>
        </label>
        
     </p>
     <p id="add_count">
      <button id="reg_new" type="submit" title="加入">+</button>
     </p>
   </form>
 </div>
 <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.0/less.min.js"></script>
</body>
</html>

chrome

firefox

从表单上元素看，chrome对h5的支持要好于firefox.

为必填字段加“*”的脚本

function addinputStar(){
	  var target = $('[required]','#reg');
	  
	  $('<span/>',{
		  
		  text:'*',
		  css:{'color':'#ff4248','font':'bold 12px Verdana',
		       'vertiacl-align':'middle','margin-left':'5px'}
		  
		  }).insertAfter(target);
	  
	  }