<form id='form' action='http://a-response-url' method="post"><!--maxlength 最大值  placeholder 占位符  autofocus 自动聚焦--><input type='text' name='name' size='20' maxlength='10' placeholder='initial' autofocus /><br /><input type='text' name='phone' size='3' maxlength='3' /><input type='text' name='phone' size='3' maxlength='3' /><input type='text' name='phone' size='4' maxlength='4' /><br /><!--旧版浏览器会自动设置type为text--><input type='email' name='email' required /><br /><select name='fruit'><option value='a'>apple</option><option value='b' selected>banner</option><option value='c'>color fruit</option></select><br /><textarea name='textbox' rows='5' cols='20' maxlength="50">textbox with maxlength</textarea><br /><button type='reset' id="resetBtn">reset</button><button type='submit' id="subBtn">submit</button>
</form>

// 获取表单元素
var form = document.getElementById("form");// 返回表单控件的个数
var eleNum = form.elements.length;// 返回控件中name="phone"的元素
var phone = form.elements["phone"];

// autofocus
var autofocusEle = form.elements[0];if (autofocusEle.autofocus !== true) {autofocusEle.focus();
}

// placeholder for ie\10 with jquery
if (!("placeholder" in document.createElement("input"))) {// focus and blur$("[placeholder]").on("focus", function () {if ($(this).val() === $(this).attr("placeholder")) {$(this).val("");}}).on("blur", function () {if ($(this).val() === "") {$(this).val($(this).attr("placeholder"));$(this).css("color", "graytext")}}).blur();// when submit dont send the placeholder value$("[placeholder]").parent("form").submit(function () {$(this).find("[placeholder]").each(function () {if ($(this).val() === $(this).attr("placeholder")) {$(this).val("");}});});
}

// 此方式将直接触发表单的提交行为而不做任何验证
// 所以在表单验证后可直接触发此事件，直接提交表单
// （html 中不能出现id=submit的元素，否则会产生混乱！）
document.getElementById("form").submit();

// ajax提交表单提供了更好的可控性，示例应用了jquery
$("#form").on("submit", function (e) {// 阻止浏览器的默认提交行为
    e.preventDefault();$.ajax({type: "post",url: $(this).attr("action"),data: $(this).serialize(),    // 模拟浏览器的成功控件刷选逻辑，搜罗键值对  （注意：name属性相同时会同时发送！这是checkbox的逻辑）                                      // "name=%EF%BF%A5dd&phone=aa&phone=bb&phone=cc&email=kui_002%40126.com&fruit=b&textbox=textbox+with+maxlen%0D%0Agth"error: function () {},success: function (res) {}})
});