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>