H5表单

一、<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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值