首页 > 代码库 > html5 表单 自带验证
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="http://www.mamicode.com/White" label="1st Year"/> <option value="http://www.mamicode.com/Gray" label="2nd - 4th Year"/> <option value="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/White" label="1st Year"/> <option value="http://www.mamicode.com/Gray" label="2nd - 4th Year"/> <option value="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/Submit" onclick=" checkForm()"/></p> </form>
html5 表单 自带验证