文章插图
一、form表单form,表格、表单的意思,我一开始把它和from搞混了 。
还在想from不是从……开始的意思么,和表单有什么关系,感觉快被自己蠢哭了 。
表单的作用就是将数据提交给服务器,至于其具体是如何提交的,暂时还不清楚,后续会学习到 。
在我们现实生活中也挺常见的,有时会使用到的注册页面就可以理解成一个表单 。
文章插图
表单由三个部分组成:
1表单标签
包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法 。
也就是对应form表单中的两个属性:action和method 。
action就是指数据提交的路径,其中#表示的是本页面 。
method也就是表单提交的方式
- get:数据会出现在地址栏上面,是可见的,不安全 。
- post:提交的参数不会显示在地址栏上,是不可见的,相对而言更加安全 。
用户名,密码,邮箱这些都是表单域中的一部分 。
3表单按钮
注册按钮也就是其中的一种 。
form其子标签有:input(输入的内容),select(下拉框),textarea(文本域)
现在用代码演示表单是如何写出来的 。
二、input标签input 输入的意思,它是form标签中非常重要的子标签 。
1.type属性
文章插图
①用户名:type="text"
这个是默认的类型,也就是说如果input子标签中什么都不写的话就是文本框 。
②密码:type="password"
密码框和文本框的区别在于文本框里的数据用户直接能看到,但是密码框里的数据,用户直接看不到 。
【如何将浏览器上的数据,提交到服务器?】③性别:type="radio"
radio,收音机,在这儿是单选框的意思 。性别要么男,要么女也好理解 。
④爱好:type="checkbox"
checkbox,复选框,意思就是可以同时选择好几个 。
⑤生日:type="date"
也就是日期,日期在表单中是一个时间框,用户选择对应时间点击就好了 。
⑥上传头像:type="file"
直接选择本地文件就可以上传了 。
⑦提交按钮
一共有三种按钮:提交按钮,重置按钮和一般按钮 。
- 提交按钮是最基本的按钮,提交数据 。
- 重置就是可以将数据一键清零 。
- 一般按钮,上述中是用一张图片代替的,更美观,其本质还是被用来当成一个提交按钮 。
顾名思义,数据是隐藏的,页面上面看不到 。
2.其它属性
前面只是初步做出了一个模型,还有属性将表单功能进一步完善 。
文章插图
①name属性和values属性
基本上每一个input标签都可以设定name和values属性 。
如果是文本框密码框,values表示的也就是初始默认值 。
其中生日和头像不需要values,可以设定name,因为其本身就是一个输入框,values相当于是从外部传入的 。
其中提交按钮不需要name,但是可以设定values(也就是按钮显示的文字) 。
name和value具体有什么用呢?看下图;
文章插图
如果拿JAVA中的知识点做一个比较的话:
- name就相当于Map集合中的key 。
- value就相当于Map集合中的value 。
如果name设定是一样的,那么就只能选择一个,不然就算都是单选框,但是name不一样,还是可以多选 。
value表示其对应的值,比如用0表示是男,1表示是女 。
checked="checked",这个可以用来指定单选框的默认值 。
其中我通过测试发现:如果单选框中都有这个默认属性,那么默认值是最后面的那个单选框 。
③复选框
和单选框一样的道理,唯一区别就是可以多选 。
三、input标签(了解)1.其它属性
上述中说明的属性都是form表单中非常常见的 。
除此之外还有一些其它属性,相对而言不是经常见,但最好也对其有一定的了解 。
文章插图
推荐阅读
- C#窗体Winform,如何嵌入图片添加图片,使用图片资源?
- SpringBoot如何用Session共享实现分布式部署?
- JavaScript 中如何判断变量是否为数字
- 高分学长教你如何学好高一生物
- 春季如何养肝护肝 5款药膳粥护好小心肝
- 如何正确的选购一辆电动车
- ecco女鞋价格如何
- 汽车变速箱该如何使用与保养
- 饼茶的制作工序,饼茶是如何压制而成的
- 电脑系统如何一键还原,电脑系统一键还原怎么操作?