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

知识点:               

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-*

版权声明:本文为m0_57448314原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
原文链接:https://blog.csdn.net/m0_57448314/article/details/117634071