当前位置: 首页 > 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;如…...

脑机新手指南(八):OpenBCI_GUI:从环境搭建到数据可视化(下)

一、数据处理与分析实战 &#xff08;一&#xff09;实时滤波与参数调整 基础滤波操作 60Hz 工频滤波&#xff1a;勾选界面右侧 “60Hz” 复选框&#xff0c;可有效抑制电网干扰&#xff08;适用于北美地区&#xff0c;欧洲用户可调整为 50Hz&#xff09;。 平滑处理&…...

UE5 学习系列(三)创建和移动物体

这篇博客是该系列的第三篇&#xff0c;是在之前两篇博客的基础上展开&#xff0c;主要介绍如何在操作界面中创建和拖动物体&#xff0c;这篇博客跟随的视频链接如下&#xff1a; B 站视频&#xff1a;s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

条件运算符

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

vue3 字体颜色设置的多种方式

在Vue 3中设置字体颜色可以通过多种方式实现&#xff0c;这取决于你是想在组件内部直接设置&#xff0c;还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法&#xff1a; 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...

OkHttp 中实现断点续传 demo

在 OkHttp 中实现断点续传主要通过以下步骤完成&#xff0c;核心是利用 HTTP 协议的 Range 请求头指定下载范围&#xff1a; 实现原理 Range 请求头&#xff1a;向服务器请求文件的特定字节范围&#xff08;如 Range: bytes1024-&#xff09; 本地文件记录&#xff1a;保存已…...

ServerTrust 并非唯一

NSURLAuthenticationMethodServerTrust 只是 authenticationMethod 的冰山一角 要理解 NSURLAuthenticationMethodServerTrust, 首先要明白它只是 authenticationMethod 的选项之一, 并非唯一 1 先厘清概念 点说明authenticationMethodURLAuthenticationChallenge.protectionS…...

实现弹窗随键盘上移居中

实现弹窗随键盘上移的核心思路 在Android中&#xff0c;可以通过监听键盘的显示和隐藏事件&#xff0c;动态调整弹窗的位置。关键点在于获取键盘高度&#xff0c;并计算剩余屏幕空间以重新定位弹窗。 // 在Activity或Fragment中设置键盘监听 val rootView findViewById<V…...

全面解析各类VPN技术:GRE、IPsec、L2TP、SSL与MPLS VPN对比

目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec&#xff1f; IPsec VPN 5.1 IPsec传输模式&#xff08;Transport Mode&#xff09; 5.2 IPsec隧道模式&#xff08;Tunne…...

Java多线程实现之Thread类深度解析

Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...

DeepSeek 技术赋能无人农场协同作业:用 AI 重构农田管理 “神经网”

目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...