如何将浏览器上的数据,提交到服务器?

    技术2022-07-12  82

    今天是刘小爱自学Java的第77天。

    感谢你的观看,谢谢你。

    话不多说,开始今天的学习:

    一、form表单

    form,表格、表单的意思,我一开始把它和from搞混了。

    还在想from不是从……开始的意思么,和表单有什么关系,感觉快被自己蠢哭了。

    表单的作用就是将数据提交给服务器,至于其具体是如何提交的,暂时还不清楚,后续会学习到。

    在我们现实生活中也挺常见的,有时会使用到的注册页面就可以理解成一个表单。

    表单由三个部分组成:

    1表单标签

    包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。

    也就是对应form表单中的两个属性:action和method。

    action就是指数据提交的路径,其中#表示的是本页面。

    method也就是表单提交的方式

    get:数据会出现在地址栏上面,是可见的,不安全。post:提交的参数不会显示在地址栏上,是不可见的,相对而言更加安全。

    2表单域

    用户名,密码,邮箱这些都是表单域中的一部分。

    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"

    直接选择本地文件就可以上传了。

    ⑦提交按钮

    一共有三种按钮:提交按钮,重置按钮和一般按钮。

    提交按钮是最基本的按钮,提交数据。重置就是可以将数据一键清零。一般按钮,上述中是用一张图片代替的,更美观,其本质还是被用来当成一个提交按钮。

    ⑧隐藏域:type="hidden"

    顾名思义,数据是隐藏的,页面上面看不到。

    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表单中非常常见的。

    除此之外还有一些其它属性,相对而言不是经常见,但最好也对其有一定的了解。

    ①size属性

    用来控制文本框的长度,默认大小是20

    ②maxlength属性

    可以设定输入的最大长度,我设置的是6,那么文本框里输入的字符只能有6个。

    ③readonly属性

    只读的意思,文本框中的数据可以选中也可以点击,数据会提交但是不能修改。

    ④disabled属性

    不可用的意思,只能看,不能选也不能点,并且数据也不会提交。

    2其它type属性

    button:可以定义一个可点击的按钮。

    color:可以设定颜色(RGB)。

    week:用第几周来表示时间。

    month:用第几月来表示时间。

    emil:定义一个邮件文本框(可用来校验输入格式)

    type中的属性实在是太多了,就不一一说明了,详情见下图:

    四、下拉框和文本域

    学完form表单中的input子标签,还有两个子标签select和textarea。

    1下拉框

    name属性:也就是浏览器中地址栏里的name。

    option属性:选项,有它才能有多个选项,这样才会出现下拉框。

    multiple属性:多样的,用其可以多选。

    size属性:多选时用以表示一次显示的数量。

    如果不用multiple属性,这是单选,也就是图中右下角。

    2文本域

    name属性:提交时需要,不再赘述。

    rows属性:文本域中的行数。

    cols属性:文本域中的列数。

    最后

    谢谢你的观看。

    如果可以的话,麻烦帮忙点个赞,谢谢你。

    Processed: 0.013, SQL: 9