因?yàn)樽约涸谝恍┍韱沃械囊恍?yīng)用和操作中有時(shí)候會(huì)出現(xiàn)一些問題诫硕，所以在這里就做一些記錄坷备。方便以后查閱虹蒋。
??HTML表單中的控件主要有以下：
input
- 文本框
<input type="text"> - 單選框
<input type="radio">name值相同的為一組蹋凝。 - 復(fù)選框
<input type="checkbox"> - 按鈕
<input type="button"> - 提交按鈕
<input type="submit">含有這個(gè)的表單按回車鍵會(huì)提交表單柠硕。 - 口令
<input type="password">會(huì)以密文設(shè)置工禾。
select下拉框
- 單選下拉框
<select></select>type值為select-one - 多選下拉框
<select multiple></select>type值為select-multiple
button
- 非提交按鈕
<button type='button'></button>type值為button - 提交按鈕
<button type='submit'></button>或<button></button>type值為submit - 自定義重置按鈕
<button type='reset'></button>type值為reset
??關(guān)于label的使用技巧。
- label中的for屬性與表單元素中的id一一對(duì)應(yīng)蝗柔。
???? 關(guān)于獲取值闻葵。
// <input type="text" id="email">
var input = document.getElementById('email');
input.value; // '用戶輸入的值'
以上的方式可以獲取很多表單元素的value值，而select中的value值表示的是當(dāng)前被選擇的option的value值癣丧，如果當(dāng)前被選中的option沒有value值槽畔，就是當(dāng)前被選中更多option的text值。
但是坎缭，對(duì)于checkbox和radio竟痰，要獲取其checked是為true還是false签钩，所以可以通過下面這種方式獲得：
// <input type="checkbox" id="email">
var input = document.getElementById('email');
input.checked; // 'true或者是false'
如果是select選擇框，則是按照下面這種方式：
<select name="test3" id="select" multiple>
<option >wwww</option>
<option value="yu1">wwww2</option>
<option value="yu2">www2w</option>
<option value="yu3">www1w</option>
<option value="yu4">ww4ww</option>
</select>
var options= document.querySelectorAll('select option');
options[0].selected; // 'true或者是false'
??關(guān)于設(shè)置值
/ <input type="text" id="email">
var input = document.getElementById('email');
input.value = 'test@example.com'; // 文本框的內(nèi)容已更新
checkbox和select也是直接設(shè)置checked和selected為true或者false就可以拉/
?? 如何獲取表單中checkbox為true的元素坏快。
<input class="messageCheckbox" type="checkbox" value="3" name="mailId[]">
<input class="messageCheckbox" type="checkbox" value="1" name="mailId[]">
//獲取方式
document.querySelector('.messageCheckbox:checked')
?? 如何獲取select下拉框中被選中的option.
<select name="test3" id="test">
<option >wwww</option>
<option value="yu1">wwww2</option>
<option value="yu2">www2w</option>
<option value="yu3">www1w</option>
<option value="yu4">ww4ww</option>
</select>
1:拿到select對(duì)象： var myselect=document.getElementById("test");
2：拿到選中項(xiàng)的索引：var index=myselect.selectedIndex ; // selectedIndex代表的是你所選中項(xiàng)的index
3:拿到選中項(xiàng)options的value： myselect.options[index].value;
4:拿到選中項(xiàng)options的text： myselect.options[index].text;
或者通過選擇符：
var c = document.querySelector('select').value
document.querySelector(`option[value=${c}]`)
?? 關(guān)于select選擇框腳本的value值如何確定铅檩？
文本輸入框的一些區(qū)別
設(shè)置長(zhǎng)度以及默認(rèn)的初始值的方式不一樣。
如下所示：
<input type='text' max-length='250' value='hhhhh' value><textarea cols='29' rows='67'>hhhhh</textarea>
但是都可以通過 ele.value來設(shè)置默認(rèn)的value值莽鸿。
?? 如何獲取select multiple時(shí)被選中的所有的option昧旨。（說實(shí)話，CSS選擇器真是萬能祥得。）
<select name="test3" id="test" multiple>
<option >wwww</option>
<option value="yu1">wwww2</option>
<option value="yu2">www2w</option>
<option value="yu3">www1w</option>
<option value="yu4">ww4ww</option>
</select>
// 獲取所有的被選中的
document.querySelectorAll('#test option:checked')
阻止表單重復(fù)提交的方法
可以使用e.preventDefault()來阻止表單向后臺(tái)提交數(shù)據(jù)的請(qǐng)求兔沃。
form.submit（）不會(huì)觸發(fā)form表單自身的submit事件。
表單元素的公有事件
blur 當(dāng)前元素失去焦點(diǎn)的時(shí)候focus 當(dāng)前元素焦點(diǎn)的時(shí)候-
change 當(dāng)前元素改變內(nèi)容且失去焦點(diǎn)的時(shí)候觸發(fā)级及。
?????? 關(guān)于blur和change 事件乒疏，并沒有嚴(yán)格規(guī)定哪一個(gè)先執(zhí)行，有的瀏覽器是blur事件會(huì)優(yōu)于change事件執(zhí)行饮焦，有的瀏覽器是change事件會(huì)優(yōu)于blur事件執(zhí)行怕吴。
表單元素的共有字段
blur() 當(dāng)前元素自動(dòng)失去焦點(diǎn)focus() 當(dāng)前元素獲取焦點(diǎn)
