Web前端——表單提交和Js添加選項

表單

表單提交

表單提交以後會將表單的數據以get或post方式，傳送到action要打開的頁面

方式1： 使用提交按鈕

<form action="" method="get" onsubmit="return check()">
    用戶名：<input type="text"><br>
    密碼： <input type="password"><br>
    <input type="submit" value="登陸"/>
</from>

方式2：使用js手動提交表單，this.form.submit() this可省略

<form action="" method="post" onsubmit="return check()">
    用戶名：<input type="text"><br>
    密碼： <input type="password"><br>
    <button type="button" onclick="this.form.submit">登陸</button>
</from>

onsubmit="true" 爲false，表單不可提交（點擊提交按鈕無效，不會跳轉頁面）

onsubmit="return check()";//在名爲check的js方法中進行表單元素的驗證（必填，用戶名是否合法，密碼等），返回true或false

表單添加選項

<form action="">
    <select name="city">
        <option value="1011">南寧</option>
        <option value ="1012">廣州</option>
    </select>
</form>

南寧 廣州

使用js動態添加選項：

<form action="">
            <select id="province">
                <option value="">--請選擇--</option>
            </select>
        </form>
        <script type="text/javascript">
        //json數據，能夠直接定義使用
            var data = [{
                id: 100,
                name: '廣東'
            }, {
                id: 101,
                name: '廣西'
            }, {
                id: 102,
                name: '雲南'
            }];
            var provinceEle = document.getElementById("province");
            for (let i = 0; i < data.length; i++) {
                //new Option() 參數爲選項的內容，參數2爲選項的value
                provinceEle.add(new Option(data[i].name, data[i].id));
            }
</script>