js表单元素

  • A+
所属分类:JS、JQuery 编程技术

表单Form的属性和方法

在HTML中,表单为form元素,在javascript中,表单为HTMLFormElement元素,继承自HTMLElement。

HTMLFormElement独有以下属性和方法:

 

1
2
3
4
5
6
7
8
9
10
acceptCharset: 服务器能够处理的字符集;等价于HTML中的accept-charset特性;
action:  接收请求的URL,等价于HTML中的action
elements: 表单中所有控件的集合,进而可以通过索引或名称访问控件
enctype: 请求的编码类型;等价于HTML中的enctype特性;
length: 表单中控件的数量;
method: 要发送的http请求类型,一般是get或者是post,等价于HTML中的method;
name: 表单的名称;
reset(): 将所有表单域重置为默认值;
submit(): 提交表单;
target:用于发送请求和接收响应的窗口名称;

表单元素的属性和方法
表单标志的主要元素、属性如下:

//创建表单//创建滚动菜单,size设置在需要滚动前可以看到的表单项数目 //设置每个表单项的内容//创建下拉菜单 //设置每个菜单项的内容 //创建一个文本框区域,列的数目设置宽度,行的数目设置高度 //创建一个复选框,文字在标签后面 //创建一个单选框,文字在标志后面 //创建一个文件选择按钮 // 创建一个单行文本输入区域,size设置为字符串的宽度 //创建邮件格式的输入框 //创建网址格式的输入框 //创建提交(submit)按钮 //创建一个使用图像的提交(submit)按钮 //创建重置(reset)按钮

表单元素共有属性和方法:

1
2
3
4
5
6
7
8
9
10
disabled是否可用,
form字段所属表单,
name字段名称,
readOnly是否只读,
tabIndex字段切换序号,
type字段类型(控件类型),
value字段的值,
checkValidity字段是否有效,
focus()聚焦,
blur()失去焦点函数,

代码示例:

1
2
3
4
5
6
7
8
9
10
input1.onkeyup = function(event){
    var target = event.target;                                //获取事件目标元素,也就是this
    if(target.value.length == target.maxLength) {             //value字段的值,maxLength属性
        var form = target.form;                                 //form目标所属表单
        if(form.elements[1] && !form.elements[1].readOnly){    //elements表单元素集合,readOnly字段属性
            form.elements[1].focus();                           //focus字段函数-聚焦
            form.reset();                                       //表单函数-恢复默认
        }
    }
};

文件元素,input type=”file”

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
myfile.onchange = function(event){
    var files = event.target.files;
    var reader = new FileReader();                      //异步读取文件
    var type = "default";
    if(/image/.test(files[0].type)){                     //test判断是否匹配,"名称":files[0].name,"类型":files[0].type,"大小":files[0].size
        type  = "image";
        reader.readAsDataURL(files[0]);                   //readAsdataURL读取文件以数据URL的形式保存,readAsText以纯文本形式读取指定编码形式文件,readAsBinaryString读取文件成字符串,readAsArrayBuffer读取文件成数组
    }else{
        reader.readAsText(files[0]);
        type="text";
    }
    reader.onerror = function(){alert("读取文件出错"+reader.error.code);};
    reader.onprogress = function(event){                //每50ms更新一次进度
        if(event.lengthComputable)
            var rate = event.loaded/event.total;
        alert("加载比例"+rate);
    };
    reader.onload=function(){
        switch (type){
            case "image":hintdiv.insertAdjacentHTML("beforeend","<img src="&quot;+reader.result+&quot;" />");break;
            case "text":hintdiv.insertAdjacentHTML("beforeend",reader.result);break;
        }
    };
};

文本框元素,input type=”text”或textarea

1
2
3
text1.select();                                     //text和textarea文本内容被全部选择,会自动聚焦
text1.setSelectionRange(1,4);                       //选择部分文本,参数为起点和终点索引,会选中包含起点,但不包含终点的文本
console.log(text1.value.substring(text1.selectionStart,text1.selectionEnd-1));  //selectionStart选择的文本的起点,selectionEnd选择的文本的终点

选择框元素,option、select

select 选择框属性和方法:

1
2
3
4
5
6
selectedIndex选中项索引,
size选中框可见行数,
multiple是否允许多选,
options选项元素合集,
add(newoption,reloption),
remove(index)删除选项,

option选项属性:

1
2
3
4
5
index选项索引,
label选项标签,
selected是否被选中,
text选项的文本,
value选项的value值

示例代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var myselect = document.getElementById("myselect");
var newoption = document.createElement("option");               //创建选项元素
newoption.appendChild(document.createTextNode("第3个选项"));    //选项添加文本
newoption.setAttribute("value","myoption3");                    //选项添加value
myselect.appendChild(newoption);                                 //添加选项
newoption = new Option("第4个选项","myoption4");                //创建选项元素
myselect.appendChild(newoption);                                  //插入新选项
newoption = new Option("第5个选项","myoption5");                 //创建选项元素
myselect.add(newoption,undefined);                               //插入新选项
myselect.removeChild(myselect.options[0]);                       //options选项合集,removeChild删除子元素
myselect.remove(0);                                                //删除第一个选项,
myselect.options[0]=null;                                         //删除第一个选项,
myselect.insertBefore(myselect.options[1],myselect.options[0]); //调换选项位置
myselect.options[1].selected=true;                                //设置第二个选项被选中
var selectoption = myselect.options[myselect.selectedIndex];   //selectedIndex当前选中项索引
console.log(selectoption.text+selectoption.value);

表单提交

对于在提交前需要执行检验数据等函数的,可以使用以下两种方式。

1、仍然使用submit按钮

1
2
3
4
function 你的函数(){
     return false;//不提交
     return true;//提交
}

除了使用submit按钮提交外,这里介绍将表单序列化。将表单序列化为字符串,以get方式发送数据。

完成表单的序列化,主要实现下面几步

对表单字段的名称和值进行URL编码,使用&分割;

不发送禁用的表单字段;

只发送勾选的单选框和复选框按钮数据;

不发送type为reset和button的按钮;

多选选择框中的每个选中的值单独一个条目;

Select元素的值,就是选中option元素的value的值,如果option没有属性value,则是选中的文本值;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
function serialize(form) {
    var arrs = [],
    field = null,
    i,
    len,
    j,
    optLen,
    option,
    optValue;
    for(i = 0,len = form.elements.length; i &lt; len; i++) {
        field = form.elements[i];
        switch(field.type) {
            case "select-one":
               case  "select-multiple":
            if(field.name.length) {
                 for(j = 0,optLen = field.options.length; j &lt; optLen; j++) {
                       option = field.options[j];
                       if(option.selected) {
                           optValue = '';
                           if(option.hasAttribute) {
                               optValue = option.hasAttribute("value") ? option.value : option.text;
                           }else {
                               optValue = option.attributes["value"].specified ? option.value : option.text;
                           }
                           arrs.push(encodeURIComponent(field.name) + "=" +encodeURIComponent(optValue));
                       }
                   }
             }
            break;
            case undefined:      //字段集
            case "file":         // 文件输入
            case "submit":       // 提交按钮
            case "reset":        // 重置按钮
            case "button":       // 自定义按钮
            break;
 
            case "radio":        // 单选框
            case "checkbox":     // 复选框
            if(!field.checked) {
                break;
            }
            /* 执行默认动作 */
           default:
           // 不包含没有名字的表单字段
           if(field.name.length) {
               arrs.push(encodeURIComponent(field.name) + "=" +encodeURIComponent(field.value));
           }
       }
    }
    return arrs.join("&amp;");
}

测试代码

1
2
var formId = document.getElementById("formId");
console.log(serialize(formId));
  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: