首页>>表单>>简单的html5表单验证,只前端没有服务器端(2015-01-03)

简单的html5表单验证,只前端没有服务器端

简单的html5表单验证,只前端没有服务器端
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <form action="">  
  2.   
  3.         <div class="form-title-row">  
  4.             <h1>Basics</h1>  
  5.         </div>  
  6.   
  7.         <div class="form-row">  
  8.             <label>  
  9.                 <span>Name</span>  
  10.                 <input type="text" name="name" required>  
  11.             </label>  
  12.         </div>  
  13.   
  14.         <div class="form-row">  
  15.             <label>  
  16.                 <span>Email</span>  
  17.                 <input type="email" name="email" required>  
  18.             </label>  
  19.         </div>  
  20.   
  21.         <div class="form-row">  
  22.             <label><span>Gender</span></label>  
  23.             <div class="form-radio-buttons">  
  24.   
  25.                 <div>  
  26.                     <label>  
  27.                         <input type="radio" name="gender" required>  
  28.                         <span>Male</span>  
  29.                     </label>  
  30.                 </div>  
  31.   
  32.                 <div>  
  33.                     <label>  
  34.                         <input type="radio" name="gender">  
  35.                         <span>Female</span>  
  36.                     </label>  
  37.                 </div>  
  38.   
  39.             </div>  
  40.         </div>  
  41.   
  42.         <div class="form-row">  
  43.             <label>  
  44.                 <span>I Agree To The Terms & Conditions</span>  
  45.                 <input type="checkbox" name="terms" required>  
  46.             </label>  
  47.         </div>  
  48.   
  49.         <div class="form-row">  
  50.             <button type="submit">Submit Form</button>  
  51.         </div>  
  52.   
  53.         <p class="explanation">This example demonstrates the simplest kind of form validation. Try it by attempting to submit an empty form.</p>  
  54.   
  55.     </form>  

 


原文地址:http://www.freejs.net/article_biaodan_453.html