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>