表单标记(html)

前言

发现input的type属性还是有挺多的,这里把一些常用的总结一下。

HTML 输入类型 (w3school.com.cn)icon-default.png?t=N7T8https://www.w3school.com.cn/html/html_form_input_types.asp

text-文本

文本输入,如果文字太长,超出的部分就不会显示。

定义供文本输入的单行输入字段

姓名:<input type="text" name="name">

password-密码

密码,会用实心的小圆点代替输入的字符。

定义密码字段

密码:<input type="password" name="password">

radio- 收音机

单选按钮,用checked="checked"默认选中“男”,用label增大他的命中范围,使得点击字符“男”或“女”可以达到选中单选按钮的效果,同时通过name属性使得两个是一组,两者同时只能有一个被选中。

定义单选按钮

性别:<label><input type="radio" name="gender" value="1" checked="checked">男</label><label><input type="radio" name="gender" value="2">女</label>

 

checkbox- 复选框

和单选按钮不同的是,可以同时选中几个,同样使用label标签来增大命中的范围。

定义复选框

爱好:<label><input type="checkbox" name="hobby" value="ppq">乒乓球</label><label><input type="checkbox" name="hobby" value="lq">篮球</label><label><input type="checkbox" name="hobby" value="zq">足球</label>

 file-文件夹

可以上传计算机上面的文件,图片。

图像:<input type="file" name="image">

date- 日期

选择日期。

用于应该包含日期的输入字段

生日:<input type="date" name="birthday">

 

time- 时间

选择时间。

允许用户选择时间(无时区)

 时间:<input type="time" name="time">

datetime-local-本地时间 

选择日期和时间。

允许用于选择日期和时间(无时区),datetime是有时区

日期时间:<input type="datetime-local" name="datetime">

 

email-电子邮件

文本输入要符合电子邮件地址的规范。

用于应该包含电子邮件地址的输入字段

邮箱;<input type="email" name="email"><input type="submit" value="提交">

number- 数字

只能输入数字字符,且右边可以自增自减。

用于应该包含数字值的输入字段

年龄:<input type="number" name="age">

属性描述
disabled规定输入字段应该被禁用
max规定输入字段的最大值
maxlength规定输入字段的最大字符数
min规定输入字段的最小值
pattern规定通过其检查输入值的正则表达式
readonly规定输入字段为只读(无法修改)
required规定输入字段是必需的(必需填写)
size规定输入字段的宽度(以字符计)
step规定输入字段的合法数字间隔
value规定输入字段的默认值

select- 选择

下拉列表,通过selected默认选中。

学历:<select name="degree"><option value="1">初中</option><option value="2">高中</option><option value="3">大专</option><option value="4" selected="selected">本科</option><option value="5">硕士</option><option value="6">博士</option></select>

 

textarea-多行文本输入区

文本域, cols列,rows行。

 描述:<textarea name="description" cols="30" rows="10"></textarea>

button-按钮 

之后可以结合js来使用。

<input type="button" value="按钮">

reset-重置

把表单写的内容和清空,重新填写。

<input type="reset" value="重置">

submit-提交

把表单的信息post。

<input type="submit" value="提交">

总结

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表单</title>
</head><body><form action="" method="post">姓名:<input type="text" name="name"><br><br>密码:<input type="password" name="password"><br><br>性别:<label><input type="radio" name="gender" value="1" checked="checked">男</label><label><input type="radio" name="gender" value="2">女</label><br><br>爱好:<label><input type="checkbox" name="hobby" value="ppq">乒乓球</label><label><input type="checkbox" name="hobby" value="lq">篮球</label><label><input type="checkbox" name="hobby" value="zq">足球</label><br><br>图像:<input type="file" name="image"><br><br>生日:<input type="date" name="birthday"><br><br>时间:<input type="time" name="time"><br><br>日期时间:<input type="datetime-local" name="datetime"><br><br>邮箱;<input type="email" name="email"><br><br>年龄:<input type="number" name="age"><br><br>学历:<select name="degree"><option value="1">初中</option><option value="2">高中</option><option value="3">大专</option><option value="4" selected="selected">本科</option><option value="5">硕士</option><option value="6">博士</option></select><br><br>描述:<textarea name="description" cols="30" rows="10"></textarea><br><br><input type="hidden" name="id" value="1"><input type="button" value="按钮"><input type="reset" value="重置"><input type="submit" value="提交"></form>
</body></html>

这个日期属性我之前还用的是下拉框,没想到有date属性,比用select要方便一点。

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

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

相关文章

【原创 附源码】Flutter海外登录--Tiktok登录最详细流程

最近接触了几个海外登录的平台&#xff0c;踩了很多坑&#xff0c;也总结了很多东西&#xff0c;决定记录下来给路过的兄弟坐个参考&#xff0c;也留着以后留着回顾。更新时间为2024年2月7日&#xff0c;后续集成方式可能会有变动&#xff0c;所以目前的集成流程仅供参考&#…

【 buuctf--刷新过的图片】

前言&#xff1a;这题主要运用到了新的工具F5-steganography由于 java 环境不合适的原因&#xff0c;我不得不重新配java11.0.18。 具体思路&#xff1a;非常帅气的一张图片。。。用 binwalk&#xff0c;stegsolve&#xff0c;zsteg&#xff0c;exiftool 等工具无果后&#xf…

按键扫描16Hz-单片机通用模板

按键扫描16Hz-单片机通用模板 一、按键扫描的原理1、直接检测高低电平类型2、矩阵扫描类型3、ADC检测类型二、key.c的实现1、void keyScan(void) 按键扫描函数①void FHiKey(void) 按键按下功能②void FSameKey(void) 按键长按功能③void FLowKey(void) 按键释放功能三、key.h的…

C++自定义函数详解

个人主页&#xff1a;PingdiGuo_guo 收录专栏&#xff1a;C干货专栏 铁汁们新年好呀&#xff0c;今天我们来了解自定义函数。 文章目录 1.数学中的函数 2.什么是自定义函数 3.自定义函数如何使用&#xff1f; 4.值传递和引用传递&#xff08;形参和实参区分&#xff09; …

macbookair怎么清理内存 ?如何利用 CleanMyMac X 进行系统清理

macbookair怎么清理内存 清理MacBook Air的内存可以通过以下几种方法&#xff1a; 优化储存空间。在MacBook Air上&#xff0c;可以通过“优化储存空间”来释放空间。这包括将文件储存在iCloud中&#xff0c;如桌面、文稿和iCloud信息&#xff0c;以及自动移除在iCloud中观看…

懒人精灵 之 Lua 捕获 json解析异常 ,造成的脚本停止.

Time: 2024年2月8日20:21:17 by:MemoryErHero 1 异常代码 Expected value but found T_END at character 12 异常代码 Expected value but found T_OBJ_END at character 223 处理方案 - 正确 json 示范 while true do--Expected value but found T_END at character 1--Ex…

Linux命令行工具使用HTTP代理的方法详解

亲爱的Linux用户们&#xff0c;有没有想过在命令行世界里&#xff0c;你的每一个指令都能悄无声息地穿越千山万水&#xff0c;而不被外界窥探&#xff1f;哈哈&#xff0c;没错&#xff0c;就是通过HTTP代理&#xff01;今天&#xff0c;我们就来一起探索如何在Linux命令行工具…

图解 V8 执行 JS 的过程

本文来分享 V8 引擎执行 JavaScript 的过程 1. JS 代码执行过程 在说V8的执行JavaScript代码的机制之前&#xff0c;我们先来看看编译型和解释型语言的区别。 编译型语言和解释型语言 我们知道&#xff0c;机器是不能直接理解代码的。所以&#xff0c;在执行程序之前&#xf…

用sdkman在linux上管理多个java版本

概述&#xff1a; SDKMAN 是一个用于管理软件开发工具的工具&#xff0c;允许您轻松地安装、升级和切换不同版本的 JDK、Maven、Gradle 等工具。以下是在 Linux 上安装 SDKMAN! 的基本步骤&#xff1a; 安装SdkMan 使用 curl 安装 SDKMAN!: 打开终端&#xff0c;并运行以下命…

git合入的parents和child

最近在管理代码&#xff0c;有2的权限&#xff0c;看到一些以前1看不到的东西。 有时候会遇到多个人基于同一节点提交代码&#xff0c;那就要选择先合入和后合入&#xff0c;如果这多人修改到同一个文件同一个地方&#xff0c;就可能产生冲突&#xff0c;一般要避免这种情况出…

Springboot拦截器中跨域失效的问题、同一个接口传入参数不同,一个成功,一个有跨域问题、拦截器和@CrossOrigin和@Controller

Springboot拦截器中跨域失效的问题 一、概述 1、具体场景 起因&#xff1a; 同一个接口&#xff0c;传入不同参数进行值的修改时&#xff0c;一个成功&#xff0c;另一个竟然失败&#xff0c;而且是跨域问题拦截器内的request参数调用getHeader方法时&#xff0c;获取不到前端…

Nginx限流设置

1.反向代理(建议先看正向代理,反向代理则是同样你要与对方服务器建立连接,但是,代理服务器和目标服务器在一个LAN下,所以我们需要与代理服务器先建交,再由他获取与目标服务器的交互,好比一个带刀侍卫守护着目标服务器) 屏蔽目标服务器的真实地址&#xff0c;相对安全性较好&am…