【javascript】表单的基础知识

表单的基础知识

• 在HTML 中，表单是由<form>元素来表示的，而在JavaScript中，表单对应的则是HTMLForm-
  Element 类型。
• HTMLFormElement 继承了HTMLElement，因而与其他HTML元素具有相同的默认属性。不过，HTMLFormElement 也有它自己下列独有的属性和方法。

属性/方法	含义
acceptCharset	服务器能处理的字符集
action	接受请求的URL
elements	表单所有控件的集合
enctype	请求的编码类型
length	表单中控件的数量
method	要发送的HTTP请求类型
name	表单的名称
reset()	将所有表单域重置为默认值
submit()	提交表单
target	用于发送请求或接收响应的窗口名称

//取得<form>元素引用
var form = document.getElementById("form1");

/**通过document.forms 可以取得页面中所有的表单,在这个集合中，可以通过数值索引或
name 值来取得特定的表单**/
var firstForm = document.forms[0]; //取得页面中的第一个表单
var myForm = document.forms["form2"]; //取得页面中名称为"form2"的表单

1、提交表单

• 用户单击提交按钮或图像按钮时，就会提交表单。使用<input>或<button>都可以定义提交按钮，只要将其type 特性的值设置为"submit"即可，而图像按钮则是通过将<input>的type 特性值设置为"image"来定义的。

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

• 以这种方式提交表单时，浏览器会在将请求发送给服务器之前触发submit事件。这样，我们就有机会验证表单数据，并据以决定是否允许表单提交。阻止这个事件的默认行为就可以取消表单提交。

//事件处理程序，方便后面使用
var EventUtil = {
    addHandler: function(element, type, handler){
        if (element.addEventListener){
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent){
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler;
        }
    },
    getEvent: function(event){
        return event ? event : window.event;
    },
    getTarget: function(event){
        return event.target || event.srcElement;
    },
    removeHandler: function(element, type, handler){
        if (element.removeEventListener){
            element.removeEventListener(type, handler, false);
        } else if (element.detachEvent){
            element.detachEvent("on" + type, handler);
        } else {
            element["on" + type] = null;
        }
    }
};

var form = document.getElementById("myForm");
EventUtil.addHandler(form, "submit", function(event){
//取得事件对象
event = EventUtil.getEvent(event);
//阻止默认事件
EventUtil.preventDefault(event);
});

• 在JavaScript 中，以编程方式调用submit()方法也可以提交表单。而且，这种方式无需表单包含提交按钮，任何时候都可以正常提交表单。

var form = document.getElementById("myForm");
//提交表单
form.submit();

• 提交表单时可能出现的最大问题，就是重复提交表单。解决这一问题的办法有两个：在第一次提交表单后就禁用提交按钮，或者利用onsubmit事件处理程序取消后续的表单提交操作。

/**提交表单后就禁用提交按钮**/
EventUtil.addHandler(form, "submit", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
//取得提交按钮
var btn = target.elements["submit-btn"];
//禁用它
btn.disabled = true;
});

<!--利用onsubmit事件处理程序取消后续的表单提交操作-->
<form name="form1" method="post" action="#" onsubmit="return checksubmit()">
    <label>
        <input name="myname" type="text" id="id">
    </label>
    <p>
    <label>
        <input type="submit" name="Submit" value="提交">
    </label>
    </p>
</form>

<script language="javascript">
function checksubmit()
{
    if (document.form1.myname.value=="")
    {
        alert("请输入开始数值！");
        document.form1.myname.focus();
        return false;
    } 
    return true; 
}
</script>

2、重置表单

• 在用户单击重置按钮时，表单会被重置。使用type特性值为"reset"的<input>或<button>都可以创建重置按钮。

<!-- 通用重置按钮 -->
<input type="reset" value="Reset Form">
<!-- 自定义重置按钮 -->
<button type="reset">Reset Form</button>

• 用户单击重置按钮重置表单时，会触发reset事件。利用这个机会，我们可以在必要时取消重置操作。

var form = document.getElementById("myForm");
EventUtil.addHandler(form, "reset", function(event){
    //取得事件对象
    event = EventUtil.getEvent(event);
    //阻止表单重置
    EventUtil.preventDefault(event);
});

• 可以通过JavaScript 来重置表单。

var form = document.getElementById("myForm");
//重置表单
form.reset();

3、表单字段

• 每个表单都有一个elements属性，该属性是表单中所有表单元素的集合。这个elements集合是一个有序列表，其中包含着表单中的所有字段。

var form = document.getElementById("form1");

//取得表单中的第一个字段
var field1 = form.elements[0];

//取得名为"textbox1"的字段
var field2 = form.elements["textbox1"];

//取得表单中包含的字段的数量
var fieldCount = form.elements.length;

<form method="post" id="myForm">
    <ul>
        <li><input type="radio" name="color" value="red">Red</li>
        <li><input type="radio" name="color" value="green">Green</li>
        <li><input type="radio" name="color" value="blue">Blue</li>
    </ul>
</form>

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

(1)共有的表单字段属性

• 除了<fieldset>元素之外，所有表单字段都拥有相同的一组属性。

属性名	含义
disabled	布尔值，表示当前字段是否被禁用
form	指向当前字段所属表单的指针；只读
name	当前字段的名称
readOnly	布尔值，表示当前字段是否只读
tabIndex	表示当前字段的切换序号
type	当前字段的类型
value	当前字段将被提交给服务器的值

• 除了form 属性之外，可以通过JavaScript 动态修改其他任何属性。

var form = document.getElementById("myForm");
var field = form.elements[0];

//修改value 属性
field.value = "Another value";

//检查form 属性的值
alert(field.form === form); //true

//把焦点设置到当前字段
field.focus();

//禁用当前字段
field.disabled = true;

(2)共有的表单字段方法

• 每个表单字段都有两个方法：focus()和 blur()。
• focus()方法用于将浏览器的焦点设置到表单字段，即激活表单字段，使其可以响应键盘事件。

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

• HTML5 为表单字段新增了一个autofocus属性。在支持这个属性的浏览器中，只要设置这个属性，不用JavaScript 就能自动把焦点移动到相应字段。

<input type="text" autofocus>

EventUtil.addHandler(window,"load",function(event){
    var element = document.forms[0].elements[0];
    if(element.autofocus !== true){
        element.focus();
        console.log("JS focus");
    }
})

• blur()方法，它的作用是从元素中移走焦点。

document.forms[0].elements[0].blur();

(3)共有的表单字段事件

• 除了支持鼠标、键盘、更改和HTML 事件之外，所有表单字段都支持下列3 个事件。

事件名	含义
blur	当前字段失去焦点时触发
change	对于input和textarea元素，在它们失去焦点并且value值改变时触发；对于select元素，在其选项改变时触发。
focus	当前字段获得焦点时触发

• 通常，可以使用focus和blur事件来以某种方式改变用户界面，要么是向用户给出视觉提示，要么是向界面中添加额外的功能。而change事件则经常用于验证用户在字段中输入的数据。

var textbox = document.forms[0].elements[0];

/**将文本框的背景颜色修改为黄色，以清楚地表明当前字段已经激活。**/
EventUtil.addHandler(textbox, "focus", function(event){
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    if (target.style.backgroundColor != "red"){
        target.style.backgroundColor = "yellow";
    }
});

/**在发现非数值字符时，将文本框背景颜色修改为红色。**/
EventUtil.addHandler(textbox, "blur", function(event){
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    if (/[^\d]/.test(target.value)){
        target.style.backgroundColor = "red";
    } else {
        target.style.backgroundColor = "";
    }
});

/**在发现非数值字符时，将文本框背景颜色修改为红色。**/
EventUtil.addHandler(textbox, "change", function(event){
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
    if (/[^\d]/.test(target.value)){
        target.style.backgroundColor = "red";
    } else {
        target.style.backgroundColor = "";
    }
});

好好学习