今天介紹下form表單提交經常用到的表單元素。
1：datalist元素，一般與input組建配合使用，以定義可能輸入的值，例如：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body>
<text>輸入你最喜歡的汽車</text> <input list="cars" /> <datalist id="cars"> <option value="BMW"> <option value="Ford"> <option value="Volvo"> </datalist> </body> </html>
可自行復制運行。
2：placeholder定義出現在輸入框內的提示文本
密碼：<input type="password" name="pwd2" id="pwd1" required placeholder="請輸入密碼" pattern="[a-zA-Z][a-zA-Z0-9]{10,20}" />
3:required的屬性，檢測輸入框內是否有內容。
4：autocomplete保護用戶敏感信息，如：輸入密碼的時候不進行顯示。
5：下列代碼對所介紹的屬性進行了一次運用，如有不懂請留言
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5 Forms</title> <style> *{margin:0;padding:0;} h1{ text-align: center; background:#ccc; } form{ /* text-align:center; */ } div{ padding:10px; padding-left:50px; } .prompt_word{ color:#aaa; } </style> </head> <body> <h1>用戶注冊表</h1> <form id="userForm" action="#" method="post" oninput="x.value=userAge.value"> <div> 用戶名：<input type="text" name="username" required pattern="[0-9a-zA-z]{6,12}" placeholder="請輸入用戶名"> <span class="prompt_word">用戶名必須是6-12位英文字母或者數字組成</span> </div> <div> 密碼：<input type="password" name="pwd2" id="pwd1" required placeholder="請輸入密碼" pattern="[a-zA-Z][a-zA-Z0-9]{10,20}" /> <span class="prompt_word">密碼必須是英文字母開頭和數字組成的10-20位字符組成</span> </div> <div> 確認密碼：<input type="password" name="pwd2" id="pwd2" required placeholder="請再次輸入密碼" pattern="[a-zA-Z][a-zA-Z0-9]{10,20}" /> <span class="prompt_word">兩次密碼必須一致</span> </div> <div> 姓名：<input type="text" placeholder="請輸入您的姓名" /> </div> <div> 生日：<input type="date" id="userDate" name="userDate"> </div> <div> 主頁：<input type="url" name="userUrl" id="userUrl"> </div> <div> 郵箱：<input type="email" name="userEmail" id="userEmail"> </div> <div> 年齡：<input type="range" id="userAge" name="userAge" min="1" max="120" step="1" /> <output for="userAge" name="x"></output> </div> <div> 性別：<input type="radio" name="sex" value="man" checked>男<input type="radio" name="sex" value="woman">女 </div> <div> 頭像：<input type="file" multiple> </div> <div> 學歷：<input type="text" list="userEducation"> <datalist id="userEducation"> <option value="初中">初中</option> <option value="高中">高中</option> <option value="本科">本科</option> <option value="碩士">碩士</option> <option value="博士">博士</option> <option value="博士后">博士后</option> </datalist> </div> <div> 個人簡介：<textarea name="userSign" id="userSign" cols="40" rows="5"></textarea> </div> <div> <input type="checkbox" name="agree" id="agree"><label for="agree">我同意注冊協議</label> </div> </form> <div> <input type="submit" value="確認提交" form="userForm" /> </div> </body> </html>