HTML表单 —交互的关键
Java养成计划----学习打卡第八十四天
内容导航
Java（打卡第八十四天)
HTML表单
说实话，最近感觉任务有一点重，但是还是不至于放弃，等学完了web重的jsp和servlet；就画一点点时间学一下Vue和SSM以及Maven，Spring Boot等框架
表单 form
表单是最重要的一个标签，表单的作用就是收集用户的信息，表单展现之后，用户填写表单，点击提交按钮提交给服务器
-
表单中一个重要的子标签就是input按钮 type name value checked
-
还有一个可下拉选择标签 select name 也是提交 其中的选项都是标签 option value 所以提交的还是name和value
-
还有就是文本域，者当然和text不同，这个的范围更大，textarea 其中有属性row 和col 指定文本域的大小，同时name可以提交，也不需要vlaue
-
如何画一个标签呢？ 使用form标签 一个网页可以有多个表单form
表单需要将数据提交给服务器，form表单有一个action属性，用来指定服务器地址，这个action和超链接< a>的href属性一样，都可以向服务器发送请求，request， http://192.168.111.3:8080/oa/save这是请求路径，表单最终体提交给192.168.111.3机器上的8080端口对应的软件
submit — 提交
<html>
<head>
<title>表单</title>
</head>
<body>
<form action = "http:// <form>
<!-- 画一个按钮，这个按钮可以提交表单 画按钮可以使用input输入域-->
<input type = "submit"/>
<!-- 如果type不是submit，那么就没有提交表单的能力-->
<input type = "button"/>
</form>">
<!-- 画一个按钮，这个按钮可以提交表单 画按钮可以使用input输入域-->
<input type = "submit" value = "注册"/>
<!-- 如果type不是submit，那么就没有提交表单的能力-->
<input type = "button" value = "cfeng"/>
</form>
</body>
</html>
input 按钮有两个重要的属性type和value
-
type属性用来设置按钮的类型
- button 普通的按钮
- text 文本框 必须加上name属性，不然不知道文本是什么，并且不会提交【如果不写，那么就会提交空白串】
- password 密码框 隐藏密码
- checkbox 复选框 选择 就是一个方形的框可以点击选择,可以选择多项
- radio 单选按钮 性别之类的选择，就一个圆框可以点击，只能选择一项
- file 文件上传按钮 可以浏览本机的文件，可以上传文件
- hidden 隐藏域， 用户界面上看不见，但是会提交，所以写上name 和value 比如写上开发人员的名称
- submit 提交表单按钮
- reset 清空 可以清除其中的填写的数据
-
value属性用来设置按钮的名称
表单比超链接更加方便，比如超链接只能跳转到相关的页面，但是表单配合各种按钮就可以成功带走信息
比如在表单中设置两个按钮，一个text，一个submit，这样跳转的时候就可以带走信息
<form action = "http://www.baidu.com">
<input type = "text"/>
<input type = "submit" value = "百度"/>
</form>
这样一旦点击百度就可以将输入的信息一起提交给百度，这样百度的服务器再返回给查询的数据
但是这个text必须再表单的里面，超链接和表单都可以向服务器发送请求，但是表单可以携带数据
这里就可以结合表格实现一个简单的登录界面了
<form action = "http://127.0.0.1:8898">
<table>
<tr>
<td>用户名</td>
<td><input type = "text" name = "username"/></td>
</tr>
<tr>
<td>密码</td>
<td><input type = "password" name= "password"/></td>
</tr>
<tr>
<td colspan = "2"><input type = "submit" value = "注册"/> <input type = "reset" value = "清空"/></td>
</tr>
</table>
</form>
| 用户名 | |
| 密码 | |
这是者上面的显示效果，在网页上是没有边框的，因为没有加上border
HTTP协议规定的：表单提交的方式是action?name = value&name = value&name = value…… 而文本类型的数据，value就是填写的数据，但是必须指定名称name
也即是说提交的数据就是加了name属性的，不加那么就不会提交，比如普通的按钮，不叫name，那么就不会提交这个记录
用户注册表单的实例
单选按钮的name必须相同，后面的只是做参考，所提交的value必须手动指定 加上checked默认选中, checked都是默认选中
这里就写一个表单来完成注册的功能,同一个name代表的就是一个数据，所以对于单选框，那么就要让它们的那么相同
<html>
<head>
<title>用户注册</title>
</head>
<body>
<!--确认密码会又JS来拦截，不需要提交给后台的服务器-->
<form action = "http://localhost:8080">
用户名<input type = "text" name = "username"/><br>
密码<input type = "password" name = "userpwd"/><br>
确认密码<input type = "text"/> javascript <br>
<!--单选按钮的name必须相同，后面的只是做参考，所提交的value必须手动指定 加上checked默认选中-->
性别<input type = "radio" name = "gender" value = "man"/>男 <input type = "radio" name = gender value = "woman"/>女 <br>
爱好<input type = "checkbox" name = "interest" value = "soccer"/>踢足球
<input type = "checkbox" name = "interest" value = "pingpong"/>乒乓球
<input type = "checkbox" name = "interset" value = "badminton"/>羽毛球<br>
学历
<select name = "grade"> <!--默认选中加上selected -->
<option value = "high">高中</option>
<option value = "dz">大专</option>
<option value = "bk">本科</option>
<option value = "sz">硕士</option>
</select><br>
自我介绍
<textarea row = "10" col = "60" name = "introduce"></textarea><br>
<input type = "submit" value = "注册"> <input type = "reset" value = "清空"/>
</form>
</body>
</html>
所以可以看出来，除了text不用写value自动让用户输入成为value，其他的value和name都是标签的内部属性，外面的内容都只是提示的内容
这里使用之后，提交的是
http://localhost:8080/?username=%E5%BC%A0%E4%B8%89&userpwd=a123&gender=man&interest=soccer&interest=pingpong&grade=dz&introduce=I+am+a+programmer
这里可以看到直接就是按照name = value提交的，并且这里的textarea是提交的字符串拼接
用户名
密码
确认密码 javascript
性别男 女
爱好踢足球 乒乓球 羽毛球
学历
高中 大专 本科 硕士
自我介绍
这里的排版不好，可以将它们放在表格中，来规范布局
在form中加上method属性 可以隐藏post
上面的普通提交会将用户的个人信息显示在地址栏上，不安全，所以可以在form中加上method = post就可以隐藏，但是还是提交成功了的
<form action = "http" method = "post">
……
</form>
post是将信息隐藏，还有一个get是现实在地址栏中，默认的是get，如果有密码，还是使用post
注意 ：
-
超链接不是不可以提交数据，因为url中就有userinfo，所以可以在url中加上?name=value&name =value……,并且这个是不能够隐藏的，就是get
-
post提交的数据和get是一样的，只是不显示而已
下拉列表支持多选【mutiple】
上面的已经提到了select就是下拉列表单选，但是要支持多选就要使用属性mutiple = “mutiple”,用来表示是多选，还有size就是列表默认呈现几条数据
<select name = "学历" mutiple = "mutiple" size = "3">
<option value = "gz">高中</option>
<option value = "dz">大专</option>
<option value = "bk">本科</option>
<option value = "sz">硕士</option>
</select>
高中 大专 本科 硕士
可以看到就只显示了三条数据，要按住ctrl就可以多选
file控件 按钮
file控件用于让用户上传本地的资源文件
<input type = "file"/>
hidden控件 按钮
<input type = "hidden" name = "programmername" value = "zhangsan"/>
用户看不见，但是提交的action?programmername=zhangsan&……
这里和post不一样，post是不再地址栏上显示，这个是存在，而是在网页上显示与否，一般都是post；提交的时候还是会提交的
readonly和disabled属性
这是修饰表单中的input的，就是修饰之后内容是只读，用户不可以修改
二者的区别是readonly会提交数据，但是disabled不会提交数据，所以可以不写name了
<input type = "text" name = "username" value ="zhangsan" readonly/>
<br>
<input type = "text" value = "111" disabled/>
希望用户看见，但是不让用户修改，并且可以可以提交就是readonly
希望用户看见，但是不修改，不提交，那就是disabled
maxlength属性
这个属性修饰的是text按钮，设置之后限制用户输入的最大长度
<input type = "text" maxlength = "3">
<!--限制用户最大输入的长度为3-->
HTML中的id属性
在HTML文档中，任何元素都有id属性，元素也叫节点；比如head，body节点，html根节点；form节点，input节点；同一个节点中的id值不能重复
所以可以给任何一个节点加上一个属性id
<form id = "myform" action = "http" method = "post">
……
</form>
id属性的存在是为了方便操作HTML文档中的任何标签，方便javascript的使用，后期就是使用id属性定位节点进行增删改
id可以方便获取html中的节点，JavaScript可以对html中的任何节点进行操作
HTML的DOM树
- HTML文档其实是一棵树，所以缩进的就是子节点，比如根节点为html，其子节点为head和body，head的子节点为title……这颗树为DOM树 Document文档
div和span
之前分析过一个rowspan就是单元格的合并；div和span都可以称为图层
其作用是保证页面可以灵活布局
最早的网页采用table布局，现在的网页基本上使用div和span布局，很少使用table布局；比如之前的的表单form采用了table布局
其实div可以想象成一个盒子，之后可以设置一个坐标x，y就可以设置其坐标，之后可以设置盒子的高和宽，div中可以套div；随意放置，其目的就是布局；定位左上角的坐标 ajax很简单，就是异步刷新
div默认情况下就是占用一行，span不会占用一行
接下来就是实践编写网页，提交到服务器，插入数据库，提供相关的功能来完成服务，web还有css，javascript，jsp，servlet