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")

一、input介绍

1.概念

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

2.好处

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

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>

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

四、总结

类型（type）属性：
- 定义输入字段的类型，如文本框、密码框、单选按钮、复选框等。
- 常见类型包括 text、password、radio、checkbox、file 等。
名称（name）属性：
- 用于标识输入字段的名称，以便在表单提交时能够将数据传输到服务器。
- 对于单选按钮和复选框，相同名称的一组按钮被视为一个组，只能选择其中的一个或多个。
值（value）属性：
- 用于指定输入字段的值，例如文本输入框中的默认文本、单选按钮和复选框的选项等。
必填（required）属性：
- 指定输入字段是否必须填写才能提交表单。
- 对于必填字段，如果用户未填写，提交表单时会出现警告。
占位符（placeholder）属性：
- 提供输入字段中的占位符文本，用于指示用户应该输入的内容。
最小值（min）和最大值（max）属性（对于类型为数字的输入字段）：
- 限制用户输入的数字范围。
列表（list）属性（对于类型为文本的输入字段）：
- 关联一个 <datalist> 元素，提供可能的自动完成选项。
禁用（disabled）属性：
- 用于禁用输入字段，使其不可编辑或不可选择。
自动聚焦（autofocus）属性：
- 在页面加载时自动将焦点设置到输入字段，使用户无需手动点击即可开始输入。