JS的表单1

Posted 阿鸠

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS的表单1相关的知识,希望对你有一定的参考价值。

一、获得表单引用

  1. 通过直接定位的方式来获取

    document.getElementById();
    document.getElementsByName();
    document.getElementsByTagName();

  2.通过集合的方式来获取引用

    document.forms[下标]
    document.forms["name"]
    document.forms.name

  3.通过name直接获取“(只适用于表单)

    document.name

二、获得表单元素的引用

  1.直接获取
    document.getElementById();
    document.getElementsByName();
    document.getElementsByTagName();

  2.通过集合来获取
    表单对象.elements 获得表单里面所有元素的集合
    表单对象.elements[下标]
    表单对象.elements["name"]
    表单对象.elements.name
  3.直接通过name的形式

    表单对象.name

三、表单元素共同的属性和方法

  1.获取表单元素的值
    表单元素对象.value 获取或是设置值

  2.属性
    disabled 获取或设置表单控件是否禁用 true false

    form 指向包含本元素的表单的引用

  3.方法
    blur()失去焦点
    focus() 获得焦点

四、对表单对象进行操作
  1、input radio

    新建option:var opt = new Option("text", "value") 
  2、select
    删除option:form.select.remove(i)

 

 

下面是我的一些代码例子和代码的注释




<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form name="form" id="form"> <input type="text" id="text" value=""/> <input type="text" id="text" value=""/> <input type="text" id="text" value=""/> <input type="submit" value="提交"/> <select> <option>hfdhsif</option> <option>hfdhsif</option> <option>hfdhsif</option> <option>hfdhsif</option> <option>hfdhsif</option> </select> </form> <script> //alert(document.getElementById("text").value);//在浏览器中才可以看到输出的效果 //var input=document.getElementById("text"); //var fm=document.getElementById("form"); //alert(fm.elements.length);//这里输出的是3 //通过这个属性fm.elements可以遍历所有的表单 //alert(fm.elements.value);//输出的内容不能被识别,因为有三个 var fm=document.getElementById("form");
//这里输出表单的所有的value fm.onsubmit
=function f(){//表单自带了一个onsubmit的作用 for(var i=0;i<=this.elements.length;i++) { //利用form的属性,elements,通过一个for的循环输出的表单中的所有的值 //注意的是匿名函数的格式的在最后的一个大括号是有;分号的 alert(this.elements[i].value); }

   //这是可以验证表单是否被赋予一个值,

for(var i=0;i<=this.elements.length;i++) { //利用form的属性,elements,通过一个for的循环输出的表单中的所有的值 //注意的是匿名函数的格式的在最后的一个大括号是有;分号的 //alert(this.elements[i].value); if(!this.elements.value){ alert("请填写完整!!!"); return 0; } }

 




};
//这是一个匿名的函数方法 </script> </body> </html>

 

































以上是关于JS的表单1的主要内容,如果未能解决你的问题,请参考以下文章

js代码片段

js代码片段: utils/lcoalStorage/cookie

js常用代码片段(更新中)

js经常用到的代码片段

JavaScript笔试题(js高级代码片段)

VSCode自定义代码片段——JS中的面向对象编程