HTML表單的輸入控件
文本框昆箕，對應的<input type="text">租冠，用于輸入文本；
口令框顽爹，對應的<input type="password">，用于輸入口令捏题；
單選框肉渴，對應的<input type="radio">，用于選擇一項循狰；
復選框券勺，對應的<input type="checkbox">，用于選擇多項昧识；
下拉框盗扒，對應的<select>缀去，用于選擇一項甸祭；
隱藏文本，對應的<input type="hidden">池户，用戶不可見，但表單提交時會把隱藏文本發(fā)送到服務器赊抖。
獲取值
// <input type="text" id="email">
var input = document.getElementById('email');
input.value; // '用戶輸入的值'
單選框和復選框
// <label><input type="radio" name="weekday" id="monday" value="1"> Monday</label>
// <label><input type="radio" name="weekday" id="tuesday" value="2"> Tuesday</label>
var mon = document.getElementById('monday');
var tue = document.getElementById('tuesday');
mon.value; // '1'
tue.value; // '2'
mon.checked; // true或者false
tue.checked; // true或者false
設置值
// <input type="text" id="email">
var input = document.getElementById('email');
input.value = 'test@example.com'; // 文本框的內(nèi)容已更新
HTML5控件
常用的包括date氛雪、datetime耸成、datetime-local、color等
<input type="date" value="2015-07-01">
<input type="datetime-local" value="2015-07-01T02:03:04">
<input type="color" value="#ff0000">
提交表單
submit()方法
<!-- HTML -->
<form id="test-form">
<input type="text" name="test">
<button type="button" onclick="doSubmitForm()">Submit</button>
</form>
<script>
function doSubmitForm() {
var form = document.getElementById('test-form');
// 可以在此修改form的input...
// 提交form:
form.submit();
}
</script>
響應<form>本身的onsubmit事件
<!-- HTML -->
<form id="test-form" onsubmit="return checkForm()">
<input type="text" name="test">
<button type="submit">Submit</button>
</form>
<script>
function checkForm() {
var form = document.getElementById('test-form');
// 可以在此修改form的input...
// 繼續(xù)下一步:
return true;
}
</script>
這個做法看上去沒啥問題弦追，但用戶輸入了口令提交時花竞，口令框的顯示會突然從幾個變成32個（因為MD5有32個字符）。
不改變用戶的輸入寇仓，可以利用<input type="hidden">
<!-- HTML -->
<form id="login-form" method="post" onsubmit="return checkForm()">
<input type="text" id="username" name="username">
<input type="password" id="input-password">
<input type="hidden" id="md5-password" name="password">
<button type="submit">Submit</button>
</form>
<script>
function checkForm() {
var input_pwd = document.getElementById('input-password');
var md5_pwd = document.getElementById('md5-password');
// 把用戶輸入的明文變?yōu)镸D5:
md5_pwd.value = toMD5(input_pwd.value);
// 繼續(xù)下一步:
return true;
}
</script>
沒有name屬性的<input>的數(shù)據(jù)不會被提交
練習
用戶名必須是3-10位英文字母或數(shù)字烤宙；
口令必須是6-20位俭嘁；
兩次輸入口令必須一致。
<!-- HTML結構 -->
<form id="test-register" action="#" target="_blank" onsubmit="return checkRegisterForm()">
<p id="test-error" style="color:red"></p>
<p>
用戶名: <input type="text" id="username" name="username">
</p>
<p>
口令: <input type="password" id="password" name="password">
</p>
<p>
重復口令: <input type="password" id="password-2">
</p>
<p>
<button type="submit">提交</button> <button type="reset">重置</button>
</p>
</form>
'use strict';
var checkRegisterForm = function () {
var username = document.getElementById('username');
var password = document.getElementById('password');
var passwd_2 = document.getElementById('password-2');
var re = /[0-9a-zA-Z]*/;
if (username.value.length > 10 || username.value.length < 3) {
alert("false1");
return false;
} else if (!re.test(username)) {
alert("false2");
return false;
} else if (password.value.length > 20 || password.value.length < 6) {
alert("false3");
return false;
} else if (password.value != passwd_2.value) {
alert("false4");
return false;
} else {
alert("true");
return true;
}
}
// 測試:
;(function () {
window.testFormHandler = checkRegisterForm;
var form = document.getElementById('test-register');
if (form.dispatchEvent) {
var event = new Event('submit', {
bubbles: true,
cancelable: true
});
form.dispatchEvent(event);
} else {
form.fireEvent('onsubmit');
}
})();
