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>