from元素用于组织所有表单部件，负责告诉浏览器把数据提交到哪里，方法是在action属性中提供一个URL。假如你只想在客户端使用JavaScript操作表单，那么只要在action属性中指定一个#即可
<input type=submit>
<input type=image>
<input type=reset>
<input type=button>
显示标准的可以单击的按钮，其中类型为submit的提交按钮用于收集表单数据，并将它们发送给指定目标；类型为image的图像按钮与提交按钮作用相同，但可以显示成一幅可以单击的图像而非按钮；类型为reset的重置按钮，用于清除用户的选择和已经输入的文本信息；而类型为button的按钮本身没有任何功能，但可以通过JavaScript给它赋予功能
客户端验证
服务器端验证
无论浏览器做不做验证，服务器端验证都是必不可少的。这是预防别有用心的人故意篡改数据的唯一途径
客户端验证是为访客提供方便，而服务器端验证才是确保数据正确性的
如果浏览器遇到了不认识的input元素类型，它就将其作为一个普通的文本框来处理
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> input:focus { background-color: #eaeaea; } ::-webkit-input-placeholder { color:#f00; } ::-moz-placeholder { color:#f00; } /* firefox 19+ */ :-ms-input-placeholder { color:#f00; } /* ie */ input:-moz-placeholder { color:#f00; } </style> <script> function validateComments(input) { if (input.value.length < 20) { input.setCustomValidity('You need to comment in more detail.'); } else { input.setCustomValidity(''); } } </script> </head> <body> <form action="#"> <fieldset> <legend>Contact Details</legend> <label for="name">Name <em>*</em></label> <input id="name" type="text" placeholder="ABC-123" pattern="[A-Z]{3}-[0-9]{3}" autofocus required> </fieldset> <fieldset> <legend>Personal Information</legend> <input type="email"> </fieldset> <fieldset> <legend>Pick Your Favorite Animals</legend> <textarea oninput="validateComments(this)"></textarea> <input type="number" min="2" max="10" step="0.1" value="3"> <input type="range" min="2" max="10" value="3"> </fieldset> <p><input type="submit" value="Submit Application"></p> </form> <progress value="50" max="200"></progress> <progress></progress> <meter min="5" max="70" value="28" low="30"></meter> <div contentEditable>You can edit this text, if you'd like.</div> </body> </html>