Form表单自动提交

表单提交是提交到指定的地址。

知识点：

1.创建一个项目，引入需要用到的CSS、JS、jQuery文件。既然是表单就会使用栅格布局。

2.栅格布局就要使用到container或 .container-fluid容器。

3.代码打出“form”点击“TAB”，即可自定生成（如下图）：

4.action：提交的地址

method：提交的方式

5.常用的两种提交方式：post（这里使用post提交方法）、get（默认的提交方式）。

6.表单元素

<input>标签： <input>标签用于搜集用户信息。根据不同的type属性值，输入字段拥有很多种形式。输入字段可以是文本字段、复选框、掩码后的文本控件、单选按钮、 按钮等等。

7.<select>：select元素可以创建单选或多选菜单。

<select>元素中的<option>标签用于定义 列表中的可用选项。

Select元素是一种表单控件，可用于在表单中接受用户输入。

8.<textarea>：<textarea> 标签定义多行的文本输入控件。

文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。

可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。

注释：在文本输入区内的文本行间，用 "%OD%OA" （回车/换行）进行分隔。

9.<button>：定义一个按钮。

在button元素内部，你可以放置内容，比如文本或图像。这是元素创建的按钮之间的不同。

属性：

New：HTML5中的新属性

话不多说，看完整代码：

下图为控制器的代码，一个是返回控制器的方法，一个是获取数据的方法。

当页面运行时，如下图：

填好信息点击“表单提交”：

表单自动跳转到另一个页面，如下图：

10.container, 居中，适配不同的断的 max-width 尺寸。

.container-fluid, 全屏，适配屏幕的 width: 100% 尺寸。

这里使用了栅格布局，提供了内容居中、水平填充的方法，使用.container（严格意义上也包括.container-fluid）。

.container实现固定的宽度并居中呈现，.container实现全宽度，并和其他网格实现对齐。

11. 实现行列

行(.row)是列(.col-*)的横向组合和父容器(它们有效组织在.row下)，每列都有水平的padding值，用于控制它们之间的间隔，同时在负边距的行上抵消，从而实现列中的所有内容在视觉上是左侧对齐的体验。

网页开发者的呈现内容必须放置在列(.col-*中，而且只有列可以是行的直接子元素，否则都是违法的(不可以在.col-*以上添加呈现内容。

.col-*的width属性(即列宽)是用百分比来表现和定义的，所以它们总是流式的，其尺寸大小
受父元素的定义影响(这正是flexbox布局的特征，子元素的宽比和排列受父元素定义)。
列具有水平padding定义，用于创建列与列之的间隙。
.row上带有margin-left: -15px;margin-right: -15px;属性，你可以在.row上上定义.no-gutters属性，从而消除这个属性，使页面不会额外宽出30px，即<div class="row no-gutters"...。
总共有五个栅格等级，每个响应式分界点隔出一个等级：特小.col、小.col-sm-*、中.col-md-*、大.col-lg-*、特大（大、特大也可以称为宽、超宽）.col-xl-*。

Form表单自动提交相关推荐

ajax和form表单的提交跳转问题
ajax和form表单的提交跳转问题使用ajax提交form表单数据的时候,把提交按钮的type="submit"改成type="button",防止点击提交 ...
php 表单提交及验证 tp,ThinkPHP表单自动提交验证实例教程
ThinkPHP表单自动提交验证实例教程附加规则配合验证规则使用,包括: function 使用函数验证,前面定义的验证规则是一个函数名 callback 使用方法验证,前面定义的验证规则是一个当 ...
Html 中表单提交的一些知识总结——防止表单自动提交，以及submit和button提交表单的区别...
转自:http://jackaudrey.blog.163.com/blog/static/1314217882010590041833/ 在页面中有多个input type="text&q ...
Validation阻止表单自动提交，使用Ajax提交表单（使用Validation的submitHandler方法）
在使用Validation时,我们有时候不希望验证成功后直接跳转页面(比如判断登录密码用户名正确与否),而希望自己使用Ajax提交,并且验证回调的结果. $('.login-form').valida ...
使用ajax方法实现form表单的提交（Ajax和from提交的区别）
写在前面的话在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控制页面的跳转及数据传递,但是在某些时候不希望页面跳转,或者说 ...
js实现Form表单submit提交截获数据（各浏览器通用）
js实现Form表单submit提交截获数据(各浏览器通用) js实现Form表单submit提交截获数据(各浏览器通用) No Comments | js , 安全 , PHP | by calms ...
使用ajax方法实现form表单的提交
2019独角兽企业重金招聘Python工程师标准>>> 在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控 ...
用js将form表单同时提交到两个不同页面的方法
用js将form表单同时提交到两个不同页面的方法: <script type="text/javascript"> function dosubmit(){ windo ...
form表单重复提交
现象: 后台完成数据库操作后返回到页面,这时点击浏览器的后退再提交或刷新页面,会导致form表单重复提交原因: 第一次提交的表单会被缓存到内存中,直到页面下次提交或页面关闭或转向其它页面才消失,在自 ...

Form表单自动提交

知识点：

Form表单自动提交相关推荐

最新文章

热门文章