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

embedded/2024/10/16 2:29:40/
htmledit_views">

目录

一、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.用法

html"><!-- 示例：创建一个文本输入框 -->
<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字段主要用于选取颜色，如下所示：

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

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

10.data类型

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

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

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

11.datatime类型

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

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

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

12.datetime-local类型

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

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

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

13.month类型

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

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

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

14.range类型

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

range 类型显示为滑动条。

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

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

15.search类型

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

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

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

16.tel类型

定义输入电话号码字段:

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

17.url类型

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

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

定义输入URL字段:

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

三、实例

1.用户名和密码登录

html"><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”按钮提交表单。

html"><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.动态添加输入字段

html"><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.带有自动完成功能的输入字段

html"><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.ppmy.cn/embedded/26038.html

相关文章

面试准备之手写9种排序算法（默认从小到大排序）之插入排序、冒泡排序、选择排序、希尔排序

面试准备之手写9种排序算法（默认从小到大排序）之插入排序、冒泡排序、选择排序、希尔排序

插入排序 第一重循环下标从1到n-1&#xff0c;一是表示插入轮数&#xff0c;而是为下一重循环nums[j]和nums[j - 1]比较并交换&#xff08;nums[j]>nums[j-1]时&#xff09;做准备&#xff0c;再有就是下一重循环是逆向进行&#xff0c;由于之前的下标在之前的循环中已经经…
阅读更多...
如何使用 ArcGIS Pro 查找小区最近的地铁站

如何使用 ArcGIS Pro 查找小区最近的地铁站

学习 GIS 除了可以用在工作上之外&#xff0c;还可以将其运用到生活之中&#xff0c;比如查找距离小区最近的地铁站&#xff0c;这里为大家介绍一下查找的方法&#xff0c;希望能对你有所帮助。 数据来源 教程所使用的数据是从水经微图中下载的POI数据&#xff0c;除了POI数据…
阅读更多...
Stability AI 推出稳定音频 2.0：为创作者提供先进的 AI 生成音频

Stability AI 推出稳定音频 2.0：为创作者提供先进的 AI 生成音频

概述 Stability AI 的发布再次突破了创新的界限。这一尖端模型以其前身的成功为基础&#xff0c;引入了一系列突破性的功能&#xff0c;有望彻底改变艺术家和音乐家创建和操作音频内容的方式。 Stable Audio 2.0 代表了人工智能生成音频发展的一个重要里程碑&#xff0c;为质量…
阅读更多...
linux安装MySQL 8.0笔记

linux安装MySQL 8.0笔记

在Linux系统中安装MySQL 8.0的详细操作步骤如下&#xff1a; 1. 添加MySQL Yum Repository 首先&#xff0c;您需要添加MySQL的Yum仓库。这可以通过下载并安装一个RPM包来实现&#xff0c;该RPM包会将MySQL仓库添加到您的仓库列表中。 wget https://repo.mysql.com//mysql80-c…
阅读更多...
长难句打卡4.30

长难句打卡4.30

Priestly explains how the deep blue color of the assistant’s sweater descended over they ears from fashion shows to departments stores and to the bargain bin in which the poor girl doubtless found her garment. 普里斯特利则向助手解释了她身上这件针织衫所采…
阅读更多...
Electron+Vue3+Vite+ElectronForge整合 - 一键启动两个服务 一键打包两个服务

Electron+Vue3+Vite+ElectronForge整合 - 一键启动两个服务 一键打包两个服务

说明 本文介绍一下 Electron Vue3 Vite Electron Forge 的高级整合操作。vue3 : 使用 TS 的语法开发&#xff1b; Electron : 使用 JS 的语法开发。本文将从项目初始化开始&#xff0c;一步一步的完成项目的启动、打包全流程的介绍。实现的效果是 &#xff1a; 1、一个正常…
阅读更多...
JavaScript ES6 全新的Set、Map数据结构

JavaScript ES6 全新的Set、Map数据结构

JavaScript ES6 全新的Set、Map数据结构 Map、Set都是ES6新的数据结构, 都是新的内置构造函数, 也就是说typeof的结果, 多了两个&#xff1a; Set 是不能重复的数组, 但不能[某一项来枚举出来] Map 是可以任何东西当做键的对象 set()数据结构 ES6 提供了新的数据结构 Set。…
阅读更多...
git解决冲突问题

git解决冲突问题

冲突问题&#xff1a;开发者的俩个分支都修改了同一个文件的同一部分时, Git 无法自动决定哪个版本是正确的, 因此会产生冲突。 解决冲突&#xff1a; 我们git在合并的过程中指出冲突文件&#xff0c;通过git status命令查看那个文件存在冲突 解决方法&#xff1a; 1&#xff0…
阅读更多...
最新文章

Copyright @ 2022~2023