当前位置： 首页 > news >正文

表单标记（html）

news 2026/3/28 7:47:07

前言

发现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要方便一点。

相关文章：

表单标记（html）

前言 发现input的type属性还是有挺多的&#xff0c;这里把一些常用的总结一下。 HTML 输入类型 (w3school.com.cn)https://www.w3school.com.cn/html/html_form_input_types.asp text-文本 文本输入,如果文字太长&#xff0c;超出的部分就不会显示。 定义供文本输入的单行…...

编程日记 2024/2/10 22:40:07

Linux文件和目录管理

目录基础 Linux操作系统以目录的方式来组织和管理系统中的所有文件。所谓的目录&#xff0c;就是将所有文件的说明信息采用树状结构组织起来。每个目录节点之下会有文件和子目录。 所有一切都从 ‘根’ 开始&#xff0c;用 ‘/’ 代表, 并且延伸到子目录。 bin&#xff1a;B…...

编程日记 2024/2/10 22:33:00

【go】gorm\xorm\ent事务处理

文章目录 1 gorm1.1 开启事务1.2 执行操作1.3 提交或回滚 2 xorm2.1 开启事务2.2 执行操作2.3 提交或回滚 3 ent3.1 开启事务3.2 执行操作3.3 提交或回滚 前言&#xff1a;本文介绍golang三种orm框架对数据库事务的操作 1 gorm Begin开启事务 tx *gorm.DB 1.1 开启事务 tx :…...

编程日记 2024/2/10 22:32:00

【数据分享】1929-2023年全球站点的逐月平均风速（Shp\Excel\免费获取）

气象数据是在各项研究中都经常使用的数据&#xff0c;气象指标包括气温、风速、降水、能见度等指标&#xff0c;说到气象数据&#xff0c;最详细的气象数据是具体到气象监测站点的数据&#xff01; 有关气象指标的监测站点数据&#xff0c;之前我们分享过1929-2023年全球气象站…...

编程日记 2024/2/10 22:26:53

IP地址详解

IP地址是互联网协议&#xff08;Internet Protocol&#xff09;用于标识并定位网络中主机&#xff08;如计算机、服务器、路由器等&#xff09;的一串数字。它是一个32位的二进制数&#xff0c;通常以四个数字&#xff08;每个数字范围为0-255&#xff09;的形式显示&#xff0…...

编程日记 2024/2/10 22:17:44

Python爬虫http基本原理#2

Python爬虫逆向系列&#xff08;更新中&#xff09;&#xff1a;http://t.csdnimg.cn/5gvI3 HTTP 基本原理 在本节中&#xff0c;我们会详细了解 HTTP 的基本原理&#xff0c;了解在浏览器中敲入 URL 到获取网页内容之间发生了什么。了解了这些内容&#xff0c;有助于我们进一…...

编程日记 2024/2/10 22:14:41

Web Services 服务 是不是过时了？创建 Web Services 服务实例

Web Services 是不是过时了&#xff1f; 今天是兔年最后一天&#xff0c;先给大家拜个早年 。 昨天上午视频面试一家公司需要开发Web Services 服务&#xff0c;这个也没有什么&#xff0c;但还需要用 VB.net 开发。这个是多古老的语言了&#xff0c;让我想起来了 10年 前 写 …...

编程日记 2024/2/10 22:11:38

redis单线程还快的原因

1. 内存存储和高效数据结构&#xff1a; 内存存储&#xff1a; Redis将数据存储在内存中&#xff0c;因此可以实现非常高的读写速度&#xff0c;而无需频繁的磁盘I/O操作。 高效数据结构&#xff1a; Redis内置了丰富且高效的数据结构&#xff0c;如字符串、哈希表、列表、集合…...

编程日记 2024/2/10 22:10:37

【flutter】报错 cmdline-tools component is missing

在flutterSDK目录下&#xff0c;双击flutter_console.bat&#xff0c;调出命令行。 输入flutter doctor&#xff0c;如果第三个诊断为[x]&#xff0c;报cmdline-tools component is missing错&#xff08;我这已经修改好了&#xff0c;所以是勾了&#xff09;&#xff0c;那就可…...

编程日记 2024/2/10 22:08:34

以用户为中心，酷开科技荣获“消费者服务之星”

在企业顺应消费升级的道路中&#xff0c;企业自身不仅要着力强化对于消费者服务意识的提升&#xff0c;并且要树立诚信自律的行业示范带头作用&#xff0c;助力消费环境稳中向好&#xff0c;不断满足人民群众对美好生活的期待。企业的发展需要消费者的认可&#xff0c;酷开科技…...

编程日记 2024/2/10 22:07:33

Days 27 ElfBoard 板 AltiumDesigner 相同电路快速布局布线

在进行设计开发的时候&#xff0c;总会遇到相同的电路&#xff0c;或者模块&#xff0c;这些电路可以使用相同的布局和走线&#xff0c;例如 DC-DC 电源、网口 PHY 电路部分。这类型的电路&#xff0c;我们可以采用AltiumDesigner 中的 Room 进行布局和布线的快速复制&#xff…...

编程日记 2024/2/10 22:04:31

除夕快乐（前端小烟花）

家人们&#xff0c;新的一年好运常在&#xff0c;愿大家在新的一年里得偿所愿&#xff0c;发财暴富&#xff0c;愿大家找到属于自己的那个公主&#xff0c;下面就给大家展示一下给公主的烟花 前端烟花 新的一年&#xff0c;新的挑战&#xff0c;愿我们不忘初心&#xff0c;砥砺…...

编程日记 2024/2/10 22:03:30

fast.ai 深度学习笔记（二）

深度学习 2&#xff1a;第 1 部分第 4 课 原文&#xff1a;medium.com/hiromi_suenaga/deep-learning-2-part-1-lesson-4-2048a26d58aa 译者&#xff1a;飞龙 协议&#xff1a;CC BY-NC-SA 4.0 来自 fast.ai 课程的个人笔记。随着我继续复习课程以“真正”理解它&#xff0c;这…...

编程日记 2024/2/10 22:00:26

风行智能电视G32Y 强制刷机升级方法，附刷机升级数据MstarUpgrade.bin

升级步骤&#xff1a; 1、下载刷机数据&#xff0c;如是压缩包&#xff0c;需要先解压&#xff0c;然后将刷机bin格式的文件重命名为MstarUpgrade.bin 2、将此文件放到U盘根目录 &#xff08;U盘格式FAT32&#xff0c;单分区&#xff0c;建议4G的优盘刷机成功率高&#xff09;…...

编程日记 2024/2/10 21:59:24

tsgctf-2021-lkgit-无锁竞争-userfaultfd

启动脚本 qemu-system-x86_64 \-kernel ./bzImage \-initrd ./rootfs.cpio \-nographic \-monitor /dev/null \-cpu kvm64,smep,smap \-append "consolettyS0 kaslr oopspanic panic1 quiet" \-no-reboot \-m 256M题目 lkgit_hash_object #define HASH_SIZE …...

编程日记 2024/2/10 21:58:23

物联网数据隐私保护技术

在物联网&#xff08;IoT&#xff09;的世界中&#xff0c;无数的设备通过互联网连接在一起&#xff0c;不断地收集、传输和处理数据。这些数据有助于提高生产效率、优化用户体验并创造新的服务模式。然而&#xff0c;随着数据量的剧增&#xff0c;数据隐私保护成为了一个不能忽…...

编程日记 2024/2/10 21:57:22

RabbitMQ-1.介绍与安装

介绍与安装 1.RabbitMQ1.0.技术选型1.1.安装1.2.收发消息1.2.1.交换机1.2.2.队列1.2.3.绑定关系1.2.4.发送消息 1.2.数据隔离1.2.1.用户管理1.2.3.virtual host 1.RabbitMQ 1.0.技术选型 消息Broker&#xff0c;目前常见的实现方案就是消息队列&#xff08;MessageQueue&…...

编程日记 2024/2/10 21:55:19

CSS高级技巧

一、 精灵图 1.1 为什么需要精灵图&#xff1f; 1.2 精灵图&#xff08;sprites&#xff09;的使用 二、 字体图标 2.1 字体图标的产生 2.2 字体图标的优点 2.3 字体图标的下载 icomoom字库 http://icomoon.io 阿里iconfont字库 http://www.iconfont.cn/ 2.4 字体图标的引用…...

编程日记 2024/2/10 21:48:12

Redis的数据类型Hash使用场景实战

Redis的数据类型Hash使用场景 常见面试题&#xff1a;redis在你们项目中是怎么用的&#xff0c;除了String数据类型还使用什么数据类型&#xff1f; 怎么保证缓存和数据一致性等问题… Hash模型使用场景 知识回顾&#xff1a; redisTemplate.opsForHash() 方法是 Redis 的 …...

编程日记 2024/2/10 21:46:10

HttpClient | 支持 HTTP 协议的客户端编程工具包

目录 1、简介 2、应用场景 3、导入 4、API 5、示例 5.1、GET请求 5.2、POST请求 &#x1f343;作者介绍&#xff1a;双非本科大三网络工程专业在读&#xff0c;阿里云专家博主&#xff0c;专注于Java领域学习&#xff0c;擅长web应用开发、数据结构和算法&#xff0c;初…...

编程日记 2024/2/10 21:45:09

别再死记硬背BPSK公式了！用Python+NumPy手把手带你仿真2PSK信号生成与解调全过程

用Python实战BPSK&#xff1a;从信号生成到误码率分析的完整指南 通信工程专业的学生常常被各种调制公式搞得晕头转向&#xff0c;尤其是BPSK&#xff08;二进制相移键控&#xff09;这类基础但抽象的概念。今天&#xff0c;我们将彻底改变这种学习方式——通过Python代码和可视…...

编程新知 2026/3/28 7:43:21

Qwen3-0.6B-FP8部署详解：如何用16GB显存跑通FP8量化版Qwen3轻量推理

Qwen3-0.6B-FP8部署详解&#xff1a;如何用16GB显存跑通FP8量化版Qwen3轻量推理 想体验最新的大语言模型&#xff0c;但被动辄几十GB的显存需求劝退&#xff1f;今天&#xff0c;我们来解决这个痛点。 Qwen3系列模型以其强大的推理和对话能力备受关注&#xff0c;但其标准版本…...

编程新知 2026/3/28 6:48:50

OpenClaw隐私保护：GLM-4.7-Flash本地处理敏感数据的实践方案

OpenClaw隐私保护&#xff1a;GLM-4.7-Flash本地处理敏感数据的实践方案 1. 为什么需要本地化AI处理敏感数据&#xff1f; 去年我在处理公司财务报告自动化时遇到一个棘手问题&#xff1a;使用云端AI服务需要上传包含客户隐私的Excel文件到第三方服务器。尽管服务商承诺数据安…...

编程新知 2026/3/28 6:34:48

药物发现必备：RDKit分子指纹在虚拟筛选中的7种高级用法

药物发现必备&#xff1a;RDKit分子指纹在虚拟筛选中的7种高级用法 在当今药物研发领域&#xff0c;虚拟筛选已成为加速药物发现流程的关键技术。面对海量化合物库&#xff0c;如何高效准确地识别潜在活性分子&#xff1f;RDKit分子指纹技术提供了强有力的解决方案。不同于基础…...

编程新知 2026/3/28 6:30:42

Phi-4-reasoning-vision-15B企业案例：银行客户经理用截图快速生成信贷摘要

Phi-4-reasoning-vision-15B企业案例&#xff1a;银行客户经理用截图快速生成信贷摘要 1. 业务痛点与解决方案 1.1 银行信贷业务的效率瓶颈 在传统银行信贷审批流程中&#xff0c;客户经理需要花费大量时间整理客户资料、录入系统信息、撰写信贷报告。一个典型的信贷审批案例…...

编程新知 2026/3/28 6:06:28

UE5.3与Colosseum集成配置指南及常见问题解析

1. 环境准备&#xff1a;Windows系统下的基础配置 在开始Colosseum与UE5.3的集成之前&#xff0c;我们需要确保开发环境满足基本要求。我最近在Windows 11系统上完成了一次完整配置&#xff0c;实测下来这几个关键组件版本组合最稳定&#xff1a; 操作系统&#xff1a;Windows …...

编程新知 2026/3/28 5:58:23

Z-Image-GGUF模型解析：C语言视角下的文件读写与GGUF格式处理

Z-Image-GGUF模型解析&#xff1a;C语言视角下的文件读写与GGUF格式处理 你是不是也好奇&#xff0c;那些动辄几十GB的大模型文件&#xff0c;计算机到底是怎么“看懂”并加载它们的&#xff1f;今天我们不聊高层的API调用&#xff0c;而是拿起C语言这把“手术刀”&#xff0c…...

编程新知 2026/3/28 5:18:01

MacOS极简部署OpenClaw：GLM-4.7-Flash模型联调与安全防护

MacOS极简部署OpenClaw&#xff1a;GLM-4.7-Flash模型联调与安全防护 1. 为什么选择OpenClawGLM-4.7-Flash组合 去年冬天&#xff0c;当我第一次尝试用Python脚本批量处理公司周报时&#xff0c;发现传统自动化工具对非结构化数据的处理能力非常有限。直到遇见OpenClaw这个能…...

编程新知 2026/3/28 4:42:02

05-OpenClaw 自动生成 PPT 实战：每天节省 3 小时

作者&#xff1a;程序员小明儿 字数&#xff1a;约 9000 字 阅读时间&#xff1a;约 25 分钟 难度&#xff1a;⭐⭐⭐ 中级 系列&#xff1a;OpenClaw 实战 16 例&#xff08;第 5 篇&#xff09; 前置条件&#xff1a;已完成 OpenClaw 环境部署和基础配置写在前面 你是不是也这…...

编程新知 2026/3/28 4:38:02

手把手教你用Swaks和Gophish绕过SPF，搭建自己的邮件钓鱼测试环境（附避坑指南）

企业级邮件安全测试实战&#xff1a;从SPF绕过到钓鱼环境搭建 邮件安全测试已成为企业安全防护体系中不可或缺的一环。据统计&#xff0c;超过90%的网络攻击始于钓鱼邮件&#xff0c;而其中近40%的成功攻击源于SPF配置不当或完全缺失。本文将系统性地介绍如何构建一个完整的邮件…...

编程新知 2026/3/28 4:15:54