HTML 表單
1.單選按鈕 type="radio"
- 同一組的單選按鈕name屬性值必須一致，因為單選的排他性依靠的就是這個name
<!-- 下面兩個的name屬性都是game 他們只能選出其中的一個 -->
<input type="radio" name="game" value="LOL">英雄聯盟
<input type="radio" name="game" value="ra2">紅色警戒2
<!-- 下面兩個的name屬性都是game 他們只能選出其中的一個 -->
<input type="radio" name="sex" value="man">男
<input type="radio" name="sex" value="women">女
- 設置默認選中：添加 checked 屬性
<input type="radio" name="sex" value="man" checked>男
<input type="radio" name="sex" value="women">女
- JS獲取當前選中單選框的值
var radios = document.querySelectorAll('input[name=sex]')
function getVal(){
radios.forEach(item => {
if(item.checked){
console.log(item.value)
}
})
}
2.復選按鈕 type="checkbox"
- 請為同一組的按鈕設定相同的name
<input type="checkbox" name="game" value="LOL">英雄聯盟
<input type="checkbox" name="game" value="ra2">紅色警戒2
<input type="checkbox" name="game" value="kof">拳皇
- 設置默認選中：添加 checked 屬性
<input type="checkbox" name="game" value="LOL" checked>英雄聯盟
<input type="checkbox" name="game" value="ra2" checked>紅色警戒2
<input type="checkbox" name="game" value="kof">拳皇
- JS獲取當前選中復選框的值
var checks = document.querySelectorAll('input[name=game]')
function getVal(){
var arr = []
checks.forEach(item => {
if(item.checked) {
arr.push(item.value)
}
})
console.log(arr)
}
3.下拉菜單
- HTML示例代碼
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
- 說明：默認會選中第一個option，也可以自己設置默認選中的option（在要選中的option標簽中添加 selected 屬性）
<select name="cars" id="car">
<option value="volvo">Volvo</option>
<option value="saab" selected>Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
- JS獲取下拉菜單的值：哪個option被選中，他的value值就是select的value值
var select = document.querySelector('#car')
console.log(select.value)
4.fieldset標簽
- fieldset標簽會在相關表單元素周圍繪制邊框。
- 提示：legend 標簽為 fieldset 元素定義標題。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<style>
.wrap{width:600px;margin:20px auto;}
</style>
</head>
<body>
<div class="wrap">
<form action="">
<fieldset>
<legend>賬號注冊</legend>
<label>
用戶名：<input type="text" name="username" />
</label>
<br />
<label>
設置密碼：<input type="password" name="psw" />
</label>
<div>
性別：
<label><input type="radio" name="gender" value="男" checked>男</label>
<label><input type="radio" name="gender" value="女">女</label>
</div>
<div>
愛好：
<label><input type="checkbox" name="hobby" value="打球">打球</label>
<label><input type="checkbox" name="hobby" value="聽歌">聽歌</label>
<label><input type="checkbox" name="hobby" value="看電影">看電影</label>
</div>
<div>
<select name="city">
<option value=null>請選擇城市</option>
<option value="020">廣州</option>
<option value="021">上海</option>
<option value="0755">深圳</option>
<option value="010">北京</option>
</select>
</div>
</fieldset>
</form>
</div>
</body>
</html>
5.文件上傳 type="file"
- 要上傳文件的表單項時，則必須設置form標簽設置屬性和值 enctype="multipart/form-data"，不然提交上去的就是一個字符串（文件名）而不是文件，且必須設置 method="post"
- accept屬性：規定能夠通過文件上傳進行提交的文件類型，只是默認，非強制
- multiple屬性：規定輸入字段可選擇多個值，也就是可以選擇多個文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Test</title>
</head>
<body>
<form action="http://www.baidu.com" enctype="multipart/form-data" method="post">
<!-- 繪制邊框 -->
<fieldset>
<!-- 定義標題 -->
<legend>Test</legend>
<!-- 定義為多選，且只接受圖片文件 -->
<div>文件:<input type="file" name="userFile" multiple="multiple" accept="image/*"></div>
<div>
<input type="submit" value="提交">
</div>
</fieldset>
</form>
</body>
</html>
- 打印選中的文件
<script>
var submit = document.querySelector("[type=submit]")
// 監聽表單提交
submit.onclick = function(e){
e = e || event
var file = document.querySelector("[type=file]")
// value屬性值為第一個文件的文件路徑（字符串）
console.log(file.value)
// files屬性值為文件列表(數組)
console.log(file.files)
// 阻止默認事件
e.preventDefault()
}
</script>
-
可以看到：file控件的value屬性值只是一個虛擬的路徑，而files屬性值為文件列表(數組)。在這個文件列表的元素中，也只能得到被選中文件的文件名(files[i].name)，文件大小(files[i].size)和文件類型(files[i].type),無法得知文件具體的路徑。
-
PS：瀏覽器設計上處于安全角度考慮，是不允許讀寫本地文件的。所以我們通過file元素只能得到選中文件的文件名,具體的路徑無法得知，所以無法直接訪問這個文件。要想訪問選中的文件，要么前后端交互，上傳文件后再讓從后端獲取回來，要么使用FileReader對象——允許Web應用程序異步讀取存儲在用戶計算機上的文件（或原始數據緩沖區）的內容；此種方法可以優化圖片加載速度，減少方法一占用帶寬的問題；
-
美化按鈕file控件：設置file控件為隱藏，通過其他按鈕的點擊來觸發file控件的點擊事件。
<body style="padding:30px;">
<div>
<h5>美化后的file控件</h5>
<!-- 隱藏該控件 -->
<input type="file" accept="image/*" id="virtual" style="display: none;">
<!-- 通過其他按鈕來觸發該控件的點擊事件 -->
<button class="btn btn-primary" id="btn">上傳圖片</button>
</div>
<br>
<br>
<br>
<div>
<h5>原生的file控件</h5>
<input type="file" accept="image/*" id="file">
</div>
</body>
<script>
// 獲取隱藏的file控件
var virtual = document.querySelector("#virtual")
// 獲取按鈕
var btn = document.querySelector("#btn")
//監聽按鈕點擊
btn.onclick = function(){
//觸發隱藏的file控件的點擊事件
virtual.click()
}
</script>
6.enctype屬性
- enctype 屬性規定在發送到服務器之前應該如何對表單數據進行編碼
- 使用get方式提交，默認值為 application/x-www-form-urlencoded
- 使用post方式提交，默認值為 multipart/form-data
| 值 | 說明 |
|---|---|
| application/x-www-form-urlencoded | 在發送前編碼所有字符（默認），例如key1=a&key2=b，一般配合get方式提交字段 |
| multipart/form-data | 直接提交表單，一般用于post方法，在使用包含文件上傳控件的表單時，必須使用該值 |
| text/plain | 空格轉換為 "+" 加號，但不對特殊字符編碼。 |
7.form表單提交
- 提交地址：提交地址通過action屬性來設定，如果為空，則默認為當前頁面地址
<form action="http://www.baidu.com" method="post">
</form>
- form表單內的按鈕只要點擊，都會觸發表單的submit事件，可以通過代碼阻止默認行為
$('#btn').on('click',function(){
console.log('click')
//阻止觸發默認的submit事件
return false;
})
- form表單內的輸入框只要回車，也會觸發表單的submit事件，可以監聽按鍵事件阻止默認行為
<form action="" method="post" onkeypress="return event.keyCode != 13;"></form>
- 監聽form表單的提交：只要觸發submit事件，默認就會將表單內容發送給對應的服務器地址，可以通過代碼阻止默認行為
//監聽表單提交事件
$("form").submit(function(){
//打印表達內容
console.log($("form").serialize());
//阻止將表單內容發送給服務器
return false;
})
- PS:原生表單的提交會觸發頁面重載,重置地址為提交地址
浙公網安備 33010602011771號