form表单

Posted 2020-10-02

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

输入限制

disabled	规定输入字段应该被禁用。
max	规定输入字段的最大值。
maxlength	规定输入字段的最大字符数。
min	规定输入字段的最小值。
pattern	规定通过其检查输入值的正则表达式。
readonly	规定输入字段为只读（无法修改）。
required	规定输入字段是必需的（必需填写）。
size	规定输入字段的宽度（以字符计）。
step	规定输入字段的合法数字间隔。
value	规定输入字段的默认值。

 

<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=”提交"> 

</form>

 

2.图片

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

<input type=”image” name=”submit” src=”btnSubmit.jpg”> 

</form>

 

 

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();