<!-- javascript_操作表單_原生 -->

<!--代碼1：-->
<label><input type="radio" name="weekday" id="monday" value="1"> Monday</label>
<label><input type="radio" name="weekday" id="tuesday" value="2"> Tuesday</label>
<script>
    var mon = document.getElementById(‘monday‘);
    var tue = document.getElementById(‘tuesday‘);
    mon.value; // ‘1‘
    tue.value; // ‘2‘
    mon.checked; // true或者false
    tue.checked; // true或者false
</script>
<!-- 代碼1解說：-->
<!-- 1.表單獲取值的.value方法 -->
<!-- 2.單選框和多選框獲取值用.checked方法 -->

<!-- 代碼2： -->
<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>
<!-- 代碼2解說： -->
<!-- 1. 第2種表單提交方式，form元素的submit()方法 -->

<!-- 代碼3： -->
<!-- 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...
    // 繼續下一步:
    return true;
}
</script>
<!-- 代碼3解說： -->
<!-- 1. 代碼3：第2種表單提交方式，這種方式是被推薦的 -->

<!-- 代碼4： -->
<!-- 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‘);
    // 把用戶輸入的明文變為MD5:
    md5_pwd.value = toMD5(input_pwd.value);
    // 繼續下一步:
    return true;
}
</script>
<!-- 代碼4解說： -->
<!-- 1. 沒有name屬性的數據不會被提交 -->

javascript_操作表單_原生