Form 表单

一.元素

<input> type :text radio submit

<input type=’text’>单行文本

<input type="radio"> 定义单选按钮。

<input type="password"> 定义密码字段.

<input type="checkbox"> 定义复选框。

<input type="submit"> 定义用于向表单处理程序（form-handler）提交表单的按钮。

<select> 元素（下拉列表）添加 selected 属性来定义预定义选项。

<textarea> 元素定义多行输入字段（文本域）.

<button> 元素定义可点击的按钮.

Html5 新增输入类型

color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week

输入限制

<form action="action_page.php" method=”get”>

action规定向何处提交表单的地址（URL）（提交页面）。

method 规定在提交表单时所用的 HTTP 方法（默认：GET）

Name属性 规定识别表单的名称（对于 DOM 使用：document.forms.name）。

二.表单操作

提交：

1. submit

<form name=”form” method=”post” action=”#"> 

    <input type=”submit” name=”submit” value=http://www.mamicode.com/”提交"> 

</form>

2.图片

<form name=”form” method=”post” action=”# "> 

<input type=”image” name=”submit” src=http://www.mamicode.com/”btnSubmit.jpg”> >

3.js调用 onclick事件处理

<form name=”form” method=”post” action=”#”> 

    <div onclick=”javascript:form.submit();”> 

        <span>提交</span> 

    </div> 

</form>

获取所有表单元素：

$(selector).serialize()方法通过序列化表单值创建 URL 编码文本字符串

$(selector).serializeArray()方法通过序列化表单值来创建对象（name 和 value）的数组

$.param()将对象转换为字符串键值对格式（console.log($.param(obj));  // aa=1&bb=margy&cc=%E5%8D%97%E5%9B%BD）

表单验证（form验证）

 $(‘#loginform‘).on(‘submit‘, function (e) {

                var isValid = $(this).form(‘validate‘);

                if (!isValid){

                    e.preventDefault();

                }

            });

表单重置

$(‘#addCustomerForm‘)[0].reset();

form表单