因为自己在一些表单中的一些应用和操作中有时候会出现一些问题，所以在这里就做一些记录。方便以后查阅。
😜HTML表单中的控件主要有以下：
input
- 文本框
<input type="text"> - 单选框
<input type="radio">name值相同的为一组。 - 复选框
<input type="checkbox"> - 按钮
<input type="button"> - 提交按钮
<input type="submit">含有这个的表单按回车键会提交表单。 - 口令
<input type="password">会以密文设置。
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
😒关于label的使用技巧。
- label中的for属性与表单元素中的id一一对应。
🐱🚀 关于获取值。
// <input type="text" id="email">
var input = document.getElementById('email');
input.value; // '用户输入的值'
以上的方式可以获取很多表单元素的value值，而select中的value值表示的是当前被选择的option的value值，如果当前被选中的option没有value值，就是当前被选中更多option的text值。
但是，对于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'
👀关于设置值
/ <input type="text" id="email">
var input = document.getElementById('email');
input.value = 'test@example.com'; // 文本框的内容已更新
checkbox和select也是直接设置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对象： var myselect=document.getElementById("test");
2：拿到选中项的索引：var index=myselect.selectedIndex ; // selectedIndex代表的是你所选中项的index
3:拿到选中项options的value： myselect.options[index].value;
4:拿到选中项options的text： myselect.options[index].text;
或者通过选择符：
var c = document.querySelector('select').value
document.querySelector(`option[value=${c}]`)
💥 关于select选择框脚本的value值如何确定？
image.png
文本输入框的一些区别
设置长度以及默认的初始值的方式不一样。
如下所示：
<input type='text' max-length='250' value='hhhhh' value><textarea cols='29' rows='67'>hhhhh</textarea>
但是都可以通过 ele.value来设置默认的value值。
🤢 如何获取select multiple时被选中的所有的option。（说实话，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')
阻止表单重复提交的方法
可以使用e.preventDefault()来阻止表单向后台提交数据的请求。
form.submit（）不会触发form表单自身的submit事件。
表单元素的公有事件
blur 当前元素失去焦点的时候focus 当前元素焦点的时候-
change 当前元素改变内容且失去焦点的时候触发。
❗❗❗❗❗❗ 关于blur和change 事件，并没有严格规定哪一个先执行，有的浏览器是blur事件会优于change事件执行，有的浏览器是change事件会优于blur事件执行。
表单元素的共有字段
blur() 当前元素自动失去焦点focus() 当前元素获取焦点
