HTML中input输入框（详解输入框的用法）

目录

一、input介绍

1.概念

2.好处

3.用法

4.应用

二、input语法

1.文本输入框 (type="text")

2.密码输入框 (type="password")

3.数字输入框 (type="number")

4.电子邮件输入框 (type="email")

5.复选框 (type="checkbox")

6.单选按钮 (type="radio")

7.文件上传 (type="file")

8.隐藏字段 (type="hidden")

9.color类型

10.data类型

11.datatime类型

12.datetime-local类型

13.month类型

14.range类型

15.search类型

16.tel类型

17.url类型

三、实例

1.用户名和密码登录

2.多步骤表单

3.动态添加输入字段

4.带有自动完成功能的输入字段

四、总结

一、input介绍

1.概念

<input> 元素是HTML表单中最常见的元素之一，用于收集用户的输入数据。它可以包含多种类型的输入，如文本、密码、数字等。通过指定不同的 type 属性，可以定义不同类型的输入字段。

2.好处

  1. 用户输入收集： <input> 元素允许网站收集用户输入的信息，例如注册表单、搜索框等。
  2. 表单交互： 它是构建交互式表单的基础，可以创建用户可以填写、提交和交互的表单。
  3. 数据传输： 用户在输入框中输入的数据可以通过表单提交到服务器，用于处理或保存数据。

3.用法

<!-- 示例：创建一个文本输入框 -->
<input type="text" name="username" placeholder="请输入用户名">
  • type 属性指定输入框的类型，如文本、密码、数字等。
  • name 属性定义输入框的名称，用于标识提交的数据。
  • placeholder 属性定义输入框中的提示文本。

4.应用

  • 注册表单： 用户输入用户名、密码等信息进行注册。
  • 搜索框： 用户在搜索框中输入关键词进行网页搜索。
  • 联系表单： 用户输入姓名、电子邮件、消息等信息与网站联系。
  • 用户反馈： 用户输入反馈或评论的文本信息。

二、input语法

1.文本输入框 (type="text")

用途：接受用户输入任意文本。

属性：

  •    maxlength：限制输入的最大字符数。
  •    size：定义输入框的宽度，以字符数为单位。
  •    autocomplete：指定是否启用输入框的自动完成功能。

2.密码输入框 (type="password")

用途：用于接受用户输入的密码，输入内容将被隐藏。

属性：与文本输入框相同。

3.数字输入框 (type="number")

用途：接受数值输入。

属性：

  • min：定义可接受的最小值。
  • max：定义可接受的最大值。
  • step：定义增量（用户点击上下箭头时的增量）。
属性描述
disabled规定输入字段是禁用的
max规定允许的最大值
maxlength规定输入字段的最大字符长度
min规定允许的最小值
pattern规定用于验证输入字段的模式
readonly规定输入字段的值无法修改
required规定输入字段的值是必需的
size规定输入字段中的可见字符数
step规定输入字段的合法数字间隔
value规定输入字段的默认值

 

4.电子邮件输入框 (type="email")

用途：接受电子邮件地址输入，浏览器会验证输入是否符合电子邮件格式。

属性：与文本输入框相同。

5.复选框 (type="checkbox")

用途：允许用户从多个选项中选择一个或多个选项。

属性：

  • value：定义复选框的值。
  • checked：定义复选框是否默认选中。

6.单选按钮 (type="radio")

用途：允许用户在一组选项中选择一个选项。

属性：与复选框相同。

7.文件上传 (type="file")

用途：允许用户选择上传文件。

属性：

  • accept：定义可接受的文件类型。
  • multiple：定义是否允许上传多个文件。

8.隐藏字段 (type="hidden")

用途：用于在表单中存储不希望用户看到或修改的值，通常用于服务器端处理。

9.color类型

color 类型用在input字段主要用于选取颜色，如下所示：

实例：从拾色器中选择一个颜色:

选择你喜欢的颜色: <input type="color" name="favcolor">

10.data类型

date 类型允许你从一个日期选择器选择一个日期。

实例：定义一个时间控制器:

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

11.datatime类型

datetime 类型允许你选择一个日期（UTC 时间）。

实例：定义一个日期和时间控制器（本地时间）:

生日 (日期和时间): <input type="datetime" name="bdaytime">

12.datetime-local类型

datetime-local 类型允许你选择一个日期和时间 (无时区).

实例：定义一个日期和时间 (无时区):

生日 (日期和时间): <input type="datetime-local" name="bdaytime">

13.month类型

month 类型允许你选择一个月份。

实例：定义月与年 (无时区):

生日 (月和年): <input type="month" name="bdaymonth">

14.range类型

range 类型用于应该包含一定范围内数字值的输入域。

range 类型显示为滑动条。

实例：定义一个不需要非常精确的数值（类似于滑块控制）:

<input type="range" name="points" min="1" max="10">
  • max - 规定允许的最大值
  • min - 规定允许的最小值
  • step - 规定合法的数字间隔
  • value - 规定默认值

15.search类型

search 类型用于搜索域，比如站点搜索或 Google 搜索。

实例：定义一个搜索字段 (类似站点搜索或者Google搜索):

Search Google: <input type="search" name="googlesearch">

16.tel类型

定义输入电话号码字段:

电话号码: <input type="tel" name="usrtel">

17.url类型

url 类型用于应该包含 URL 地址的输入域。

在提交表单时，会自动验证 url 域的值。

定义输入URL字段:

添加您的主页: <input type="url" name="homepage">

三、实例

1.用户名和密码登录

<label for="username">Username:</label>
<input type="text" id="username" name="username"><label for="password">Password:</label>
<input type="password" id="password" name="password"><button type="submit">Submit</button>

2.多步骤表单

展示了一个多步骤的表单，用户需要在第一步填写个人信息，然后点击“Next”按钮转到第二步填写地址信息，最后点击“Submit”按钮提交表单。

<form><fieldset><legend>Step 1: Personal Information</legend><label for="name">Name:</label><input type="text" id="name" name="name" required><label for="email">Email:</label><input type="email" id="email" name="email" required><button onclick="nextStep()">Next</button></fieldset><fieldset id="step2" style="display: none;"><legend>Step 2: Address Information</legend><label for="address">Address:</label><input type="text" id="address" name="address" required><button onclick="prevStep()">Previous</button><button onclick="submitForm()">Submit</button></fieldset>
</form><script>function nextStep() {document.getElementById('step2').style.display = 'block';}function prevStep() {document.getElementById('step2').style.display = 'none';}function submitForm() {// 实现表单提交逻辑}
</script>

3.动态添加输入字段

<form id="dynamic-form"><div id="input-container"><!-- 这里将动态添加输入字段 --></div><button type="button" onclick="addInput()">Add Input</button><button type="submit">Submit</button>
</form><script>let counter = 1;function addInput() {const container = document.getElementById('input-container');const input = document.createElement('input');input.type = 'text';input.name = 'input_' + counter;input.placeholder = 'Input ' + counter;container.appendChild(input);counter++;}
</script>

展示了一个表单，用户可以点击“Add Input”按钮动态添加文本输入字段。每次点击按钮都会添加一个新的输入字段。

4.带有自动完成功能的输入字段

<label for="search">Search:</label>
<input type="text" id="search" name="search" list="suggestions">
<datalist id="suggestions"><option value="Apple"><option value="Banana"><option value="Orange"><option value="Pineapple">
</datalist>

展示了一个带有自动完成功能的文本输入字段。用户在输入时会显示一个下拉列表，提供可能的建议选项。

四、总结

  1. 类型（type）属性：

    • 定义输入字段的类型，如文本框、密码框、单选按钮、复选框等。
    • 常见类型包括 text、password、radio、checkbox、file 等。

  2. 名称（name）属性：

    • 用于标识输入字段的名称，以便在表单提交时能够将数据传输到服务器。
    • 对于单选按钮和复选框，相同名称的一组按钮被视为一个组，只能选择其中的一个或多个。

  3. 值（value）属性：

    • 用于指定输入字段的值，例如文本输入框中的默认文本、单选按钮和复选框的选项等。

  4. 必填（required）属性：

    • 指定输入字段是否必须填写才能提交表单。
    • 对于必填字段，如果用户未填写，提交表单时会出现警告。

  5. 占位符（placeholder）属性：

    • 提供输入字段中的占位符文本，用于指示用户应该输入的内容。

  6. 最小值（min）和最大值（max）属性（对于类型为数字的输入字段）：

    • 限制用户输入的数字范围。

  7. 列表（list）属性（对于类型为文本的输入字段）：

    • 关联一个 <datalist> 元素，提供可能的自动完成选项。

  8. 禁用（disabled）属性：

    • 用于禁用输入字段，使其不可编辑或不可选择。

  9. 自动聚焦（autofocus）属性：

    • 在页面加载时自动将焦点设置到输入字段，使用户无需手动点击即可开始输入。

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

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

相关文章

Centos7 安装Git、使用

Centos7 安装Git、使用

Centos7 安装Git 一、安装步骤1.1 查看版本1.2 卸载1.3 安装 二、创建仓库2.1 新增仓库2.2 新增配置项 三、管理文件3.1 文件创建3.2 文件修改、add、commit3.3 tree结构探索 四、分支4.1 创建分支&#xff1a;4.2 查看分支4.3 切换分支4.4 删除分支4.5 合并冲突 一、安装步骤 …
阅读更多...
运行DeepSORT_YOLOv5_Pytorch时出现的问题

运行DeepSORT_YOLOv5_Pytorch时出现的问题

文章目录 前言问题1&#xff1a;Loaderyaml.FullLoader问题2&#xff1a;utils. -> yolov5.utils.问题3&#xff1a;np.float -> float问题4&#xff1a;np.int -> int问题5&#xff1a;ImportError: cannot import name time_synchronized from yolov5.utils.torch_u…
阅读更多...
TCP协议关于速率的优化机制-滑动窗口详解

TCP协议关于速率的优化机制-滑动窗口详解

在上一章中&#xff0c;我们讲述了TCP协议在传输过程中的可靠性http://t.csdnimg.cn/BsImO&#xff0c;这里衔接上一篇文章继续讲&#xff0c;TCP协议的特性&#xff0c;TCP协议写完之后就写&#xff0c;Http和Https等内容吧 1. 滑动窗口 这里的滑动窗口不是指算法里面的双指…
阅读更多...
Jetson Orin NX L4T35.5.0平台相机stop导致系统死机问题调试

Jetson Orin NX L4T35.5.0平台相机stop导致系统死机问题调试

1. 环境 硬件：国产OrinNX套件 系统版本： L4T35.5.0 相机： SDI 相机，1080P50fps 2. 问题描述 移植驱动已经开始正常采集相机图像，但是会出现以下问题： 采集流程如下： （1）start SDI camera （2）gst-launch-1.0采集图像 gst-launch-1.0 v4l2src device=/dev/vide…
阅读更多...
30天拿下Rust之图形编程

30天拿下Rust之图形编程

概述 Rust语言以其卓越的安全性、性能和可靠性赢得了广大开发者的青睐&#xff0c;逐渐在系统编程、网络服务、游戏开发等领域崭露头角。随着Rust生态的日益繁荣&#xff0c;图形编程领域也涌现出一批优秀的框架和库&#xff0c;使得用Rust进行高效、安全的图形应用开发成为可能…
阅读更多...
QT学习之QtXlsx

QT学习之QtXlsx

背景&#xff1a; 本来我是想提取xml中的信息存在xlsx文件中的&#xff0c;网上很多说是使用QtXlsx&#xff1b; 于是我找了一些帖&#xff0c; 像&#xff1a;https://www.cnblogs.com/liming19680104/p/14398459.html&#xff1b; 大家的说法都是安装第三方库到QT中&#xff…
阅读更多...
「AIGC」如何理解大语言模型

「AIGC」如何理解大语言模型

一、Transformer模型 Transformer模型是一种基于自注意力机制的架构&#xff0c;由Vaswani等人在2017年的论文《Attention Is All You Need》中首次提出。它主要用于处理序列到序列的任务&#xff0c;如机器翻译、文本摘要等。 案例&#xff1a;机器翻译 假设我们想将英文句子…
阅读更多...
OLTP和OLAP，StarRocks数据库，TiDB数据库

OLTP和OLAP，StarRocks数据库，TiDB数据库

OLTP和OLAP&#xff0c;StarRocks数据库&#xff0c;TiDB数据库 一、OLTP和OLAP二、StarRocks数据库三、TiDB数据库 一、OLTP和OLAP OLTP和OLAP是两种不同的数据处理方式&#xff0c;用于处理不同类型的工作负载。OLTP&#xff08;Online Transaction Processing&#xff09;是…
阅读更多...
leetcode18-4Sum

leetcode18-4Sum

题目 给你一个由 n 个整数组成的数组 nums &#xff0c;和一个目标值 target 。请你找出并返回满足下述全部条件且不重复的四元组 [nums[a], nums[b], nums[c], nums[d]] &#xff08;若两个四元组元素一一对应&#xff0c;则认为两个四元组重复&#xff09;&#xff1a; 0 &l…
阅读更多...
ECharts在网页中添加可视化图标-在网页中添加交互图表+option模块案列详解

ECharts在网页中添加可视化图标-在网页中添加交互图表+option模块案列详解

一、引言 ECharts 是一个使用 JavaScript 编写的开源可视化库&#xff0c;它可以在浏览器中生成交互式的图表。无论是折线图、柱状图、散点图还是饼图&#xff0c;ECharts 都能轻松应对。本文将带领大家了解如何在网页中添加 ECharts 可视化图标。 本章可以直接跳到第五点完整…
阅读更多...
XML 映射文件（Mapper 文件）的命名空间

XML 映射文件（Mapper 文件）的命名空间

MyBatis 中&#xff0c;mapper 命名空间是指一个 XML 映射文件&#xff08;Mapper 文件&#xff09;的命名空间。每个 Mapper 文件都有一个命名空间&#xff0c;用于定义与特定数据库表相关联的 SQL 映射规则和操作方法。 mapper 命名空间的作用包括&#xff1a; 命名空间的唯…
阅读更多...
EOCR-SS-05W电子式过电流继电器 0.5-6A 施耐德韩国三和

EOCR-SS-05W电子式过电流继电器 0.5-6A 施耐德韩国三和

三和EOCR株式会社是韩国的电动机保护器生产企业&#xff0c;公司由金仁锡博士&#xff08;施耐德电气集团韩国执行官&#xff09;于1981年建立。 2001年&#xff0c;为了把企业发展成性的、战略性企业&#xff0c;随后加入了法国施耐德电气集团公司。 EOCR主要产品有电子式电…
阅读更多...
LeetCode 刷题 -- Day 6

LeetCode 刷题 -- Day 6

今日题目 题目难度备注102. 二叉树的层序遍历 中等一招鲜吃遍天107. 二叉树的层序遍历 II &#xff09;中等199. 二叉树的右视图 中等637. 二叉树的层平均值简单429. N 叉树的层序遍历中等515. 在每个树行中找最大值中等116. 填充每个节点的下一个右侧节点指针中等104. 二叉树…
阅读更多...
JAVA相关面试题分享

JAVA相关面试题分享

Java 基础知识 1.1 面向对象的特征&#xff08;了解&#xff09; 面向对象的特征&#xff1a;封装、继承、多态、抽象。 封装&#xff1a;就是把对象的属性和行为&#xff08;数据&#xff09;结合为一个独立的整体&#xff0c;并尽可能隐藏对 象的内部实现细节&#xff0c;就…
阅读更多...
spring boot 定义启动页 到 login

spring boot 定义启动页 到 login

当前办法只是针对 项目启动后 直接跳转到 指定静态页面 如果有验证身份 安全等问题 可以另外想办法 去添加 &#xff0c;需要的直接 拉过去使用 修改 【"redirect: 需要启动后访问到文件位置得地址 ”】 直接上代码 &#xff1a; import org.springframework.context…
阅读更多...
Android手势识别面试问题及回答

Android手势识别面试问题及回答

问题 1: 如何在Android中实现基本的手势识别&#xff1f; 答案: 在Android中&#xff0c;可以通过使用GestureDetector类来实现基本的手势识别。首先需要创建一个GestureDetector的实例&#xff0c;并实现GestureDetector.OnGestureListener接口来响应各种手势事件&#xff0c…
阅读更多...
LeeCode 1728 任意图上博弈

LeeCode 1728 任意图上博弈

题意 传送门 LeeCode 1728 猫和老鼠 II 题解 任意图上博弈&#xff0c;可参考 Games on arbitrary graphs。具体而言&#xff0c;将博弈双方位置加之先后手状态看作任意图上的一个节点&#xff0c;并根据状态转移建立反图。对于可以确定胜负态的节点&#xff0c;以其为起点&…
阅读更多...
【百度Apollo】探索自动驾驶：Apollo 新版本 Beta 全新的Dreamview+，便捷灵活更丰富

【百度Apollo】探索自动驾驶：Apollo 新版本 Beta 全新的Dreamview+，便捷灵活更丰富

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏: 《linux深造日志》《粉丝福利》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 文章目录 引入一、Dreamview介绍二、Dreamview 新特性2.1、基于模式的多场景——流程更简洁地图视角调节&#xff1a;调试流…
阅读更多...
自动驾驶系统中的端到端学习

自动驾驶系统中的端到端学习

资料下载-《自动驾驶系统中的端到端学习&#xff08;2020&#xff09;》https://mp.weixin.qq.com/s/ttNpsn7qyVWvDMZzluU_pA 近年来&#xff0c;卷积神经网络显著提高了视觉感知能力。实现这一成功的两个主要因素是将简单的模块组合成复杂的网络和端到端的优化。然而&#xf…
阅读更多...
电影交流|基于SprinBoot+vue的电影交流平台小程序系统(源码+数据库+文档)

电影交流|基于SprinBoot+vue的电影交流平台小程序系统(源码+数据库+文档)

电影交流平台目录 目录 基于SprinBootvue的电影交流平台小程序系统 一、前言 二、系统设计 三、系统功能设计 1用户信息管理 2 电影信息管理 3公告信息管理 4论坛信息管理 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取…
阅读更多...
最新文章

Copyright @ 2022~2023