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

于 2024-05-09 01:23:07 发布
阅读量666 收藏 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
    评论
专栏目录
HTML5-iframe内联框架、表单元素、功能组件
qq_61727355的博客
08-22 1100
在浏览器中按 F12 打开开发者工具，选择 Network，页面点击提交后会生成箭头所指的一条记录，点击该记录，在FormData处可看见提交信息。iframe标签与a标签的配合使用相当于a标签的target属性设为_self。3）与post 的对比：只需将上述代码的提交方式由get改为post即可。代码测试：只需在上述2中代码中添加几个元素即可。网页地址部分会附带提交的参数信息。src：引用页面地址。name：框架标识名。
vue.js实现单选框、复选框和下拉框示例
10-19
本篇文章主要介绍了vue.js实现单选框、复选框和下拉框示例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
HTML表单元素1（文本框、密码框、表单、单选框、复选框、下拉列表、文本域）
热门推荐
litengbin的博客
01-15 1万+
HTML的文本框 即表示文本框  并且只能够输入一行  如果要输入多行  使用文本域  注： 标签很特别，一般是不需要写成或者 这样的。  并且 这样的写法也是满足标准的 1.文本框 2.设置文本框的长度 使用属性size 3.初始值 使用属性value 4.有背景文字的文本框 使用属性placeholder  placeholder是一个ht
HTML中常用的“提交”按钮代码的表示方式
最新发布
2301_79083882的博客
04-24 459
如果想要提交按钮变得美观一点可以自己添加代码噢！两种代码看个人喜好哪一种，第二种比较方便噢！
HTML的form表单
2303_76599423的博客
05-13 2306
form表单中get为默认的提交方式，当使用get方式提交表单时，浏览器会将表单中的数据添加到地址后面，作为地址参数。form表单中ppst相较于get而言安全性更高在使用post方式提交表单时，表单中的数据将会被隐藏。1.3 value：元素的初始值，type为radio时必须指定一个值。当type=text、password时，表单元素的大小以字符为单位。cols="数字" --------- 多少列，表示文本域的宽度。1.4 size：指定表单元素的初始宽度。rows="数字"--------
HTML_表单
weixin_73805051的博客
10-24 97
元素内部，您可以放置内容，比如文本或图像。这是该元素与使用<input>元素创建的按钮之间的不同之处。提示：请始终为<button>元素规定 type 属性。不同的浏览器对<button>元素的 type 属性使用不同的默认值。type属性:可以设置三个值 submit（提交）/reset（重置）/button（自定义按钮）与input元素设置的按钮含义一致<button type="button">按钮
HTML表单初步认识和get,post表单提交
weixin_47556601的博客
01-23 1263
大家好，今天我们来分享一下HTML的表单初步认识和get,post表单提交 表单是一个包含表单元素的区域。 表单元素是允许用户在表单中输入内容,比如：文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。 表单使用表单标签 来设置: 表格的语法： 姓名和密码输入框 上源码实例： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8
提交表单~
AturboS的博客
08-09 1654
.1提交表单 表单是通过用户点击提交按钮或图片按钮的方式提交的。提交按钮可以使用 type 属性为"submit" 的<input>或<button>元素来定义，图片按钮可以使用 type 属性为"image"的<input>元素来定义。 点击下面例子中定义的所有按钮都可以提交它们所在的表单： <!-- 通用提交按钮--> <input type="submit" value="Submit Form"> <!--..
HTML -- 表单post和get提交
天行健 君子以自强不息，地势坤 君子以厚德载物。
02-27 5336
表单语法 示例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>注册</h1> <!--表单form action: 表单提交的位置,可以是网站,也可以是一个请求处理地址。 method: post，ge
06_HTML_表单提交的细节（submit提交按钮的使用细节）
qq_45657848的博客
01-13 9729
HTML_表单提交的细节（submit提交按钮的使用细节） file类型、隐藏域和提交submit的关系
HTML_表单的介绍&提交按钮
想要成为大佬的彪彪
10-24 7009
一：表单的定义 发送请求，并且携带数据给服务器。 表单和超链接有共同的特征，就是都可以向服务器发送请求， 只不过超链接是用户直接点击发送请求，不能填写数据。 而用户点击表单提交的时候，不但可以发送请求，而且请求中还可以携带输入的数据。 表单最主要的作用就是：收集用户的信息。 表单对应的英语单词是：for...
js和jquery分别验证单选框、复选框、下拉框
01-19
本文分别介绍了js和jQuery验证单选框(radio)、多选框(checkbox)、下拉框(select)，分享给大家供大家参考，具体内容如下 (1).首先说单选框(radio)，radio和checkbox一样都是name相同值有多个在获取 radio 值的时候...
vue表单绑定实现多选框和下拉列表的实例
08-29
vue表单绑定实现多选框和下拉列表的实例 在 Vue 框架中，实现多选框和下拉列表的实例是非常有用的。本文将介绍如何使用 Vue 实现多选框和下拉列表的实例，并且提供了详细的代码示例。 多选框的实现 在 Vue 中，...
零基础HTML入门教程(17)——表单的单选框和复选框
weixin_61808806的博客
12-06 3524
我们上一小结学习了，密码输入框和文本输入框，我们这一小结学习复选框和单选框。单选框用于从若干选项中选择其中一个，例如性别只能从男、女中选择一个： 效果如下 代码如下 效果如下 我们这一小节学习了单选框和复选框，我相信在大家，注册账号或者填写信息的时候很常见，在我们html里面单选框和复选框也很常用，我们要熟练使用。
对表格和表单的介绍，标签嵌套原则。
yaojxing的博客
04-06 4061
关于html中表格的介绍和表单的介绍。以及最常见标签的嵌套原则
html中的form表单以及相关控件input、文本域、下拉select等等的详细解释 ，点赞加关注持续更新~
小十七的个人分享博客
01-03 3642
表单、创建表单form、input 标签、input标签的value属性、设置input标签格式、单选框、多选框、上传文件、下拉菜单、文本域、设置文本域格式、label 标签、按钮
初识java--“以大欺小”&史上不太全的DOS命令和HTML标签小...
黑马程序员广州中心的专栏
12-05 100
初识java----“以大欺小”&史上不太全的DOS命令和HTML标签小归纳 这几天非常浅显的认识了java之后，有这样几个方面觉得到处充满了“以大欺小”的“恶意”。 基本数据类型 关键字 内存占用 取值范围 字节型...
HTML保姆级教程（三）表单标签
OakHachi'Blog
02-22 371
图解HTML，快速入门实战
html表单post请求方式的几种格式
三江的博客
06-13 3511
表单参数被放置在HTTP Body中传输，(body中的数据为：language=go&since=monthly)。因此在该HTTP请求的headers中我们会发现一个header字段：Content-Type，它的值为application/x-www-form-urlencoded。即将数据内容原封不动的放入Body中传输，保持数据的原先的编码方式(通常为utf-8)我们可以在Form中使用enctype属性改变Form传输数据的内容编码类型，这种格式和Get请求方式的查询字符串格式相同。
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、付费专栏及课程。

余额充值