form表单

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了form表单相关的知识,希望对你有一定的参考价值。

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

 

以上是关于form表单的主要内容,如果未能解决你的问题,请参考以下文章

Form标签表单回显与提交

Oracle Forms Builder:无法执行查询

javascript对象

Drupal 自定义表单记住文本字段数据

form表单提交后,后台怎么处理数据

form.action传参之后servlet不能接收form表单数据,附上代码,求高手解决