jsp的form表单不提交_初识制作表单

登录表单

初识表单

今天我们来学习表单。

在我们的生活中，离不开表单，在我们注册账号的时候，或者买东西输入地址或者登陆账号密码的时候，这时候我们用到都是表单的内容。

我们就拿一个登录表单为例

我们需要一个文本输入框输入用户名，需要一个密码输入框输入密码，需要一个提交按钮进行登录，而这些东西都需要包裹在一个from标签里

通常在一个表单里面，有许多表单控件，有文本框、密码框、单选按钮、复选框等等

这些表单控件全部都是由input标签编写出来的，但是一个标签怎么会有这么多效果呢？

主要原因就在于input当中的type属性，他有很多值，每个值对应不同效果

具体如下所示，左边的每个值对应右边的显示效果：

掌握了上面这些，我们就可以编写一个简单的表单了

编写简单表单

我们来编写一下上面的这个简单的表单

我们先来分析一下它，这是一个4行3列的表格，根据我们之前学的表格的知识，我们先来制作出这样一个表格

效果如下：

我们先来合并该表格

1.第一行的第一个单元格的rowspan=4，并且删除下面三个的第一列

2.第一行的最后一个单元格删除，让第二个单元格clospan=2

3.最下面一行的最后一个单元格也删除，并且中间单元格clospan=2

显示效果如下：

大致的结构我们就编写完成了，下面开始填写内容

效果如下：

文字输入完成后，我们就要开始编写表单中的控件了

效果如下，用户名和密码可以输入，但是按钮只是很小的一个和我们要做的效果差别很大

我们需要给按钮加上vlue属性文字，按钮大小就会跟随文字的多少

效果如下

我们再来设置他们的对齐方式align

1.设置提交和重置按钮为居中显示align=”center”

2.用户名和密码文字为右对齐align=”right”

3.总体信息为居中对齐align=”center”

但是现在有一个问题，我们点击提交和重置时没有任何反应

这是因为我们现在所写的按钮只是最普通的按钮button，要想使按钮有作用，我们现在缺少两个条件：

1.整个表格不在from标签内，action为表单提交的地址

2.按钮要对应的type值，submit为提交，reset为重置

效果点击提交时，页面就会有刷新的动作

如果我们在action属性中输入一个网址，例如http://www.baidu.com，那么点击提交的时候就会跳转到百度首页。

重置的将button改为reset即可。

我们来总结一下

1.四个需要记住的：

2.type中的属性值含义：

--- 笔记来自于【千锋教育】视频

​