H5表单-CSDN博客

一、<form>标签

用户填写表单进行提交后，将表单信息从浏览器传送到服务器，服务器处理后，将用户所需信息传送回浏览器，这样就实现了网页的交互性。

表单标签<form></form>在一般情况下，处理程序属性action和传送方式属性method，是必不可少的。

（1）处理程序属性——action

action属性存储的是处理表单的数据脚本或程序，这个值可以是程序或脚本的一个完整url。因为表单的处理程序定义的是表单要提交的地址，也就是表单中收集到的资料将要传递的程序地址。这个地址可以是绝对地址、相对地址，甚至是E-mail地址。当地址为E-mail地址时，表示程序运行后将表单收集到的内容以电子邮件的形式发送出去。

（2）名称属性——name

（3）传送方法属性——method

该属性定义的是：处理程序从表单中获得信息的方式，可取值GET和POST，他决定了表单已收集的数据是用什么方式发送到服务器。

method=“GET”：使用该方式提交表单，来访者输入的数据会附加在URL之后发送到服务器，速度快，但数据长度不能太长。method没有指定的情况下，一般默认为GET；

method=“POST”：使用该方式提交表单，表单数据会与URL分开发送，用户端的计算机会通知服务器读取数据，通常没有数据长度上的限制，缺点是速度慢。

（4）编码方式属性——enctype，当表单具有上传文件时，该属性必须为“multipart/form-data”。

（5）目标显示方式属性——target

二、表单的控件

（1）输入标签<input>

<input>标签可以选择以下属性：

1、文本框——text

2、密码域——password

3、单选按钮——radio

4、复选框——checkbox

5、普通按钮——button

6、提交按钮——submit

7、重置按钮——reset

8、图像域——image

9、隐藏域——hidden

10、文件域——file

（2）文本域标签<textarea>

文本域标签的属性有name、rows、cols和value。

（3）列表/菜单标签<select><option>

三、H5中新增的表单属性

（1）提示信息——placeholder

（2）是否保存输入值——autocomplete，与<datailst>标签与list属性共用

（3）自动获得焦点——autofocus

（4）单行文本框的提示——list

（5）数值输入范围——min和max

（6）输入值递增或递减的梯度——step

（7）必需属性——required

（8）email类型——email

四、表单序列化

利用表单字段的type属性，将信息的name和value整合。

（1）表单内选择框脚本的属性

获取表单，是通过document.form[index]来获取某个表单的。然后通过表单属性elements["元素名称"]，获取表单的区域。而对于选择框脚本来说，selectbox存在一个options属性，通过options属性，可以获得选择框下面的各项值。options下面又存在selectedIndex属性，用来获取被选中的选项。

例如：

var selectBox=document.form[0].elements["location"];

var option=selectBox.options[selectedIndex]

表单序列化里面，最麻烦的就是选择框脚本了。

//表单序列化
function serialize(form) {
    //定义变量存储信息
    let parts = [];
    let optValue;

    for (let i = 0; i < form.elements.length; i++) {
        let field = form.elements[i];        
        switch (field.type) {
            //判断有没有选择框
            case "select-one":
            case "select-multiplu":
                if (field.options.length) {
                    for (let j = 0; j < field.options.length; j++) {
                        let option = field.options[j];
                        if (option.selected) {
                            //判断option是否具有value属性
                            if (option.hasAttribute) {
                                optValue = (option.hasAttribute("value") ? option.value : option.text);
                            } else {
                                optValue = (option.attributes["value"].specified ? option.value : option.text);
                            }
                            parts.push(encodeURIComponent(field.name)+"="+encodeURIComponent(field.optValue));
                        }                        
                    }
                };
                break;
                case undefined:
                case "file":
                case "submit":
                break;
                default:
                if(field.name.length){
                    console.log("field.name",field.name);
                }                
        }
    }
    console.log("parts",parts)
    return parts;
}

返回的是part是数组。如果想要转化为字符串，就用parts.join("&");

为选择框添加一个新的选项，有两种方法。构造函数创建更简单一些。

function handleClick(){   
    var selectBox=document.forms[0].elements["location"];
    //添加选项
    var newOpt=document.createElement("option");
    newOpt.appendChild(document.createTextNode("Option text"));
    newOpt.setAttribute("value","Option value");
    selectBox.appendChild(newOpt);

    //构造函数创建
    var newOpt1=new Option("Option text","Option value");
    selectBox.appendChild(newOpt1);
    console.log(selectBox);
 
}

五、文本框脚本

<input>元素，value用来确定输入的初始值。size属性，用来显示能够显示的字符数。

<textarea>元素，用col属性和row属性。

select()方法，用来选中里面的文本。

转载于:https://www.cnblogs.com/qingshanyici/p/10682601.html