HTML学习|初识表单post和get提交、文本框和单选框、按钮、多选框和下拉框、文本域和文件域、搜索框滑块和简单验证、表单的应用、表单初级验证

于 2024-05-09 01:23:07 发布
阅读量636 收藏 17
点赞数 5
分类专栏： 前端学习 文章标签： html 学习 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_73149966/article/details/138590571
版权

初识表单post和get提交

form标签是表单，method控制表单提交方式，get方式，表单填写的参数能够在跳转的url地址中看到，post方式是看不到的，action是向何处跳转表单数据

input标签，且type=text，是文本输入框，name设置的就是这个输入内容的参数名称

input标签，且type=password，是密码输入框，这个输入内容在页面上会变成保密的形式

input标签，且type=submit代表这是一个表单的提交按钮，value可以设置这个按钮的名称

input标签，且type=reset代表这是一个重置按钮，可以将表单输入的内容全部清除

文本框和单选框

文本框 

其中，文本输入框，也可通过value设置框中的默认值，maxlength可以设置文本框能输入的最多字符，size可以设置文本框的大小

单选框

input标签，且type=radio则代表是单选框，value代表的是选项的值，name代表的是参数名称，如果两个单选框的name一样，则在网页上勾选的时候，只能勾选其中一个

按钮、多选框、下拉框

按钮

按钮有如下四种按钮

多选框

input标签且type=checkbox的为多选框，value代表参数值，name代表参数名，页面勾选的时候即使name一样也能够勾选多个

无论是单选框还是多选框，在选项的后面加checked代表默认勾选

下拉框

select标签是下拉框，name代表参数名，option标签是一个个选项，value代表选项值，选项里加selected代表默认选项

文本域和文件域

文本域

textarea标签是文件域，name代表参数名称，cols和rows可设置文本域的宽高

文件域

input标签且type=file是文件域，name代表文件参数名

搜索框滑块和简单验证

搜索框

input标签，且type=search是搜索框，name是参数名，与文本框的区别就是在页面上，有个清除输入内容的按钮

滑块

input标签，且type=range是滑块，常用于音量的设置，name代表参数名，min和max分别代表滑块的最小值和最大值，step代表了滑块每拉取一下的变化步长

简单验证

邮箱验证

input标签且type=email，则输入的内容则会校验是否是邮箱格式

url验证

input标签且type=url，会校验输入内容是否符合url格式


数字验证

input标签且type=number，max和min设置数值能取的最大最小值，name代表参数名，step代表每次点击上或者下数字变化的步长

表单的应用

readonly

readonly代表该文本框默认值不能更改，只能看

disabled

disabled代表该选项不能够被选择

hidden

hidden可以让该输入框输入的参数或默认值在页面上不显示，但是提交的时候这个参数也会被携带

增强鼠标可用性

在一个文本上用label标签圈起来，然后for后面这个值代表如果点击这个文本要跳转到的输入框的id，比如我们设置一个id=mark的输入框，如果点击“你点我试试”，鼠标会默认选中这个输入框，方便后续输入内容

表单初级验证

placeholder

文本框后加placeholder可以设置文本框的提示内容

required

在文本框后加required，可以验证该文本框内容是否为空

pattern

在文本框后加pattern=“xxx”可以使用正则表达式来校验文本框输入内容的格式

玩复杂点
关注
  • 5
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
表单（二）文本框
kalinara的博客
07-19 1349
表单 文本框
js和jquery分别验证单选框、复选框、下拉框
01-19
本文分别介绍了js和jQuery验证单选框(radio)、多选框(checkbox)、下拉框(select)，分享给大家供大家参考，具体内容如下 (1).首先说单选框(radio)，radio和checkbox一样都是name相同值有多个在获取 radio 值的时候...
给表单添加一个提交按钮
qq_37499398的博客
05-02 5475
Add a Submit Button to a Form让我们来为你的form添加一个submit(提交)按钮，点击这个按钮，表单中的数据将会被发送到你通过action属性指定的地址上。下面是submit按钮的例子：<button type="submit">this button submits the form</button>为你的form元素添加一个type为su...
单文本框提交【转】
maqianmaqian的专栏
04-17 95
今天写项目时，表单里只有一个文本框和若干个文本域。可是在文本框中一回车，就提交表单，感觉莫名其妙。于是就全搜索Submit关键字和keyCode=13关键字，搜了一遍居然没有结果。想了一会，我又加了一个文本框。再次尝试，这次没问题了。一个表单中出现两个文本框，在某个文本框中回车就会不提交表单了。于是乎，把没用的那个文本样式设置为隐藏。 关键代码如下： <form action="durg...
HTML_表单的介绍&提交按钮
想要成为大佬的彪彪
10-24 6987
一：表单的定义 发送请求，并且携带数据给服务器。 表单和超链接有共同的特征，就是都可以向服务器发送请求， 只不过超链接是用户直接点击发送请求，不能填写数据。 而用户点击表单提交的时候，不但可以发送请求，而且请求中还可以携带输入的数据。 表单最主要的作用就是：收集用户的信息。 表单对应的英语单词是：for...
提交表单~
AturboS的博客
08-09 1653
.1提交表单 表单是通过用户点击提交按钮或图片按钮的方式提交的。提交按钮可以使用 type 属性为"submit" 的<input>或<button>元素来定义，图片按钮可以使用 type 属性为"image"的<input>元素来定义。 点击下面例子中定义的所有按钮都可以提交它们所在的表单： <!-- 通用提交按钮--> <input type="submit" value="Submit Form"> <!--..
vue.js实现单选框、复选框和下拉框示例
10-19
本篇文章主要介绍了vue.js实现单选框、复选框和下拉框示例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue表单绑定实现多选框和下拉列表的实例
08-29
本篇文章主要介绍了vue表单绑定实现多选框和下拉列表的实例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
form表单提交option多选框，后台接收处理
明天和意外哪个先到，其实这不重要
05-23 6867
有时候页面新增数据的时候一条一条添加很麻烦，操作很不友好，就需要点选很多次，这个时候多选框就很方便，传多个值到后台，后台处理再循环添加更方便一点，一般参数提交我们更多选用的是form表单提交的格式 form表单是根据name值确认给后台传的，因为一个对象，多选的name值一样它最终只会传一个值到后端，这就很烦了，除非不用form表单提交，而是把所有的参数都拼接起来使用传值，但是这样如果页面有改动...
【原创】表单提交之文本输入框(一)
大象的博客
11-13 584
去除字符串两边的空格 输入框去空格并判断是否为空 禁止输入
表单 多选 列表框 提交 php,HTML实现多选框及无法提交多数据的原因分析（附视频）...
weixin_30695909的博客
03-19 920
本篇文章主要给大家介绍HTML表单中多选框提交数据的具体操作方法以及无法提交多数据的原因分析。HTML表单通常是用来收集用户输入的数据，然后提交数据给服务器来进行交互。那么大家应该知道HTML收集用户数据可以通过单选框或者多选框等方式来获取。下面我们通过具体的代码实例，给大家介绍HTML表单多选框获取数据的相关操作。HTML表单代码示例如下：篮球足球排球乒乓球通过浏览器访问，多选框效果如下图：从上...
Form表单三种提交按钮的区别？
weixin_30345577的博客
01-21 290
1.<input type='button' id='btn' onclick='check()' value="提交"> 　　说明：只是普通的按钮(不附带提交功能)，不会触发form表单的submit()事件，所以点击后不会提交表单 好处：可加入js验证，验证后若想提交可使用 document.Formname.submit() -->js 提交函...
HTML_表单
weixin_73805051的博客
10-24 81
元素内部，您可以放置内容，比如文本或图像。这是该元素与使用<input>元素创建的按钮之间的不同之处。提示：请始终为<button>元素规定 type 属性。不同的浏览器对<button>元素的 type 属性使用不同的默认值。type属性:可以设置三个值 submit（提交）/reset（重置）/button（自定义按钮）与input元素设置的按钮含义一致<button type="button">按钮
HTML学习之路-04Html表单
weixin_63204687的博客
08-20 2023
完成了表单部分的学习
HTML表单提交方式详解
最新发布
m0_61394395的博客
11-20 3799
通过这篇文章，我们详细讨论了HTML表单的不同提交方式，每种方式的优缺点以及如何在实际项目中应用它们。在选择表单提交方式时，需要根据具体情况权衡安全性、易用性和性能等方面的需求，以提供最佳的用户体验。希望这些信息对你构建出色的表单交互有所帮助！
常用HTML标签及其属性
m0_63293142的博客
07-12 490
一、基本标签 1.标题标签 2.段落标签 3.斜体 4.粗体 5.水平线标签 6.换行标签 二、特殊符号 三、超链接 四、锚链接 五、图像标签 六、列表 1.无序列表 2.有序列表 3.自定义列表 七、表格 八、表单 九、多行文本域...
servlet表单中get和post方法的区别
weixin_33868027的博客
02-24 226
Form中的get和post方法，在数据传输过程中分别对应了HTTP协议中的GET和POST方法。二者主要区别如下：1、Get是用来从服务器上获得数据，而Post是用来向服务器上传递数据。2、Get将表单中数据的按照variable=value的形式，添加到action所指向的URL后面，并且两者使用“?”连接，而各个变量之间使用“&”连接；Post是将表单中的数据放在form的数据体中，...
Html 以 Form 表单的形式 发送 POST （JSON格式） 的数据
热门推荐
u013646034的博客
01-06 3万+
这里一定要注意几点：
HTML网站中须出现一张表单页面该表单页面应有按钮、输入框、单选框、复选框、下拉框、文本域
05-11
以下是一个简单的 HTML 表单页面，包含了按钮、输入框、单选框、复选框、下拉框、文本域等元素： ```html <!DOCTYPE html> <html> <head> <title>表单页面</title> </head> <body> <form> <label for="name">姓名：</label> <input type="text" id="name" name="name" required><br><br> <label for="gender">性别：</label> <input type="radio" id="male" name="gender" value="male" required> <label for="male">男</label> <input type="radio" id="female" name="gender" value="female" required> <label for="female">女</label><br><br> <label for="hobby">爱好：</label> <input type="checkbox" id="reading" name="hobby" value="reading"> <label for="reading">阅读</label> <input type="checkbox" id="music" name="hobby" value="music"> <label for="music">听音乐</label> <input type="checkbox" id="sports" name="hobby" value="sports"> <label for="sports">运动</label><br><br> <label for="city">城市：</label> <select id="city" name="city"> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="guangzhou">广州</option> <option value="shenzhen">深圳</option> </select><br><br> <label for="message">留言：</label><br> <textarea id="message" name="message" rows="5" cols="40"></textarea><br><br> <button type="submit">提交</button> </form> </body> </html> ``` 解释一下代码： - `<form>` 标签表示一个表单，包含了多个表单元素； - `<label>` 标签用于描述表单元素； - `<input>` 标签用于创建输入框，`type` 属性可以设置不同类型的输入框，如文本框、密码框、复选框、单选框等； - `<select>` 标签用于创建下拉框，内部使用多个 `<option>` 标签来定义选项； - `<textarea>` 标签用于创建文本域，可以输入多行文本； - `<button>` 标签用于创建按钮，`type` 属性可以设置不同类型的按钮，如提交按钮、重置按钮等。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值