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浏览器也是支持的。

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/430337.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

android_studio上传svn的时候那些不提交

buid文件夹不需要提交 转载于:https://www.cnblogs.com/YangBinChina/p/5708510.html

python语音分割_用7行Python代码构建自己的有声读物

点击关注我哦欢迎关注 “小白玩转Python”,发现更多 “有趣”有声读物是我们可以通过音频听取一本书或者其他作品的内容,是现下一种很受欢迎的阅读方式。类似的APP有:喜马拉雅、得到和樊登读书等。但是如果你有一本pdf格式的书籍,…

stata生成脉冲响应图怎么导出_Stata:面板VAR模型(pvar2命令)

🌈2021年寒假Stata研讨班:高级计量经济学及Stata应用研讨班👉2021空间计量研讨班:空间计量及Geoda、Stata、ArcGis、Matlab应用PVAR这个程序最初是由Inessa Love编写的。它允许用户估计面板向量自回归和产生方差分解和脉冲响应函数…

一台电脑同时启动多个java_如何在一台同时登录多个微信?

点击上方蓝字关注我相信大家对手机上的微信双开并不陌生,很多人由于工作需要,需要多开一个甚至多个微信。对于安卓手机来说,双开微信并不是什么难事。现在大部分国产安卓手机都自带微信双开功能(一般在设置里面搜索“分身”或者“双开”就能找…

利用Python进行数据分析(1) 简单介绍

一、处理数据的基本内容 数据分析 是指对数据进行控制、处理、整理、分析的过程。 在这里,“数据”是指结构化的数据,例如:记录、多维数组、Excel 里的数据、关系型数据库中的数据、数据表等。 二、说说 Python 这门语言 Python 是现在最受…

grep, egrep, fgrep笔记

grep, egrep, fgrep grep: 根据模式搜索文本,并将符合模式的文本行显示出来。Pattern: 文本字符和正则表达式的元字符组合而成匹配条件grep [options] PATTERN [FILE...] -i:不区分大小写 --color -v: 显示没有被模式匹配到的行 -o&#…

ArcGIS for Desktop入门教程_第八章_Desktop学习资源 - ArcGIS知乎-新一代ArcGIS问答社区...

ArcGIS for Desktop入门教程_第八章_Desktop学习资源 - ArcGIS知乎-新一代ArcGIS问答社区 原文:ArcGIS for Desktop入门教程_第八章_Desktop学习资源 - ArcGIS知乎-新一代ArcGIS问答社区1 学习资源用户在学习和应用过程中,可以参考的资源如下:1. ArcGIS资…

amd sata controller下载_AMD发布全新锐龙芯片组驱动:告别卡死、报错

AMD今天发布了全新的锐龙平台芯片组驱动,版本号2.04.04.111,从界面到功能都全面升级,并修复了此前存在的多个严重Bug。新驱动重新设计了安装界面,借鉴了Radeon Adrenalin 2020肾上腺素显卡驱动的诸多元素,更加时尚美观…

mysql数据库基础的简单操作指南

最近在学习mysql,本文是做的关于mysql学习的笔记,跟大家分享一下,希望对大家学习mysql知识有所助益。mysql现在几乎已经成了网站建设的主流数据库,很多php网站系统都采用了mysql数据库。比mssql最大的优势在于开源,免费。希望与大…

kill 进程_结束进程,查看后台进程

有一些进程想要结束怎么办呢?进程的优先是怎样的呢?如何查看后台正在运行的进程呢?下面我就来讲讲给进程发送信号(kill -l列出所有支持的信号)[rootqianfeng ~]# kill -l 编号 信号名1) SIGHUP 重新加载配置2) SIGINT 键盘中断CtrlC3) SIGQUIT 键盘退出…

软碟通

转载于:https://www.cnblogs.com/jcfxl/p/5739741.html

controller调用controller的方法_SpringCloud(5):Feign整合Ribbon和Hystrix来进行远程调用与服务熔断...

Feign前面我们虽然使用了Ribbon和Hystrix进行了负载均衡和服务熔断,但是我们的消费方代码中由于要调用提供方的服务,比如:String user this.restTemplate.getForObject("http://service-provider/user/" id, String.class);使用了…

vba excel 退出编辑状态_VBA小常识(15)—Application对象

VBA小常识(15)—Application对象学习自杨洋老师《全民一起学VBA》Application是位于最顶端的对象,代表excel程序本身,所有对象都属于它。1. application.cells当前处于激活状态的工作表,即“活动工作表”的单元格。此时…

c++ stack 遍历_划重点啦!带你解读图的两种遍历方式

01知识框架02图的遍历1深度优先遍历基本思想:首先访问图中起始顶点v,然后由v出发,访问与v邻接且未被访问的顶点再访问与v相邻且未被访问的顶点 w1...重复上述过程。当不能再继续向下访问时,依次退回到最近被的问的顶点&#xff0c…

for循环延时_单片机的独立按键学习,实现60秒循环数字的启动暂停与清零

想要学习单片机必须要准备单片机开发板一块,和单片机C语言版本的书籍,我会把每天录制视频的源代码到头条,并且录制相同文章名字视频到西瓜视频,如果你再学习独立按键这一块有不明白的地方可以点开我的头像,进入我的主页…

mysql创建全外连接的视图_关系型数据库 MySQL 表索引和视图详解

原创: JiekeXu JiekeXu之路 一、索引数据库索引通俗的讲就是和书本的目录一样,主要就是为了提高查询数据的效率。由于数据存储在数据库表中,所以索引是创建在数据库表对象上,由表中的一个字段或多个字段生成的键组成,这…

FatMouse's Speed hdu 1160(动态规划,最长上升子序列+记录路径)

http://acm.hdu.edu.cn/showproblem.php?pid1160 题意&#xff1a;现给出老鼠的体重与速度&#xff0c;要求你找出符合要求的最长子序列。 要求是 W[m[1]] < W[m[2]] < ... < W[m[n]]&#xff08;体重&#xff09; && S[m[1]] > S[m[2]] > ... > S[…

设计一个名为complex的类来表示复数_complex类java解决

作者&#xff1a;wzu_cza123出自&#xff1a;CSDN原文&#xff1a;blog.csdn.net/wzu_cza123/article/details/108857953?utm_mediumdistribute.pc_category.none-task-blog-hot-5.nonecase&depth_1-utm_sourcedistribute.pc_category.none-task-blog-hot-5.nonecase&…

小程序onload_微信小程序开发入门之共享账本(十四)

微信小程序开发入门之共享账本(十四)(备注&#xff1a;微信小程序的wxml文件相当于HTML文件&#xff0c;wxss文件相当于CSS文件&#xff0c;js文件就是JavaScript文件&#xff0c;数据库为NoSQL数据库&#xff0c;数据库脚本语言也同NoSQL&#xff0c;因为是运行在微信内&#…

POJ 3342 树形DP+Hash

这是很久很久以前做的一道题&#xff0c;可惜当时WA了一页以后放弃了。 今天我又重新捡了起来。&#xff08;哈哈1A了&#xff09; 题意&#xff1a; 没有上司的舞会判重 思路&#xff1a; hash一下树形DP 题目中给的人名hash到数字&#xff0c;再进行运算。 树形DP f[x…