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

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 标签主要用于接收用户的输入&#xff0c;随 type 属性值的不同&#xff0c;变换其具体功能。 通用属性 属性属性值功能name字符串定义输入字段的名称&#xff0c;在表单提交时&#xff0c;服务器通过该名称来获取对应的值disabled布尔值禁用输入框&#xff0c;使其无法被…...

二叉搜索树的实现(C++)

前言 二叉搜索树&#xff08;搜索二叉树&#xff0c;Binary search tree&#xff09;是一种特殊的二叉树。其规则为&#xff1a;左子树的值一定小于等于根&#xff0c;右子树的值一定大于等于根&#xff0c;并且左右子树也为搜索二叉树。 二叉搜索树的插入 1.若树为空&#xf…...

vue2老版本 npm install 安装失败_安装卡主

vue2老版本 npm install 安装失败_安装卡主 特别说明&#xff1a;vue2老版本安装慢、运行慢&#xff0c;建议升级vue3element plus vite 解决方案1&#xff1a; 第一步、修改npm 镜像为国内镜像 使用淘宝镜像&#xff1a; npm config set registry https://registry.npmmir…...

【MySQL】索引篇

1.什么时候适用索引&#xff1f; 字段有唯一限制&#xff0c;比如商品编码经常用于where查询条件的字段经常用于group by和order by 的字段 2.什么时候不需要创建索引&#xff1f; 字段中存在大量重复经常更新的字段表数据太少的时候 where条件、group by&#xff0c;order by里…...

Arduino 第十六章:pir红外人体传感器练习

Arduino 第十六章&#xff1a;PIR 传感器练习 一、引言 在 Arduino 的众多有趣项目中&#xff0c;传感器的应用是非常重要的一部分。今天我们要学习的主角是 PIR&#xff08;被动红外&#xff09;传感器。PIR 传感器能够检测人体发出的红外线&#xff0c;常用于安防系统、自动…...

鸿蒙面试题

1.0penHarmony的系统架构是怎样的? 2.电话服务的框架? 3.OpenHarmony与HarmonyOS有啥区别?...

Rust 语言入门(一):打印与格式化输出

对于初学者来说&#xff0c;掌握 Rust 的基本 I/O 操作是入门的第一步。本篇博客将介绍 Rust 语言的打印机制&#xff0c;包括基本的 print!、println! 宏&#xff0c;格式化输出方式&#xff0c;并探讨其底层原理。 Rust 的基本打印 在 Rust 中&#xff0c;最常见的输出方式…...

vue3.x 的 toRef详细解读

在 Vue 3.x 中&#xff0c;toRef 是一个用于创建响应式引用的工具函数。它可以将一个响应式对象的某个属性转换为一个独立的 ref 对象&#xff0c;同时保持与原始属性的响应式连接。以下是 toRef 的详细解读和示例。 1. toRef 的作用 核心功能 toRef 用于从响应式对象&#x…...

wordpress资讯类网站整站打包

wordpress程序&#xff0c;内置了价值499元的模板.但是有了模板没有全自动采集相信大多数人都搞不懂&#xff0c;目录那么多&#xff0c;全靠原创几乎是不可能的事情&#xff0c;除非你是大公司&#xff0c;每人控制一个板块&#xff0c; 这套源码里面最有价值的应该是这个采集…...

GitHub基本操作及Git简单命令

GitHub简介 GitHub就是一个远程仓库&#xff0c;远程仓库可以理解为就是一个可以保存自己代码的地方&#xff0c;在实际开发当中一个项目往往是有多个人来共同协作开发完成的&#xff0c;那么就需要一个统一代码保存的地方&#xff0c;而GitHub就是起到一个共享和汇总代码的作…...

记一次MySQL故障解决

记一次MySQL故障解决 1 故障现象2 故障排查2.1 查看MySQL服务状态2.2 查看服务日志 3 解决方法3.1 增加 wait_timeout 和 interactive_timeout 参数的值&#xff0c;确保连接不会因超时而被关闭&#xff1a;3.2 检查服务已经恢复正常&#xff0c;不过以上只是临时修改&#xff…...

DeepSeek-R1私有化部署教程 | Linux服务器搭建AI大语言模型

**云服务器用LinuxDockerOllamaOpenWebUI部署DeepSeek-R1大语言模型&#xff08;LLMs&#xff09;&#xff0c;DeepSeek本地化部署教程&#xff08;在自己电脑上部署也可以参考此教程&#xff09;。**超详细教程&#xff0c;手把手。 在当今数字化时代&#xff0c;大型语言模型…...

「软件设计模式」桥接模式(Bridge Pattern)

深入解析桥接模式&#xff1a;解耦抽象与实现的艺术 一、模式思想&#xff1a;正交维度的优雅解耦 桥接模式&#xff08;Bridge Pattern&#xff09;通过分离抽象&#xff08;Abstraction&#xff09;与实现&#xff08;Implementation&#xff09;&#xff0c;使二者可以独立…...

【Flink快速入门-5.流处理之多流转换算子】

流处理之多流转换算子 实验介绍 前面实验中介绍的算子已经能够满足我们的大部分开发需求了&#xff0c;但是在实际工作中有时候还会遇到一些业务场景&#xff0c;例如需要摄入多个输入流并将其合并处理&#xff0c;或者需要将一条输入流分割为多条子流&#xff0c;在不同的子…...

react传递函数与回调函数原理

为什么 React 允许直接传递函数&#xff1f; 回调函数核心逻辑 例子&#xff1a;父组件控制 Modal 的显示与隐藏 // 父组件 (ParentComponent.tsx) import React, { useState } from react; import { Modal, Button } from antd; import ModalContent from ./ModalContent;co…...

华为云kubernetes基于keda自动伸缩deployment副本(监听redis队列长度)

1 概述 KEDA&#xff08;Kubernetes-based Event-Driven Autoscaler&#xff0c;网址是https://keda.sh&#xff09;是在 Kubernetes 中事件驱动的弹性伸缩器&#xff0c;功能非常强大。不仅支持根据基础的CPU和内存指标进行伸缩&#xff0c;还支持根据各种消息队列中的长度、…...

Spring源码分析のBean扫描流程

文章目录 前言一、scanCandidateComponents1.1 isCandidateComponent1.1.1、排除/包含过滤器1.1.2、条件装配1.1.3、重载一1.1.4、重载二1.1.5、补充&#xff1a;Lookup注解 总结 前言 原生的Spring在构造ApplicationContext时&#xff0c;会调用refresh方法。其中就包含了扫描…...

Ubuntu安装docker:docker-desktop : 依赖: docker-ce-cli 但无法安装它、无法定位软件包 docker-ce-cli

具体错误 sudo apt-get install ./docker-desktop-amd64.deb [sudo] password for weiyu: 正在读取软件包列表... 完成 正在分析软件包的依赖关系树... 完成 正在读取状态信息... 完成 注意&#xff0c;选中 docker-desktop 而非 ./docker-desktop-amd64.de…...

基于大数据的奥运会获奖数据分析系统设计与实现

【大数据】基于大数据的奥运会获奖数据分析系统设计与实现&#xff08;完整系统源码开发笔记详细部署教程&#xff09;✅ 目录 一、项目简介二、项目界面展示三、项目视频展示 一、项目简介 该系统通过集成先进的数据抓取、处理、存储与可视化技术&#xff0c;为深入理解奥运会…...

数据结构 堆和priority_queue

一、堆的定义 堆&#xff08;heap&#xff09;&#xff0c;是⼀棵有着特殊性质的完全⼆叉树&#xff0c;可以⽤来实现优先级队列&#xff08;priorityqueue&#xff09;。 堆需要满⾜以下性质&#xff1a; 1. 是⼀棵完全⼆叉树&#xff1b; 2. 对于树中每个结点&#xff0c;如…...

【力扣数据库知识手册笔记】索引

索引 索引的优缺点 优点1. 通过创建唯一性索引&#xff0c;可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度&#xff08;创建索引的主要原因&#xff09;。3. 可以加速表和表之间的连接&#xff0c;实现数据的参考完整性。4. 可以在查询过程中&#xff0c;…...

条件运算符

C中的三目运算符&#xff08;也称条件运算符&#xff0c;英文&#xff1a;ternary operator&#xff09;是一种简洁的条件选择语句&#xff0c;语法如下&#xff1a; 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true&#xff0c;则整个表达式的结果为“表达式1”…...

【机器视觉】单目测距——运动结构恢复

ps&#xff1a;图是随便找的&#xff0c;为了凑个封面 前言 在前面对光流法进行进一步改进&#xff0c;希望将2D光流推广至3D场景流时&#xff0c;发现2D转3D过程中存在尺度歧义问题&#xff0c;需要补全摄像头拍摄图像中缺失的深度信息&#xff0c;否则解空间不收敛&#xf…...

五年级数学知识边界总结思考-下册

目录 一、背景二、过程1.观察物体小学五年级下册“观察物体”知识点详解&#xff1a;由来、作用与意义**一、知识点核心内容****二、知识点的由来&#xff1a;从生活实践到数学抽象****三、知识的作用&#xff1a;解决实际问题的工具****四、学习的意义&#xff1a;培养核心素养…...

镜像里切换为普通用户

如果你登录远程虚拟机默认就是 root 用户&#xff0c;但你不希望用 root 权限运行 ns-3&#xff08;这是对的&#xff0c;ns3 工具会拒绝 root&#xff09;&#xff0c;你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案&#xff1a;创建非 roo…...

【单片机期末】单片机系统设计

主要内容&#xff1a;系统状态机&#xff0c;系统时基&#xff0c;系统需求分析&#xff0c;系统构建&#xff0c;系统状态流图 一、题目要求 二、绘制系统状态流图 题目&#xff1a;根据上述描述绘制系统状态流图&#xff0c;注明状态转移条件及方向。 三、利用定时器产生时…...

微服务商城-商品微服务

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

微信小程序云开发平台MySQL的连接方式

注&#xff1a;微信小程序云开发平台指的是腾讯云开发 先给结论&#xff1a;微信小程序云开发平台的MySQL&#xff0c;无法通过获取数据库连接信息的方式进行连接&#xff0c;连接只能通过云开发的SDK连接&#xff0c;具体要参考官方文档&#xff1a; 为什么&#xff1f; 因为…...

嵌入式学习笔记DAY33(网络编程——TCP)

一、网络架构 C/S &#xff08;client/server 客户端/服务器&#xff09;&#xff1a;由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序&#xff0c;负责提供用户界面和交互逻辑 &#xff0c;接收用户输入&#xff0c;向服务器发送请求&#xff0c;并展示服务…...

Java毕业设计:WML信息查询与后端信息发布系统开发

JAVAWML信息查询与后端信息发布系统实现 一、系统概述 本系统基于Java和WML(无线标记语言)技术开发&#xff0c;实现了移动设备上的信息查询与后端信息发布功能。系统采用B/S架构&#xff0c;服务器端使用Java Servlet处理请求&#xff0c;数据库采用MySQL存储信息&#xff0…...