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>