ajax如何提交多表单的值_25 HTML5表单基本控件(二)
成长是一辈子的事儿!大家好!我是时问新。分享前端、Python等技术,以及个人成长路上的那些事儿。
密码框
使用标签,把标签上的type属性的值,设置为"password",就可以创建密码框。
密码框和单行文本框非常像,只不过,在单行文本框里面输入的内容,会显示出来,而在密码框里面输入的内容,都会变成小黑点隐藏起来。
我还是接着在之前的"表单控件.html"这个页面上继续写代码(从密码框那里看就行了):
Document
请输入你的名字:
毕业学校:
邮寄地址:
所学专业:
性别: 男 女
血型: A B AB O
我爱好的体育项目: MMA 羽毛球 长跑 游泳
请输入密码:
在浏览器中显示效果如下:
我在浏览器页面上的密码框中随便输入密码,会隐藏起来变为小黑点。
下拉菜单
创建下拉菜单需要使用标签,标签对儿里面罗列的标签是它内部的选项。也就是说,标签是下拉菜单的选项。
跟无序列表和有序列表一样:标签的子标签只能是标签,而且标签也不能单独使用,只能把它放在标签中使用。
在标签上,要有value属性,value属性的值是提交到服务器上的,而标签对儿之间的内容才是显示给用户看的。
每一个标签上value属性的值不一定一样,value的值根据实际需要去设定。
我继续在"表单控件.html"这个页面上写下拉菜单的演示代码:
Document
请输入你的名字:
毕业学校:
邮寄地址:
所学专业:
性别: 男 女
血型: A B AB O
我爱好的体育项目: MMA 羽毛球 长跑 游泳
请输入密码:
请选择你最喜欢的新能源汽车: 特斯拉小鹏蔚来威马理想雷丁比亚迪
在浏览器上显示效果如下:
点击下拉菜单,用户可以在下拉菜单中进行选择。
多行文本框
使用标签来创建多行文本框。
text是文本,area是区域,所以textarea就是文本区域,也就是多行文本框。
的rows和cols属性
rows和cols这两个属性的值是数字,没有单位。
rows和cols这两个属性分别用来定义多行文本框的行数和列数,实际上就是定义多行文本框有多宽和多高。
我接着写多行文本框的演示代码:
Document
请输入你的名字:
毕业学校:
邮寄地址:
所学专业:
性别: 男 女
血型: A B AB O
我爱好的体育项目: MMA 羽毛球 长跑 游泳
请输入密码:
请选择你最喜欢的新能源汽车: 特斯拉小鹏蔚来威马理想雷丁比亚迪
留言:
当你在vscode中写textarea然后按tab键时,会生成完整的标签代码,生成的代码中默认会把cols的值给定为30,把rows的值给定为10。
在浏览器中显示如下:
当然,你可以自己调整cols和rows的值,多行文本框的宽高就会随着你的调整而变化。
在多行文本框中,用户可以输入内容。
三种按钮
表单中常见的有三种按钮,它们也都是用标签创建的,只不过type属性值不同,就表示不同的按钮。
当标签的type属性值为"button"时,就创建了一个普通按钮。也可以直接用标签对儿来创建普通按钮。button这个单词就是按钮的意思。
当标签的type属性值为"submit"时,就创建了一个提交按钮。点击这个按钮时,表单将会提交到form标签的action属性值所指向的那个后台网站。submit这个单词就是提交的意思。
当标签的type属性值为"reset"时,就创建了一个重置按钮。点击这个按钮时,表单中的所有控件都将被立即重置。reset这个单词就是重置的意思。
按钮上的value属性的值,就是显示在按钮上的文字。
我接着写这三种按钮的演示代码:
Document
请输入你的名字:
毕业学校:
邮寄地址:
所学专业:
性别: 男 女
血型: A B AB O
我爱好的体育项目: MMA 羽毛球 长跑 游泳
请输入密码:
请选择你最喜欢的新能源汽车: 特斯拉小鹏蔚来威马理想雷丁比亚迪
留言:
我是一个普通按钮
注:我这里在表单控件外面包裹一个p标签,是为了在浏览器中显示出来好看点。因为这些标签都是行内元素,所谓行内元素,就是在同一行内显示的元素。不加p标签,它们都会挤在一起,非常难看,给它们外面分别都加了p标签,就会换行显示。
以上代码在浏览器中显示效果如下:
当点击普通按钮时,也默认会有一个提交的操作,如何取消提交,需要JavaScript相关编程。先不用管它。
当点击提交按钮时,页面的网址会自动变为form标签上action属性的值所表示的网址。到底表单是怎么提交的,这需要http以及后台的一些知识,等后面了解了ajax相关知识,自然就明白了。现在也不用管它。
当点击重置按钮时,只要是在同一个form标签对儿里面的表单控件,都会自动重置掉。比如你在这个页面输入名字、毕业学校、邮寄地址、选择性别、血型、体育爱好、单行文本框和多行文本框都输入好内容,然后当你点击重置按钮时,这些表单控件都会重置。你可以自己试一试。
input标签的类型总结
input标签的type属性,不同的属性值就表示不同的表单控件。
以上的表单控件都是用input标签创建的,另外多行文本框和下拉菜单不是用input标签创建的。这样就好记一些。
以上这些表单控件的兼容性都很好,包括最老旧的ie6浏览器也是支持的。
感谢阅读!知识总结不易,请点个赞或转发鼓励一下呗!想系统性学习前端的小伙伴可以关注我!
ajax如何提交多表单的值_25 HTML5表单基本控件(二)相关推荐
- html5表单新增验证属性,HTML5表单增强属性
email 此类型要求输入格式正确的email地址,否则浏览器是不允许提交的,并会有一个错误信息提示.此类型在Opera中必须指定name值,否则无效果. url 要求输入格式正确的URL地址,Ope ...
- html5表单验证没有效果,HTML5表单验证特性(知识点小结)
前台提交信息到后台一般两种常见提交方式: Form表单提交 和 Ajax无刷新页面提交 placeholder 不是所有的input都支持,比如input date就不支持 解决方案: 可以在date ...
- html表单验证的作用,HTML5表单元素 、 表单属性 、 表单验证
[HTML5新表单] 1.type: - email : 验证逻辑不完整,只验证是否包含 @ : - search : - url : 验证逻辑不完整,只判断是否包含 http:// : - tel ...
- HTML5表单元素禁用,禁用HTML5表单元素的验证
// suppress "invalid" events on URL inputs $('input[type="url"]').bind('invalid' ...
- 不属于html5表单元素的是,HTML5 表单元素
HTML5 新的表单元素 HTML5有以下新的表单元素
- 列出html表单元素及语法,HTML表单(示例代码)
一.表单[重点] 1.什么是表单及原理? 用户将网页中的数据,提交给后台数据库进行处理. 在BS模式下,便带负责将客户端的请求发送到后台查询,后台响应的结果,显示在浏览器中. 网页中的数据,通过表单的 ...
- Jquery中获取表单的值并提交
今天写了一个ajax的交互,通过获取表单的值,自己组织post的方式提交. 但是却出现了提交的值为空,后来检查后发现,在提交表单的值得处理的时机有些问题. 一开始先是获取了值,然后在单击提交按钮后传值 ...
- Form表单, 4种常见的表单提交方式
浏览器行为:Form表单提交 1.form表单常用属性 1 2 3 4 action:url 地址,服务器接收表单数据的地址 method:提交服务器的http方法,一般为post和get name: ...
- htmlparser设置表单属性值
想用htmlparser实现自动填写表单并提交,但暂时实现不了提交,计划通过httpclient实现.htmlparser可实现设置表单属性值,但貌似意义不大,其主要价值在解析html网页.设置表单属 ...
最新文章
- Java面向对象学习笔记 -- 6(内部类、Timer)
- (JAVA学习笔记) 冒泡排序算法
- 将web项目导入到eclipse/MyEclipse中常见错误
- ECCV 2018 《Triplet Loss in Siamese Network for Object Tracking》论文笔记
- [Java] ArrayList、LinkedList、Vector的区别
- +号的用法(3+5+“8”与“3”+5+8相同吗)
- Kotlin 势必取代 Java?
- 以汉字开头,以某个词结尾的一段文字的正则
- Spring 最常用的 7 大类注解,女媛史上最强整理!
- C#【高级篇】 IntPtr是什么?怎么用?
- 《数字图像处理》实验7
- 常用的3D三维建模软件大全有哪些?
- 哥德巴赫猜想c#语言,哥德巴赫猜想 C#
- Samba安装,你可能没有权限使用网络资源。请与这台服务器的管理员联系。。。。。。
- (转)当android调试遇到ADB server didn't ACK以及顽固的sjk_daemon进程 .
- Redis缓存过期策略
- pageX,clientX,screenX,offsetX区别
- 高等数学:第四章 不定积分(1)不定积分的概念与性质 换元积分法
- scikit-learn 中文文档-集成方法-监督学习|ApacheCN
- ImageView 加载图片方法