JS-表单元素操作

Posted 2020-11-26 是非_大道克己

表单元素操作

获取表单

//获得表单的方式有3种

//1 利用表单在文档中的索引或表单的name属性来引用表单

    let formList = document.forms;
    //获得表单的集合

    let formObj =formList[1];
    let formObj = formList[‘表单name名称‘];
    // 通过表单的索引来说的表单对象 或者 表单的name属性来引用表单


//2 利用表单的id属性来引用表单

    let formObj = document.getElementById("表单id值");

//3 使用document.表单名来引用表单（最常用的）    

    let formObj = document.表单name属性值;

获得表单域元素

表单域包含了文本框、多行文本框、密码框、隐藏域、复选框、单选框和下拉选择框等，

用于采集用户的输入或选择的数据

//获得表单域的方式的方式有三种

//1  利用表单域在表单域集合中的索引或表单域的name属性来引用表单域

    let formObj =document.表单name属性值;
    //获得表单对象

    let elsList =   formObj.elements
    //获得表单域（表单元素）集合
    
    let ele = elsList[1];
    let ele = elsList[表单元素name属性值]
    //通过元素在表单中的位置(只算表单元素，从0开始) 或者 表单的name属性值
    
//2  利用表单域的id属性来引用表单域
    
    let selectObj = document.getElementById(‘表单域中id属性的值‘);

//3  使用表单.表单域名来引用表单域 (推荐)

    let selectObj = document.表单的name属性.表单域元素的name属性;
    // 如果name的值相同  则 返回一个元素的数组，例如复选框

对文本框元素进行脚本编写

1.使用 <input> 元素表现单行文本框。

1. 使用input方式，必须添加type，设置为“text”。

2. name( 后台可以根据name属性获得输入框中的value的值)

3. size特性:可以指定文本框内能够显示的字符数。

4. value属性:可以设置文本框的初始值。

5. maxlength特性:则是用于指定文本框内可以接受的最大字符数

2.使用 <textarea> 元素表现多行文本框

1. textarea的初始值则必须放在开始和结束标签之内。

2. name( 后台可以根据name属性获得输入框中的value的值)，

3. rows是文本框字符行数；

4. cols是文本框字符列数；

5. 不能在html中给textarea指定最大字符数；

 

获得文本框中的值和设置文本框中的值：value属性可以获得和设置文本框的值

*多行文本域的初始值 必须写在 <textarea></textarea>标签之间*

 

选择文本/onselect事件

上述两种文本框都支持

1. select()方法，这个方法主要用于选择文本框中的所有文本。不接受任何参数

2. 与这个方法对应的select事件，在选择了文本框中的文本时事件触发

触发select事件

1. 一般情况下只有用户选择了文本，就会触发select事件；

2. 在调用select()方法时也会触发；

取得选择的文本

HTML5 中添加了两个属性：selectionStart 和 selectionEnd。它们保存的是被选中的文本字符的下标（字符串本身就是一个字符数组），也就是表示所选择文本的范围（文本选区开头与结尾的偏移量）。

 

复选框和单选框进行脚本编写

<input>标记中有两种选择框

1. 单选框: <input type="radio">

2. 复选框: <input type=“checkBox">

checked属性 : 选择框是否被选中 true/选中 ：false/未选中

//操作单选框和复选框 主要是 操作他们的 checked 属性
    
    let checkboxList = document.querySelectorAll("input[type=‘checkbox‘]");
    //获得复选框对象集合

    //查看选中的元素
    for(let checkboxObj of checkboxList){
        if(checkboxObj.checked){
        //查看复选框的状态是否被选中，单选框的查看方式相同
            console.log("被选中"); 
        }
    }
    
    //设置全选
    for(let checkboxObj of checkboxList){
        checkboxObj.checked = true;
        //通过使checked为true 来达到选中的效果
    }

 

 

列表框和组合框进行脚本编写

//下拉菜单 select 

//1 单选的下拉菜单
    <select name="" id="select">
            <option value=""></option>
    </select>
//2 多选的下拉菜单,添加multiple属性
    <select name="" id="selects" multiple>
            <option value=""></option>
    </select>


//获得下拉菜单对象
    let selectObj = document.querySelector("#select");
    //单选下拉
    let selectsObj= document.querySelector("#selects");
    //多选下拉
    
// 通过options 属性来获得该下拉菜单的选中对象集合(数组)
    let  optionList = selectObj.options;
    //单选下拉的option集合
    let  optionsList = selectsObj.options;
    //多选下拉的option集合

//单选下拉菜单 一般和 change事件一起使用
    selectObj.onchange=()=>{ 
        let index = selectObj.selectedIndex;
        //获得选中选项卡的下标
    }
    
    
//下拉框中的option是否被选择 selected     
    let optionsList = selectsObj.options;
    for(let optionObj of optionsList ){
        if(optionObj.selected){
            //optionObj.selected  如果被选中则返回true  每选择返回false  
        }
   }