html5 表单自带验证

required="required" 必填

 placeholder="xxx-xxxx-xxxx" // 提示

pattern="d{3}-d{4}-d{4} //正则匹配

 autofocus    // 指针

 <fieldset>      
            <legend>Expectations:</legend> // 提示：<legend> 标签为 <fieldset> 元素定义标题。
            
 </fieldset>  //


<form name="register1" id="register1" method="post" action="/" >
          <p><label for="runnername">RunnerName:</label>
             <input id="runnername" name="runnername" type="text" placeholder="First and last name" required="required" autofocus/>

          </p>
          <p><label for="phone">Tel #:</label>
             <input id="phone" name="phone" type="text" pattern="d{3}-d{4}-d{4}"
                  required="required"  placeholder="xxx-xxxx-xxxx"/></p>
          <p><label for="emailaddress">E-mail:</label>
             <input id="emailaddress" name="emailaddress" type="email" 
                   required="required" placeholder="For confirmation only"/></p>
          <p><label for="dob">DOB:</label>
                         <input id="dob" name="dob" type="date"
        placeholder="MM/DD/YYYY"/></p>
          <p>Count:<input type="number" id="count" name="count" min="0" max="100" step="10"/></p>
          <p><label for="style">Shirt style:</label>
               <input id="style" name="style" type="text" list="stylelist" title="Years of participation" 
                autocomplete="off"/></p>
            <datalist id="stylelist">
             <option value="White" label="1st Year"/>
             <option value="Gray" label="2nd - 4th Year"/>
             <option value="Navy" label="Veteran (5+ Years)"/>
            </datalist>
           
         <fieldset>
            <legend>Expectations:</legend>
            <p>
            <label for="confidence">Confidence:</label>
            <input id="confidence" name="level" type="range"
                   onchange="setConfidence(this.value)"
                   min="0" max="100" step="5" value="0"/>
            <span id="confidenceDisplay">0%</span></p>
            <p><label for="notes">Notes:</label>
               <textarea id="notes" name="notes" maxLength="100"></textarea></p>
         </fieldset>
 
         <p><input type="submit" name="register" value="Submit" onclick=" checkForm()"/></p>
        </form>

<form name="register1" id="register1"> <p><label for="runnername">RunnerName:</label> <input id="runnername" name="runnername" type="text" placeholder="First and last name" required="required" autofocus/> </p> <p><label for="phone">Tel #:</label> <input id="phone" name="phone" type="text" pattern="d{3}-d{4}-d{4}" required="required" placeholder="xxx-xxxx-xxxx"/></p> <p><label for="emailaddress">E-mail:</label> <input id="emailaddress" name="emailaddress" type="email" required="required" placeholder="For confirmation only"/></p> <p><label for="dob">DOB:</label> <input id="dob" name="dob" type="date" placeholder="MM/DD/YYYY"/></p> <p>Count:<input type="number" id="count" name="count" min="0" max="100" step="10"/></p> <p><label for="style">Shirt style:</label> <input id="style" name="style" type="text" list="stylelist" title="Years of participation" autocomplete="off"/></p> <datalist id="stylelist"> <option value="White" label="1st Year"/> <option value="Gray" label="2nd - 4th Year"/> <option value="Navy" label="Veteran (5+ Years)"/> </datalist> <fieldset> <legend>Expectations:</legend> <p> <label for="confidence">Confidence:</label> <input id="confidence" name="level" type="range" onchange="setConfidence(this.value)" min="0" max="100" step="5" value="0"/> <span id="confidenceDisplay">0%</span></p> <p><label for="notes">Notes:</label> <textarea id="notes" name="notes" maxLength="100"></textarea></p> </fieldset> <p><input type="submit" name="register" value="Submit" onclick=" checkForm()"/></p> </form>

html5 表单 自带验证

html5 表单自带验证