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

推荐阅读更多精彩内容