Javascript学习笔记(详)(六)——表单

表单脚本

表单的基础知识

在javascript中,表单对应的是HTMLFormElement类型,继承自HTMLELement类型。独特的属性与方法:

  • acceptCharset:服务器能够处理的字符集;等价于HTML 中的accept-charset 特性。
  • action:接受请求的URL;等价于HTML 中的action 特性。
  • elements:表单中所有控件的集合(HTMLCollection)。
  • enctype:请求的编码类型;等价于HTML 中的enctype 特性。
  • length:表单中控件的数量。
  • method:要发送的HTTP 请求类型,通常是"get"或"post";等价于HTML 的method 特性。
  • name:表单的名称;等价于HTML 的name 特性。
  • reset():将所有表单域重置为默认值。
  • submit():提交表单。
  • target:用于发送请求和接收响应的窗口名称;等价于HTML 的target 特性。

通过documents.forms可以取得页面中所有表单,可以通过数值索引或name值来取得特定表单

提交表单
<!-- 通用提交按钮 -->
<input type="submit" value="Submit Form">
<!-- 自定义提交按钮 -->
<button type="submit">Submit Form</button>
<!-- 图像按钮 -->
<input type="image" src="graphic.gif">

阻止表单提交:

    let form = document.getElementById("myForm");
    form.addEventListener("submit", function (event) {
   
        event.preventDefault();
    })
	let form = document.getElementById("myForm");
    form.submit();//不会触发submit事件
重置表单
<!-- 通用重置按钮 -->
<input type="reset" value="Reset Form">
<!-- 自定义重置按钮 -->
<button type="reset">Reset Form</button>

阻止表单重置和利用javascript重置表单的操作与提交表单类似,只需将submit改为reset即可

表单字段

每个表单都有elements属性,是一个有序列表,包含表单的所有字段

let form = document.getElementById("form1");
//取得表单中的第一个字段
var field1 = form.elements[0];
//取得名为"textbox1"的字段
var field2 = form.elements["textbox1"];
//取得表单中包含的字段的数量
var fieldCount = form.elements.length;
var form = document.getElementById("myForm");
var colorFields = form.elements["color"];
alert(colorFields.length); //3
var firstColorField = colorFields[0];
var firstFormField = form.elements[0];
alert(firstColorField === firstFormField); //true
共有的表单字段属性

除了fieldset元素之外,所有表单字段都拥有相同的一组属性:

  • disabled:布尔值,表示当前字段是否被禁用。
  • form:指向当前字段所属表单的指针;只读。
  • name:当前字段的名称。
  • readOnly:布尔值,表示当前字段是否只读。
  • tabIndex:表示当前字段的切换(tab)序号。
  • type:当前字段的类型,如"checkbox"、“radio”,等等。
  • value:当前字段将被提交给服务器的值。对于文件字段,这个属性是只读的,包含文件在计算机中的路径。
    let form = document.getElementsByTagName('form')[0];
    //alert(form);
    // let colorFields = form.elements['color'];
    // let list = Array(colorFields);
    // alert(list);
    let field = form.elements[0];
    field.value = "Another value";
    field.focus();
    field.disable = true;
    field.type = "checkbox";//不推荐,但对<input>可行
	let form = document.getElementsByTagName('form')[0];
    form.addEventListener("submit", function (event) {
   
        let target = event.target;
        let btn = target.elements['submit-btn'];
        btn.disabled =true;
    })
共有的表单字段方法

focus()blur()。focus()方法用于激活表单字段,使其可以响应键盘事件

    window.addEventListener("load", function (event) {
   
        document.forms[0].elements[1].focus();
    })

倘若是对<input type="hidden">的表单字段进行上述操作将会导致错误,通过CSS的display和visibility属性隐藏该字段都会导致错误

   //自动对焦
   window.addEventListener("load", function (event) {
   
        let element = document.forms[0].elements[0];
        if(element.autofocus === true){
   
            element.focus();
            console.log("JS focus");
        }
    })

blur()方法则相反

共有的表单字段事件
  • blur:当前字段失去焦点时触发。

  • change:对于<input><textarea>元素,在它们失去焦点且value 值改变时触发;对于<select>元素,在其选项改变时触发。

  • focus:当前字段获得焦点时触发。

    let textbox = document.forms[0].elements[0];
    textbox.addEventListener("focus", function (event) {
   
        let target 
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值