首页 > web前端 > html教程 > JavaScript 学习(2)表单元素_html/css_WEB-ITnose

JavaScript 学习(2)表单元素_html/css_WEB-ITnose

WBOY
发布: 2016-06-24 11:50:38
原创
919 人浏览过

##JavaScript 学习-2

1. 表单和表单元素

1.1 form对象

form对象的引用:document.forms[0]或者引用name属性,如:document.forms["formname"],也可以直接使用document.formname调用form对象

1.2 form表单属性和元素

name,target,action,method,enctype
赋值改变:document.forms[0].action或document.formName.action

获得form中的元素使用form.elements[],如下面将text值清零

var form=window.document.forms[0];for(var i=0;i<form.elements.length;i++){    if(form.elements[i].type=="text"){        form.elements.value="";    }}
登录后复制

1.3表单控件

  • 文本框 text,文本的最常用的属性是value属性,value属性的内容通常是一个字符串。
  • 按钮对象 button,主要是click处理事件
  • 复选框对象checkbox,属性为checked,布尔类型
  • 单选按钮对象 radio,设置该对象时候需要设置为相同的name,获取单选按钮对象的数量可以使用document.forms[0].groupName.length,检测是否高亮选择使用document.forms[0].groupName[0].checked
  • select对象,select对象是符合对象一个包含了option对象数组的对象,访问方法如下document.forms[0].selectName.selectedIndex获得当前选择的下标,document.forms[0].selectName.options[n].text和document.forms[0].selectName.options[n].value,其中text属性是select对象显示的字符串,可以使用onchange事件处理器,比如我们常见的下拉后选择网站后直接导航。
  • <html><head><title></title><script type="text/javascript">function goThere () {    var list=document.forms[0].urlList;    location.href=list.options[list.selectedIndex].value;}</script></head><body><form name="radiolist">    <select name="urlList" onchange="goThere()">    <option selected value="http://www.baidu.com">baidu    <option value="http://www.qq.com">qq    </select></form></body></html>
    登录后复制

    1.4向函数传递表单数据和元素

    javaScript提供了一个关键字this,它通常指向对象,这个对象包含使用这个关键词的脚本,因此,在一个文本域的onchange事件处理器中,可以使用this作为关键词为函数的参数如

    function upperMe(field){ //dosomething }

    每个控件都有一个指向所含的表的属性,故可以这么写this.form获取该form

    <html><head><title>js_4</title><script type="text/javascript">function processData (formthis) {    for(var i=0;i<formthis.Beatles.length;i++){        if(formthis.Beatles[i].checked){            break;        }    }    var beatle=formthis.Beatles[i].value;    var song=formthis.song.value;    alert("chcecking whether "+song+" feature in " +""+beatle);}function varifySong(entry){    var song=entry.value;    alert("checking whether "+song+" is a beatles tunes");}</script></head><body><form onsubmit="return false"><p>choose your favoriate Beatle:<input type="radio" name="Beatles" value="Jhon" checked>John<input type="radio" name="Beatles" value="Markey">Markey</p><p> input your song name:<br><input type="text" name="song" value="song search" onchange="varifySong(this)"><input type="button" name="process " value="process requset..." onclick="processData(this.form)"></p></p></form></body></html>
    登录后复制

    这段代码有一个比较特殊的逻辑,实验后能发现,在输入框输入之后,点击process requeset之后我们可以看到首次触发是文本框的onchange事件,而process requeset的事件并没有执行。因为text onChange事件的触发是在text离开焦点就触发了,所以在点击text之外的任何的地方都会先触发onChange事件,而按钮的单击在第二次点击后才能执行。这就是组合验证。

    1.5提交和验证表单

    onsubmit事件处理必须求值得到return true才允许继续提交,或者return false阻止提交。

    <html><head><title>js_5</title><script type="text/javascript">    function checkForm(fomr1){        for (var i = 0; i < fomr1.elements.length; i++) {            if(fomr1.elements[i].type=="text" &&fomr1.elements[i].value==""){                alert("fill all the name");                return false;            }        };    }</script></head><body><form onsubmit="return checkForm(this)">Please enter all requested information:<br>FirstName: <input type="text" name="FirstName"><br>LastName :<input type="text" name="LastName"><br><input type="submit"></form></body></html>
    登录后复制

    来源:php.cn
    本站声明
    本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
    热门教程
    更多>
    最新下载
    更多>
    网站特效
    网站源码
    网站素材
    前端模板