第八次网页前端学习笔记

本文详细介绍了JavaScript如何获取和操作HTML表单及其元素,包括通过ID、name属性、下标以及标签名的方式。同时,讲解了获取单选按钮、下拉选项的方法,如检查选中状态、获取值和文本。此外,还涵盖了表单验证和提交的步骤,包括使用普通按钮和提交按钮提交表单的注意事项。
摘要由CSDN通过智能技术生成

获取表单


                1.document.getElementById("id属性值");
                    通过from标签的id属性值获取表单对象
                2.document.表单的name属性值;
                    通过表单的name属性值获取表单对象
                3.document.froms[下标];
                    通过指定下标获取表单元素
                4.document.forms[表单的name属性值];
                    通过表单的name属性值获取表单对象
                    
                document.forms:获取HTML文档中所有的表单对象


                
获取表单元素(多选按钮相同)


                1.获取input元素


                    1.document.getElementById("id属性值");
                        通过元素的id属性值获取表单元素对象
                    2.表单元素.表单元素的name属性值;
                        通过表单对象中对应的元素的name属性值获取
                    3.document.getElementByname("name属性值")
                        通过表单元素的name属性值获取
                    4.document.getElementByTagName("标签名/元素名");
                        通过标签名获取表单元素对象


                2.获取单选按钮


                    注:相同的一组单选按钮,需要设置相同的name属性值


                    1.document.getElementByName("name属性值");、
                        通过name属性值获取
                    2.判断单选按钮是否选中
                        checked选中状态
                        在JS代码中
                            checked=true 表示选中
                            checked=false 表示不选中
                        在HTML标签中
                            checked=checked或checked表示选中
                            不设置checked属性 表示不选中
                    3.获取单选按钮的值
                        元素.value;


                
获取下拉选项            


                1.获取下拉框对象


                    var 对象=document.getElementById("id属性值");


                2.获取下拉框的下拉选项列表


                    var options =下拉框对象.options;


                3.获取下拉框被选中项的索引


                    var 值 = 下拉框对象.selectedIndex;


                4.获取下拉框被选中项的值


                    var 值 = 下拉框对象.value;


                5.获取下拉框被选中项的文本


                    var 文本值=下拉框对象.options[index].text;


                    
提交表单


                        一、使用普通按钮 type="button"


                            1.给按钮绑定click点击事件,绑定函数
                            2.在函数中,进行表单校验(非空检验、合法性检验等)
                            判断字符串是否为空
                            function isEmpty(str){
                                if(str==null||str.trim()==" "){
                                    return true;
                                }
                                return false;
                            }
                            3.如果检验通过,则手动提交表单
                                表单对象.submit();


                        二、使用提交按钮 type="submit"


                            1.给按钮绑定click点击事件,绑定函数
                            2.函数需要有返回值,返回true或false(如果return false则表单不会提交;如果                              return true或不return,则表单提交)
                            3.在函数中。进行表单校验(非空校验、合法性校验)
                            4.如果校验通过,返回true;如果校验不通过,则返回false

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值