js表单元素

表单Form的属性和方法

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

HTMLFormElement独有以下属性和方法：

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)按钮

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

disabled是否可用，
form字段所属表单，
name字段名称，
readOnly是否只读，
tabIndex字段切换序号，
type字段类型(控件类型)，
value字段的值，
checkValidity字段是否有效，
focus()聚焦，
blur()失去焦点函数，

代码示例：

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”

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","
");break;
            case "text":hintdiv.insertAdjacentHTML("beforeend",reader.result);break;
        }
    };
};

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

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

选择框元素，option、select

select 选择框属性和方法：

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

option选项属性：

index选项索引，
label选项标签，
selected是否被选中，
text选项的文本，
value选项的value值

示例代码

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按钮

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

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

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

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

不发送禁用的表单字段；

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

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

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

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

function serialize(form) {
    var arrs = [],
    field = null,
    i,
    len,
    j,
    optLen,
    option,
    optValue;
    for(i = 0,len = form.elements.length; i < 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 < 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("&");
}

测试代码

var formId = document.getElementById("formId");
console.log(serialize(formId));