玩转web表单网页快速开发(❤建议收藏❤)

一、前言

前面我们介绍了web网页的快速开发,这次我们讲点更深层次些的,看这面之前建议先看

上篇,之后在食用这篇。

二、正文部分

如图示:点击webapp上面的小三角形点到直到看到jsp位置

我们在创建好了之后这里会有jsp的空单子,我们在这输入的内容,会先反馈到前端,之后再进行

后端数据处理和接收。

玩转web表单网页快速开发(❤建议收藏❤)_第1张图片

 第一步:我们先在这输入一些东西如图:其中

内容

这是格式,说明中间的内容是

一个h1 大小的标题,h1--h6标题在逐渐减小,要慎用h1,因为h1比较大

玩转web表单网页快速开发(❤建议收藏❤)_第2张图片

要先点击这个运行之后,我们要去百度搜索localhost:8080 我们来看看效果 

玩转web表单网页快速开发(❤建议收藏❤)_第3张图片玩转web表单网页快速开发(❤建议收藏❤)_第4张图片

感觉挺大的,所以我们一般用

内容

第二步:我们输入以下圈起来的内容,是格式,"txt"表示后面是一个框玩转web表单网页快速开发(❤建议收藏❤)_第5张图片

 点击运行之后再到百度将刚才的内容刷新就可以得到新内容了如图:

玩转web表单网页快速开发(❤建议收藏❤)_第6张图片

 但是我们感觉这样在一行不太好看,所以我们只需要加个换行的
即可

玩转web表单网页快速开发(❤建议收藏❤)_第7张图片

 点击运行之后就可以在百度上刷新就可以得到了

玩转web表单网页快速开发(❤建议收藏❤)_第8张图片

 那我们来输入试试:

玩转web表单网页快速开发(❤建议收藏❤)_第9张图片

 我们发现,密码可以看到,没有任何加密,所以我们只需要把txt改成password即可

点击运行后 在百度刷新查看:玩转web表单网页快速开发(❤建议收藏❤)_第10张图片

 该成之后如图:

玩转web表单网页快速开发(❤建议收藏❤)_第11张图片

就可以通过小眼睛标识来控制是否可见

玩转web表单网页快速开发(❤建议收藏❤)_第12张图片

 第三步:我们只需要加入name和id,其中,冒号下的表示一个类似标识符的东西,

name所对应的是在前段显示,而id是在后端传输数据的时候起作用玩转web表单网页快速开发(❤建议收藏❤)_第13张图片

 我们发现输完账号密码之后没法提交,这就需要设置一个按钮,如图,输入划线的部分

玩转web表单网页快速开发(❤建议收藏❤)_第14张图片

 是一种格式,submit是一个提交按钮

玩转web表单网页快速开发(❤建议收藏❤)_第15张图片

但是你会发现,点了提交没反应,这时我们就要加入

将整个包起来

相当于一个问卷,有了问卷,就可以提交了。

玩转web表单网页快速开发(❤建议收藏❤)_第16张图片

点击运行之后呢,就可以如图:

玩转web表单网页快速开发(❤建议收藏❤)_第17张图片

点击提交后,会在网页上显示出来,这时name的作用就体现出来了。

第四步:既然这是段位提交,那显然少不了段位选择,本来应该是

但是如果手抖写成

玩转web表单网页快速开发(❤建议收藏❤)_第18张图片

 就会多出许多空格,且这些空格是可以选择的

玩转web表单网页快速开发(❤建议收藏❤)_第19张图片

 这就很难受的,所以还是变成在idea代码中加上/,如图:玩转web表单网页快速开发(❤建议收藏❤)_第20张图片

 之后点击运行在百度上刷新就可以了

玩转web表单网页快速开发(❤建议收藏❤)_第21张图片

 也可以设置不同的提交按钮,只需要一个value='' ''即可里面就可设置内容了

玩转web表单网页快速开发(❤建议收藏❤)_第22张图片

 如图:

玩转web表单网页快速开发(❤建议收藏❤)_第23张图片

 我们还可以设置单选多选,那又是怎么实现呢

单选:单选的关键词是"radio",我们前面知道了设置一个功能的格式是,

所以如图:玩转web表单网页快速开发(❤建议收藏❤)_第24张图片

 结果是:

玩转web表单网页快速开发(❤建议收藏❤)_第25张图片

 我们发现三个都能选,所以我们必须加上name修饰,用相同的指向,表示只能选择一个

玩转web表单网页快速开发(❤建议收藏❤)_第26张图片

 这次如图就可以了

玩转web表单网页快速开发(❤建议收藏❤)_第27张图片

 我们要想给这个加上一个默认值,默认选的那个,只需要加上checked即可如

玩转web表单网页快速开发(❤建议收藏❤)_第28张图片

 之后:

玩转web表单网页快速开发(❤建议收藏❤)_第29张图片

 多选:多选和单选的区别在于把radio改为checkbox

玩转web表单网页快速开发(❤建议收藏❤)_第30张图片

 运行后如图:

玩转web表单网页快速开发(❤建议收藏❤)_第31张图片

 就可以了,离得太近,我们有时候点不到框框,点汉字却没反应无法选中,所以我们可以

设置成点汉字也可以选择直接加,如图

玩转web表单网页快速开发(❤建议收藏❤)_第32张图片

 就可以实现点文字也能选上了:

玩转web表单网页快速开发(❤建议收藏❤)_第33张图片有时候我们写错太多,不想一个一个删除,这时我们就可以用一个重置按钮reset英文理解为

再设置,就是重置了,我们把上次的按钮改成提交按钮。

玩转web表单网页快速开发(❤建议收藏❤)_第34张图片

 如图:

玩转web表单网页快速开发(❤建议收藏❤)_第35张图片

点击重置就可以清除了所有了。

上次写了个粗略版本

玩转web表单网页快速开发(❤建议收藏❤)_第36张图片

还有其他的我们之后去了解。

你可能感兴趣的:(web网页开发,html,intellij-idea,java)