ajax如何提交多表单的值_25 HTML5表单基本控件(二)

成长是一辈子的事儿!大家好!我是时问新。分享前端、Python等技术,以及个人成长路上的那些事儿。

密码框

使用标签,把标签上的type属性的值,设置为"password",就可以创建密码框。

密码框和单行文本框非常像,只不过,在单行文本框里面输入的内容,会显示出来,而在密码框里面输入的内容,都会变成小黑点隐藏起来。

我还是接着在之前的"表单控件.html"这个页面上继续写代码(从密码框那里看就行了):

    Document                

请输入你的名字:

毕业学校:

邮寄地址:

所学专业:

性别: 男 女

血型: A B AB O

我爱好的体育项目: MMA 羽毛球 长跑 游泳

请输入密码:

在浏览器中显示效果如下:

7e53ac355982cd6ecedd527392881df0.png

我在浏览器页面上的密码框中随便输入密码,会隐藏起来变为小黑点。

下拉菜单

创建下拉菜单需要使用标签,标签对儿里面罗列的标签是它内部的选项。也就是说,标签是下拉菜单的选项。

跟无序列表和有序列表一样:标签的子标签只能是标签,而且标签也不能单独使用,只能把它放在标签中使用。

在标签上,要有value属性,value属性的值是提交到服务器上的,而标签对儿之间的内容才是显示给用户看的。

每一个标签上value属性的值不一定一样,value的值根据实际需要去设定。

80d12ddb99a725a501cc9e0c5158f661.png

我继续在"表单控件.html"这个页面上写下拉菜单的演示代码:

    Document                

请输入你的名字:

毕业学校:

邮寄地址:

所学专业:

性别: 男 女

血型: A B AB O

我爱好的体育项目: MMA 羽毛球 长跑 游泳

请输入密码:

请选择你最喜欢的新能源汽车: 特斯拉小鹏蔚来威马理想雷丁比亚迪

在浏览器上显示效果如下:

3508bca64ee08fda149a3b8924ae26dc.png

点击下拉菜单,用户可以在下拉菜单中进行选择。

多行文本框

使用标签来创建多行文本框。

text是文本,area是区域,所以textarea就是文本区域,也就是多行文本框。

的rows和cols属性

rows和cols这两个属性的值是数字,没有单位。

rows和cols这两个属性分别用来定义多行文本框的行数和列数,实际上就是定义多行文本框有多宽和多高。

我接着写多行文本框的演示代码:

    Document                

请输入你的名字:

毕业学校:

邮寄地址:

所学专业:

性别: 男 女

血型: A B AB O

我爱好的体育项目: MMA 羽毛球 长跑 游泳

请输入密码:

请选择你最喜欢的新能源汽车: 特斯拉小鹏蔚来威马理想雷丁比亚迪

留言:

当你在vscode中写textarea然后按tab键时,会生成完整的标签代码,生成的代码中默认会把cols的值给定为30,把rows的值给定为10。

在浏览器中显示如下:

2350adc975c682204e3a85b1504cd3b0.png

当然,你可以自己调整cols和rows的值,多行文本框的宽高就会随着你的调整而变化。

在多行文本框中,用户可以输入内容。

三种按钮

表单中常见的有三种按钮,它们也都是用标签创建的,只不过type属性值不同,就表示不同的按钮。

3941a81d9ff1bb719dd796d2f64a72f8.png

当标签的type属性值为"button"时,就创建了一个普通按钮。也可以直接用标签对儿来创建普通按钮。button这个单词就是按钮的意思。

当标签的type属性值为"submit"时,就创建了一个提交按钮。点击这个按钮时,表单将会提交到form标签的action属性值所指向的那个后台网站。submit这个单词就是提交的意思。

当标签的type属性值为"reset"时,就创建了一个重置按钮。点击这个按钮时,表单中的所有控件都将被立即重置。reset这个单词就是重置的意思。

按钮上的value属性的值,就是显示在按钮上的文字。

我接着写这三种按钮的演示代码:

    Document                

请输入你的名字:

毕业学校:

邮寄地址:

所学专业:

性别: 男 女

血型: A B AB O

我爱好的体育项目: MMA 羽毛球 长跑 游泳

请输入密码:

请选择你最喜欢的新能源汽车: 特斯拉小鹏蔚来威马理想雷丁比亚迪

留言:

我是一个普通按钮

:我这里在表单控件外面包裹一个p标签,是为了在浏览器中显示出来好看点。因为这些标签都是行内元素,所谓行内元素,就是在同一行内显示的元素。不加p标签,它们都会挤在一起,非常难看,给它们外面分别都加了p标签,就会换行显示。

以上代码在浏览器中显示效果如下:

379801490f39ea21e41c47e0ef049483.png

当点击普通按钮时,也默认会有一个提交的操作,如何取消提交,需要JavaScript相关编程。先不用管它。

当点击提交按钮时,页面的网址会自动变为form标签上action属性的值所表示的网址。到底表单是怎么提交的,这需要http以及后台的一些知识,等后面了解了ajax相关知识,自然就明白了。现在也不用管它。

当点击重置按钮时,只要是在同一个form标签对儿里面的表单控件,都会自动重置掉。比如你在这个页面输入名字、毕业学校、邮寄地址、选择性别、血型、体育爱好、单行文本框和多行文本框都输入好内容,然后当你点击重置按钮时,这些表单控件都会重置。你可以自己试一试。

input标签的类型总结

input标签的type属性,不同的属性值就表示不同的表单控件。

5001d6dfffef2e48865f0f1f269faa34.png

以上的表单控件都是用input标签创建的,另外多行文本框和下拉菜单不是用input标签创建的。这样就好记一些。

以上这些表单控件的兼容性都很好,包括最老旧的ie6浏览器也是支持的。

感谢阅读!知识总结不易,请点个赞或转发鼓励一下呗!想系统性学习前端的小伙伴可以关注我!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值