Js表单提交

表单提交对于刚开始学习js的朋友来说是一个比较困惑的问题。如何提交，如何防止默认提交，如何提交表单不跳转等。这里有一些例子。

的原始表单提交有按钮按钮提交和的类型。两者有什么区别？

(1)默认表单提交

(2)默认不会提交表单。

(3)如果在表单中，我们使用了type=”submit属性，但是不让表单默认提交，怎么办？看下面

(4)如果在表单中，我们使用type=”button属性，但还是需要提交表单，可以用ajax提交。好处是可以自己控制提交，页面不会跳转。

(5)如果使用默认提交方式，并且在提交前对表单进行了验证，请参考以下方法。

(6)如果使用了type=’button ‘属性，但仍想实现默认的提交方法怎么办？看下面

(7)下面的提交会怎么样？

分析:单击提交按钮:

(1)当表单验证失败时，form.submit()函数不会被触发，所以< form & gt的onsubmit句柄，由于句柄返回false，默认情况下不会从该句柄提交表单，因此当调用form.submit()时，将在控制台上打印出来的表单的onsubmit事件句柄将无效

(2)当表单验证成功时，表单。Submit()函数会被触发提交表单，而且因为form.submit()提交表单的方式和用户点击提交按钮的方式一样，但是不会调用表单的onsubmit事件句柄，所以控制台不会打印出表单的onsubmit事件句柄，调用form.submit()时会失效。

现在默认的表单提交方式基本没用了，是ajax异步提交。但是知道一些事情还是好的。。。

html中input标签能创建哪些表单？

HTML表单标签HTML 表单用于搜集不同类型的用户输入。r 一个完整的表单包含三个基本组成部分：表单标签、表单域、表单按钮。r 1. 表单标签HTML 表单用于收集用户输入，表单使用 标签创建。表单可包含文本字段、复选框、单选框、提交按钮等等。r 注意：元素是块级元素，其前后会产生折行。r

1.1form表单的属性

action=”url”：请求地址，指定form表单向何处发送数据。r name=”login”：作用是给表单起名，为了便于我们操作。r enctype =”string”：规定在发送表单数据之前，如何对表单数据进行编码。通常在使用文件上传时，我们会enctype=”multipart/form-data”，以二进制传输。r method =”get/post”：指定表单以何种方式发送到指定的服务器程序，该属性定义浏览器将表单中的数据提交给服务器处理程序的方式。关于method的取值，最常用的是get和post。r 2. 表单域要提交数据的表单域必须加name属性。不然，该表单域的数据不会提交到服务器上。r

2.1 <input>标签

input用于收集用户信息，根据不同的类型显示不同的形式。input是空标签，它没有结束标签，在开始标签中结束。r 元素根据不同的type属性，可以变化为多种形态。r 元素设置name属性，用于网络请求时提交对应输入的字段。r input=”text” 文本框r 定义单行的输入字段，用户可在其中输入文本。它是一个单行文本框，input的默认类型即是text类型。r

input=”password” 密码框r 类型为password时，它用于收集用户输入的密码，在你输入时，浏览器会把输入的内容以符号来代替。r

文本框和密码框都可以添加placeholder属性，用于设置输入字段预期值的提示信息。该提示会在输入字段为空时显示，并会在字段获得焦点时消失。r type=”radio” 单选框r 类型为radio时，用于定义单选按钮，name属性值相同的input单选框只能有一个被选中。r 设置默认选中的单选框。 是提交到服务器时给后台程序员们看的。r

type=”checkbox” 复选框r 类型为checkbox时，用于定义复选按钮，复选框允许用户在一定数目的选择中选取一个或多个选项。r

type=”file” 文件上传r 类型为file时，默认为单文件上传。r 设置为多文件上传。r

type=”hidden” 隐藏字段r 隐藏字段对于用户是不可见的。隐藏字段通常会存储一个默认值，它们的值也可以由 JavaScript 进行修改。r

2.2 <select> 下拉列表

<select> 元素定义下拉列表，<option>元素定义待选择的选项。列表通常会把首个选项显示为被选选项，通过添加 selected 属性来定义预定义选项。r

单选按钮、复选框默认选中用：checked属性。r 下拉列表使用：selected属性。r 使用size属性设置下拉列表展开，使用multiple属性设置多选。r

2.3 <textarea> 文本域

<textarea> 元素定义多行输入字段（文本域）r cols：规定文本区内的可见宽度。r rows：规定文本区内的可见行数。r

文本域可以添加placeholder属性，用于设置输入字段预期值的提示信息。r

2.4 <label> 标签

label是input的描述，它本身不会有特殊效果，但它和其它input标签使用可以提升用户的使用体验，用户不用非得点击到按钮，而是点击文字即可选中，如“记住密码”。r 通过label的for指向按钮的id来绑定，for和id属性的值要相同。r 3. 表单按钮type=”reset” 重置按钮r 重置按钮会清除表单中的所有数据。r 设置重置按钮上显示的文字。r type=”submit” 提交按钮r type=”submit” 定义提交按钮。提交按钮用于向服务器发送表单数据，数据会发送到表单的 action 属性中指定的页面。r 设置提交按钮上显示的文字。r type=”button” 普通按钮r button类型的只是一个普通的按钮，而submit有一个提交的作用，在没有加js代码的情况下，button只是个装饰。r type=”image” 提交按钮r image类型的input也是具有一个提交的作用，不同的是可以指定一幅图片来作为按钮，不提倡使用image，因为它有时候会提交两次。r

AngularJS使用angular-formly进行表单验证？

Angular 的表单属性 $valid, $invalid, $pristine, $dirtyAngular 提供了有关表单的属性来帮助我们验证表单. 他们给我们提供了各种有关一个表单及其输入的信息，并且应用到了表单和输入.属性类 描述 $valid ng-valid Boolean 告诉我们这一项当前基于你设定的规则是否验证通过 $invalid ng-invalid Boolean 告诉我们这一项当前基于你设定的规则是否验证未通过 $pristine ng-pristine Boolean 如果表单或者输入框没有使用则为True $dirty ng-dirty Boolean 如果表单或者输入框有使用到则为True Angular 也提供了有关表单及其输入框的类，以便你能够依据每一个状态设置其样式.访问表单属性方位表单: <form name>.<angular property>访问一个输入框: <form name>.<input name>.<angular property>

form表单通过js提交，另外跳转servlet时，自己定义了一个数，传参过去，可以吗，不是fo？

自定义参数，可以通过在form表单中设置隐藏域传值<inputtype=”hidden”name=”arg_name”value=”arg_value”/>后台通过arg_name接收arg_value的值

客户端提交请求的四种方式？

客户端请求新页面和提交数据的四种方式

超链接 超链接+js submit按钮提交表单 使用js提交表单

打开新页面的方式

使用相对路径和绝对路径

使用url携带参数

提交数据的方式为get方式

window.location

window.open;

先验证再提交表单。

使用hidden提交数据（非用户填写数据）

使用button+js

使用<a>+js

一般为post提交方式

1、超链接：

打开新页面：<a target=”_blank”>;

使用url携带参数： <a href=”page2.jsp?uid=admin&pass=123″>

注意：多个参数之间使用&连接，使用?表示携带参数；

2、超链接+js：

使用window.location<script type=”text/javascript”>

function fun(){window.location=”page2.jsp”;}</script>

a链接的写法：<a href=”javascript:fun();”>链接到page2</a> href连接中调用fun函数。

使用window.open()<script type=”text/javascript”>

function fun(){window.open(“page2.jsp”);–表示在新窗口打开链接。}</script>

a链接中：<a href=”javascript:fun();”>链接到page2</a>

3、使用submit按钮提交数据表单：注意action和method两个属性 表示的含义

对于用户输入数据：a、需要有用户输入框即<input type=”text” name=”username”/>在此输入框中输入数据。

b、有时需要先验证，再提交数据：

例：<input type=”text” name=”uid” id=”uid”/>function fun4()

var uid=document.getElementById(“uid”).value;–获取input输入框的vaule值

if(uid==””){

alert(“请输入用户名”);

return false;—表示不提交数据 }else{

return true;–提交数据}

submit提交按钮<input type=”submit” value=”提交表单” οnclick=”return fun4();”>

对于非用户输入数据：不需要input输入框

使用hidden提交数据：

<!– 使用hidden提交数据 ->

<form action=”page2.jsp” method=”post”>

<input type=”hidden” name=”uid” id=”uid2″ value=”admin”>

<input type=”submit” value=”提交表单” ><br/>

<script type=”text/javascript”>

document.getElementById(“uid2″).value=”admin2”;–两种参数值

</script>

</form>

4、使用js提交表单：

使用button+js提交：

button不具备提交功能：

<!– 使用button和js提交表单 –>

<form action=”page2.jsp” method=”post” id=”form1″>

<input type=”text” name=”uid”>

<input type=”button” value=”提交表单” οnclick=’document.getElementById(“form1”).submit();’>—获取的是form标签对象</form>

使用<a>+js提交表单

<!– 使用<a>和js提交表单 >

<form action=”page2.jsp” method=”post” id=”form2″>

<input type=”text” name=”uid”>

<ahref=’javascript:document.getElementById(“form2”).submit();’>提交表单</a><br/>

</form>

js表单怎么允许函数？

运用异步思想 promise 实现提交之后回调,比如ajax的success函数就是提交成功后的回调