[表单 form] 关于表单的一些总结记录

因为自己在一些表单中的一些应用和操作中有时候会出现一些问题，所以在这里就做一些记录。方便以后查阅。

😜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() 当前元素获取焦点