【JS】表单元素的获取、事件发生

控制表单

获取表单元素

document.getElementById()

document.forms[?] form所在下标位置

document.forms['?'] form名字

document.? form名字

<form action="#" name="allcheckfm">
    <input type="button" id="allcheck" value="全选">
</form>

<form action="#" name="aa1" id="a1">
    <input type="text">
</form>


  <script>
    console.log(document.getElementById("a1"));
    console.log(document.forms[1]);
    console.log(document.forms['aa1']);
    console.log(document.aa1);
  </script>

获取表单域

document.getElementById()

表单.elements[?] 控件所在下标位置

表单.elements['?'] 控件名字

表单.? 控件名字

表单['?'] 控件名字

表单[?] 控件所在下标位置

<form action="#" name="allcheckfm">
    <label>选择</label>
    
<!--  1 -->    <input type="button" id="allcheck" value="全选">
<!-- a1 -->    <input type="checkbox" name="checkall" value="1"><label>1</label>
<!-- a2 -->    <input type="checkbox" name="checkall" value="2"><label>2</label>
<!-- a3 -->    <input type="checkbox" name="checkall" value="3"><label>3</label>
<!-- a4 -->    <input type="checkbox" name="checkall" value="4"><label>4</label>
<!-- a5 -->    <input type="checkbox" name="checkall" value="5"><label>5</label>
<!--  3 -->    <input type="text" name="txt">
    
</form>

<script>
    let fmm=document.forms[0];
    
    console.log(document.getElementById("allcheck"));	//1
    console.log(fmm.elements[1]);	//a1
    console.log(fmm.elements['checkall']);	//a*5
    console.log(fmm.txt);	//3
    console.log(fmm['txt']);	//3
    console.log(fmm[5]);	//a5
</script>

获取表单字段值

1.value

<form action="#" name="allcheckfm">
    <label>选择</label>
    
<!--  1 -->    <input type="button" id="allcheck" value="全选">
<!-- a1 -->    <input type="checkbox" name="checkall" value="1"><label>1</label>
<!-- a2 -->    <input type="checkbox" name="checkall" value="2"><label>2</label>
<!-- a3 -->    <input type="checkbox" name="checkall" value="3"><label>3</label>
<!-- a4 -->    <input type="checkbox" name="checkall" value="4"><label>4</label>
<!-- a5 -->    <input type="checkbox" name="checkall" value="5"><label>5</label>
<!--  3 -->    <input type="text" name="txt">
    
</form>

<script>
    let fmm=document.forms[0];
    
    console.log(document.getElementById("allcheck").value);	//1  （全选）
    console.log(fmm.elements[1].value);	//a1	（1）
    console.log(fmm.elements['checkall'].value);	//a*5	（）类数组
    console.log(fmm.txt.value);	//3		（）没有值为空字符串
    console.log(fmm[5].value);	//a5	（5）
</script>

2.特殊属性t/f

• 没有值的属性。有属性就有效果

checked

• 选中

selected

• 下拉选中

multiple

• 下拉列表可多选
• 按住shift\Ctrl

read-only

• 只读
• 值可以提交
• 只能用于输入框，text\password等

disabled

• 禁用
• 值不可提交
• 任意表单可用
• 通过js控制则值为t/f，查看和设置是否起作用

表单事件

提交事件

• 表单.onsubmit 表单提交触发事件
• 表单.submit() 提交表单函数功能

重置事件onreset

• 表单.onreset 表单重置触发事件
• 表单.reset() 重置表单函数功能

焦点事件onfocus

• 控件.onfocus 表单得到焦点触发事件

失焦事件onblur

• 控件.onblur 表单失去焦点触发事件

改变事件

• 控件.onchange
• 输入框的改变事件需要失焦后触发

oninput事件

• input独有事件，改变内容就会触发

Select表单事件

添加

1. innerHTML为select添加option
2. document.creatElement()/createTextNode()/?.appendChild()添加
3. 独有函数方法
   • let ? = new Option('内容','value值')
   • 表单.add(?)

删除

1. 表单.length -= ? 表单从最后删除？个option
2. 表单.remove(下标？) 根据下标删除option
   • 下标对应的option会跟着删除改变

获取选中值

单个

1. 控件.value 获取value值
2. 控件.option[控件.selectedIndex].text 获取文本内容

• 若是多个选中，则只获取第一个值

多个

• 循环，使用控件.option[?].selected 判断是否选中
• .value 值 .text 文本内容