HTML【详解】input 标签
input 标签主要用于接收用户的输入,随 type 属性值的不同,变换其具体功能。
通用属性
| 属性 | 属性值 | 功能 |
|---|---|---|
| name | 字符串 | 定义输入字段的名称,在表单提交时,服务器通过该名称来获取对应的值 |
| disabled | 布尔值 | 禁用输入框,使其无法被用户修改和操作,也不会被提交 |
| readonly | 布尔值 | 使输入框内容只读,无法编辑,但可以被选中和复制 |
输入框
| 属性 | 属性值 | 功能 |
|---|---|---|
| value | 字符串 | 输入框的默认值 |
| placeholder | 字符串 | 输入框内的提示文本,当用户未输入内容时显示,输入内容后消失 |
单行文本输入框 text

<input type="text" name="username" placeholder="请输入用户名" />
| 属性 | 属性值 | 功能 |
|---|---|---|
| maxlength | 数字 | 可输入的最大字符数 |
密码输入框 password

<input type="password" name="password" placeholder="请输入密码" />
数字输入框 number
可通过上下箭头调整数值

<input type="number" name="age" min="0" max="200" />
| 属性 | 属性值 | 功能 |
|---|---|---|
| min | 数字 | 最小值 |
| max | 数字 | 最大值 |
| step | 数字 | 输入值的增量或减量 |
step="2"表示输入值的增量或减量为 2,min="0"表示最小值为 0。用户只能输入 0、2、4、6 等符合步长规则的值。
电子邮件输入框 email

<input type="email" name="email" placeholder="请输入邮箱地址" />
网址输入框 url

<input type="url" name="website" placeholder="请输入网址">
搜索输入框 search
用于搜索的文本字段,一些浏览器会显示搜索图标等样式

<input type="search" name="search" placeholder="请输入搜索内容" />
按钮 submit reset button image

<input type="submit" value="提交" /><input type="reset" value="重置" /><!-- 普通按钮 --><input type="button" value="按钮" /><!-- 使用图像作为提交按钮 --><input type="image" src="submit-button.png" alt="Submit Form" />
- 提交按钮,用于将表单数据发送到服务器进行处理
- 重置按钮,点击可将表单字段重置为初始值
- 普通按钮,通常与 JavaScript 一起使用来触发脚本或执行特定操作
| 属性 | 属性值 | 功能 |
|---|---|---|
| formaction | 字符串 | 用于覆盖 <form> 元素本身的 action 属性,允许在同一个表单中为不同的提交按钮指定不同的目标 URL,使表单数据可以根据不同的操作需求提交到不同的处理页面。 |
<input type="submit" formaction="URL1">
<input type="image" formaction="URL2">
<button type="submit" formaction="URL3">提交</button>
用户点击 <input type="image"> 按钮时,除了表单中的其他数据,浏览器还会自动提交两个额外的参数:x 和 y,它们分别表示用户点击图像的水平和垂直坐标。在服务器端脚本中可以获取这些坐标值。
单选 radio

<input type="radio" name="sex" value="男" checked />男<input type="radio" name="sex" value="女" />女
| 属性 | 属性值 | 功能 |
|---|---|---|
| checked | 布尔值 | 设置默认选中状态 |
多选 checkbox
<input type="checkbox" name="hobby" value="篮球" />篮球<input checked type="checkbox" name="hobby" value="阅读" />阅读<input checked type="checkbox" name="hobby" value="编程" />编程
| 属性 | 属性值 | 功能 |
|---|---|---|
| checked | 布尔值 | 设置默认选中状态 |
文件上传 file

<input type="file" />
滑块 range

<input type="range" name="range" min="0" max="100" step="1" />
| 属性 | 属性值 | 功能 |
|---|---|---|
| step | 数字 | 滑块移动的间隔 |
| min | 数字 | 最小值 |
| max | 数字 | 最大值 |
step="5"意味着滑块每次移动的距离是 5 个单位,用户可以选择的值为 0、5、10 等
颜色选择器 color
用户可以选择颜色

<input type="color" name="color" />
日期选择器 date
<input type="date" name="birthdate" />

step="7"表示日期选择的间隔为 7 天,用户只能选择每周的同一天。
时间选择器 time
<input type="time" name="startTime" />

相关文章:
HTML【详解】input 标签
input 标签主要用于接收用户的输入,随 type 属性值的不同,变换其具体功能。 通用属性 属性属性值功能name字符串定义输入字段的名称,在表单提交时,服务器通过该名称来获取对应的值disabled布尔值禁用输入框,使其无法被…...
二叉搜索树的实现(C++)
前言 二叉搜索树(搜索二叉树,Binary search tree)是一种特殊的二叉树。其规则为:左子树的值一定小于等于根,右子树的值一定大于等于根,并且左右子树也为搜索二叉树。 二叉搜索树的插入 1.若树为空…...
vue2老版本 npm install 安装失败_安装卡主
vue2老版本 npm install 安装失败_安装卡主 特别说明:vue2老版本安装慢、运行慢,建议升级vue3element plus vite 解决方案1: 第一步、修改npm 镜像为国内镜像 使用淘宝镜像: npm config set registry https://registry.npmmir…...
【MySQL】索引篇
1.什么时候适用索引? 字段有唯一限制,比如商品编码经常用于where查询条件的字段经常用于group by和order by 的字段 2.什么时候不需要创建索引? 字段中存在大量重复经常更新的字段表数据太少的时候 where条件、group by,order by里…...
Arduino 第十六章:pir红外人体传感器练习
Arduino 第十六章:PIR 传感器练习 一、引言 在 Arduino 的众多有趣项目中,传感器的应用是非常重要的一部分。今天我们要学习的主角是 PIR(被动红外)传感器。PIR 传感器能够检测人体发出的红外线,常用于安防系统、自动…...
鸿蒙面试题
1.0penHarmony的系统架构是怎样的? 2.电话服务的框架? 3.OpenHarmony与HarmonyOS有啥区别?...
Rust 语言入门(一):打印与格式化输出
对于初学者来说,掌握 Rust 的基本 I/O 操作是入门的第一步。本篇博客将介绍 Rust 语言的打印机制,包括基本的 print!、println! 宏,格式化输出方式,并探讨其底层原理。 Rust 的基本打印 在 Rust 中,最常见的输出方式…...
vue3.x 的 toRef详细解读
在 Vue 3.x 中,toRef 是一个用于创建响应式引用的工具函数。它可以将一个响应式对象的某个属性转换为一个独立的 ref 对象,同时保持与原始属性的响应式连接。以下是 toRef 的详细解读和示例。 1. toRef 的作用 核心功能 toRef 用于从响应式对象&#x…...
wordpress资讯类网站整站打包
wordpress程序,内置了价值499元的模板.但是有了模板没有全自动采集相信大多数人都搞不懂,目录那么多,全靠原创几乎是不可能的事情,除非你是大公司,每人控制一个板块, 这套源码里面最有价值的应该是这个采集…...
GitHub基本操作及Git简单命令
GitHub简介 GitHub就是一个远程仓库,远程仓库可以理解为就是一个可以保存自己代码的地方,在实际开发当中一个项目往往是有多个人来共同协作开发完成的,那么就需要一个统一代码保存的地方,而GitHub就是起到一个共享和汇总代码的作…...
记一次MySQL故障解决
记一次MySQL故障解决 1 故障现象2 故障排查2.1 查看MySQL服务状态2.2 查看服务日志 3 解决方法3.1 增加 wait_timeout 和 interactive_timeout 参数的值,确保连接不会因超时而被关闭:3.2 检查服务已经恢复正常,不过以上只是临时修改ÿ…...
DeepSeek-R1私有化部署教程 | Linux服务器搭建AI大语言模型
**云服务器用LinuxDockerOllamaOpenWebUI部署DeepSeek-R1大语言模型(LLMs),DeepSeek本地化部署教程(在自己电脑上部署也可以参考此教程)。**超详细教程,手把手。 在当今数字化时代,大型语言模型…...
「软件设计模式」桥接模式(Bridge Pattern)
深入解析桥接模式:解耦抽象与实现的艺术 一、模式思想:正交维度的优雅解耦 桥接模式(Bridge Pattern)通过分离抽象(Abstraction)与实现(Implementation),使二者可以独立…...
【Flink快速入门-5.流处理之多流转换算子】
流处理之多流转换算子 实验介绍 前面实验中介绍的算子已经能够满足我们的大部分开发需求了,但是在实际工作中有时候还会遇到一些业务场景,例如需要摄入多个输入流并将其合并处理,或者需要将一条输入流分割为多条子流,在不同的子…...
react传递函数与回调函数原理
为什么 React 允许直接传递函数? 回调函数核心逻辑 例子:父组件控制 Modal 的显示与隐藏 // 父组件 (ParentComponent.tsx) import React, { useState } from react; import { Modal, Button } from antd; import ModalContent from ./ModalContent;co…...
华为云kubernetes基于keda自动伸缩deployment副本(监听redis队列长度)
1 概述 KEDA(Kubernetes-based Event-Driven Autoscaler,网址是https://keda.sh)是在 Kubernetes 中事件驱动的弹性伸缩器,功能非常强大。不仅支持根据基础的CPU和内存指标进行伸缩,还支持根据各种消息队列中的长度、…...
Spring源码分析のBean扫描流程
文章目录 前言一、scanCandidateComponents1.1 isCandidateComponent1.1.1、排除/包含过滤器1.1.2、条件装配1.1.3、重载一1.1.4、重载二1.1.5、补充:Lookup注解 总结 前言 原生的Spring在构造ApplicationContext时,会调用refresh方法。其中就包含了扫描…...
Ubuntu安装docker:docker-desktop : 依赖: docker-ce-cli 但无法安装它、无法定位软件包 docker-ce-cli
具体错误 sudo apt-get install ./docker-desktop-amd64.deb [sudo] password for weiyu: 正在读取软件包列表... 完成 正在分析软件包的依赖关系树... 完成 正在读取状态信息... 完成 注意,选中 docker-desktop 而非 ./docker-desktop-amd64.de…...
基于大数据的奥运会获奖数据分析系统设计与实现
【大数据】基于大数据的奥运会获奖数据分析系统设计与实现(完整系统源码开发笔记详细部署教程)✅ 目录 一、项目简介二、项目界面展示三、项目视频展示 一、项目简介 该系统通过集成先进的数据抓取、处理、存储与可视化技术,为深入理解奥运会…...
数据结构 堆和priority_queue
一、堆的定义 堆(heap),是⼀棵有着特殊性质的完全⼆叉树,可以⽤来实现优先级队列(priorityqueue)。 堆需要满⾜以下性质: 1. 是⼀棵完全⼆叉树; 2. 对于树中每个结点,如…...
[特殊字符] 智能合约中的数据是如何在区块链中保持一致的?
🧠 智能合约中的数据是如何在区块链中保持一致的? 为什么所有区块链节点都能得出相同结果?合约调用这么复杂,状态真能保持一致吗?本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里…...
R语言AI模型部署方案:精准离线运行详解
R语言AI模型部署方案:精准离线运行详解 一、项目概述 本文将构建一个完整的R语言AI部署解决方案,实现鸢尾花分类模型的训练、保存、离线部署和预测功能。核心特点: 100%离线运行能力自包含环境依赖生产级错误处理跨平台兼容性模型版本管理# 文件结构说明 Iris_AI_Deployme…...
PHP和Node.js哪个更爽?
先说结论,rust完胜。 php:laravel,swoole,webman,最开始在苏宁的时候写了几年php,当时觉得php真的是世界上最好的语言,因为当初活在舒适圈里,不愿意跳出来,就好比当初活在…...
Day131 | 灵神 | 回溯算法 | 子集型 子集
Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣(LeetCode) 思路: 笔者写过很多次这道题了,不想写题解了,大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...
汽车生产虚拟实训中的技能提升与生产优化
在制造业蓬勃发展的大背景下,虚拟教学实训宛如一颗璀璨的新星,正发挥着不可或缺且日益凸显的关键作用,源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例,汽车生产线上各类…...
如何为服务器生成TLS证书
TLS(Transport Layer Security)证书是确保网络通信安全的重要手段,它通过加密技术保护传输的数据不被窃听和篡改。在服务器上配置TLS证书,可以使用户通过HTTPS协议安全地访问您的网站。本文将详细介绍如何在服务器上生成一个TLS证…...
Python ROS2【机器人中间件框架】 简介
销量过万TEEIS德国护膝夏天用薄款 优惠券冠生园 百花蜂蜜428g 挤压瓶纯蜂蜜巨奇严选 鞋子除臭剂360ml 多芬身体磨砂膏280g健70%-75%酒精消毒棉片湿巾1418cm 80片/袋3袋大包清洁食品用消毒 优惠券AIMORNY52朵红玫瑰永生香皂花同城配送非鲜花七夕情人节生日礼物送女友 热卖妙洁棉…...
Java求职者面试指南:Spring、Spring Boot、MyBatis框架与计算机基础问题解析
Java求职者面试指南:Spring、Spring Boot、MyBatis框架与计算机基础问题解析 一、第一轮提问(基础概念问题) 1. 请解释Spring框架的核心容器是什么?它在Spring中起到什么作用? Spring框架的核心容器是IoC容器&#…...
浪潮交换机配置track检测实现高速公路收费网络主备切换NQA
浪潮交换机track配置 项目背景高速网络拓扑网络情况分析通信线路收费网络路由 收费汇聚交换机相应配置收费汇聚track配置 项目背景 在实施省内一条高速公路时遇到的需求,本次涉及的主要是收费汇聚交换机的配置,浪潮网络设备在高速项目很少,通…...
LINUX 69 FTP 客服管理系统 man 5 /etc/vsftpd/vsftpd.conf
FTP 客服管理系统 实现kefu123登录,不允许匿名访问,kefu只能访问/data/kefu目录,不能查看其他目录 创建账号密码 useradd kefu echo 123|passwd -stdin kefu [rootcode caozx26420]# echo 123|passwd --stdin kefu 更改用户 kefu 的密码…...
