HTML表单 ---交互的关键

HTML表单 ---交互的关键

Java养成计划----学习打卡第八十四天

内容导航

• • 表单 form
  • • 用户注册表单的实例
    • 在form中加上method属性 可以隐藏post
    • 下拉列表支持多选【mutiple】
    • file控件 按钮
    • hidden控件 按钮
    • readonly和disabled属性
    • maxlength属性
  • HTML中的id属性
  • HTML的DOM树
  • div和span

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 — 提交

    
        
    
    
        ">
            
            
            
            
        
    

input 按钮有两个重要的属性type和value

• type属性用来设置按钮的类型

  • button 普通的按钮
  • text 文本框 必须加上name属性，不然不知道文本是什么，并且不会提交【如果不写，那么就会提交空白串】
  • password 密码框 隐藏密码
  • checkbox 复选框 选择 就是一个方形的框可以点击选择,可以选择多项
  • radio 单选按钮 性别之类的选择，就一个圆框可以点击，只能选择一项
  • file 文件上传按钮 可以浏览本机的文件，可以上传文件
  • hidden 隐藏域， 用户界面上看不见，但是会提交，所以写上name 和value 比如写上开发人员的名称
  • submit 提交表单按钮
  • reset 清空 可以清除其中的填写的数据

• value属性用来设置按钮的名称

表单比超链接更加方便，比如超链接只能跳转到相关的页面，但是表单配合各种按钮就可以成功带走信息

比如在表单中设置两个按钮，一个text，一个submit，这样跳转的时候就可以带走信息

这样一旦点击百度就可以将输入的信息一起提交给百度，这样百度的服务器再返回给查询的数据

但是这个text必须再表单的里面，超链接和表单都可以向服务器发送请求，但是表单可以携带数据

这里就可以结合表格实现一个简单的登录界面了

用户名密码          

这是者上面的显示效果，在网页上是没有边框的，因为没有加上border

HTTP协议规定的：表单提交的方式是action?name = value&name = value&name = value…… 而文本类型的数据，value就是填写的数据，但是必须指定名称name

也即是说提交的数据就是加了name属性的，不加那么就不会提交，比如普通的按钮，不叫name，那么就不会提交这个记录

用户注册表单的实例

单选按钮的name必须相同，后面的只是做参考，所提交的value必须手动指定 加上checked默认选中, checked都是默认选中

这里就写一个表单来完成注册的功能,同一个name代表的就是一个数据，所以对于单选框，那么就要让它们的那么相同

所以可以看出来，除了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就可以隐藏，但是还是提交成功了的

post是将信息隐藏，还有一个get是现实在地址栏中，默认的是get，如果有密码，还是使用post

注意 ：

• 超链接不是不可以提交数据，因为url中就有userinfo，所以可以在url中加上?name=value&name =value……,并且这个是不能够隐藏的，就是get

• post提交的数据和get是一样的，只是不显示而已

下拉列表支持多选【mutiple】

上面的已经提到了select就是下拉列表单选，但是要支持多选就要使用属性mutiple = “mutiple”,用来表示是多选，还有size就是列表默认呈现几条数据

    高中
    大专
    本科
    硕士

高中 大专 本科 硕士

可以看到就只显示了三条数据，要按住ctrl就可以多选

file控件 按钮

file控件用于让用户上传本地的资源文件

hidden控件 按钮

用户看不见，但是提交的action?programmername=zhangsan&……

这里和post不一样，post是不再地址栏上显示，这个是存在，而是在网页上显示与否，一般都是post；提交的时候还是会提交的

readonly和disabled属性

这是修饰表单中的input的，就是修饰之后内容是只读，用户不可以修改

二者的区别是readonly会提交数据，但是disabled不会提交数据，所以可以不写name了

希望用户看见，但是不让用户修改，并且可以可以提交就是readonly

希望用户看见，但是不修改，不提交，那就是disabled

maxlength属性

这个属性修饰的是text按钮，设置之后限制用户输入的最大长度

HTML中的id属性

在HTML文档中，任何元素都有id属性，元素也叫节点；比如head，body节点，html根节点；form节点，input节点；同一个节点中的id值不能重复

所以可以给任何一个节点加上一个属性id

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