赞
踩
目录
<input>
元素是HTML表单中最常见的元素之一,用于收集用户的输入数据。它可以包含多种类型的输入,如文本、密码、数字等。通过指定不同的 type
属性,可以定义不同类型的输入字段。
<input>
元素允许网站收集用户输入的信息,例如注册表单、搜索框等。- <!-- 示例:创建一个文本输入框 -->
- <input type="text" name="username" placeholder="请输入用户名">
type
属性指定输入框的类型,如文本、密码、数字等。name
属性定义输入框的名称,用于标识提交的数据。placeholder
属性定义输入框中的提示文本。type="text"
)用途:接受用户输入任意文本。
属性:
maxlength
:限制输入的最大字符数。 size
:定义输入框的宽度,以字符数为单位。 autocomplete
:指定是否启用输入框的自动完成功能。type="password"
)用途:用于接受用户输入的密码,输入内容将被隐藏。
属性:与文本输入框相同。
type="number"
)用途:接受数值输入。
属性:
min
:定义可接受的最小值。max
:定义可接受的最大值。step
:定义增量(用户点击上下箭头时的增量)。属性 | 描述 |
---|---|
disabled | 规定输入字段是禁用的 |
max | 规定允许的最大值 |
maxlength | 规定输入字段的最大字符长度 |
min | 规定允许的最小值 |
pattern | 规定用于验证输入字段的模式 |
readonly | 规定输入字段的值无法修改 |
required | 规定输入字段的值是必需的 |
size | 规定输入字段中的可见字符数 |
step | 规定输入字段的合法数字间隔 |
value | 规定输入字段的默认值 |
type="email"
)用途:接受电子邮件地址输入,浏览器会验证输入是否符合电子邮件格式。
属性:与文本输入框相同。
type="checkbox"
)用途:允许用户从多个选项中选择一个或多个选项。
属性:
value
:定义复选框的值。checked
:定义复选框是否默认选中。type="radio"
)用途:允许用户在一组选项中选择一个选项。
属性:与复选框相同。
type="file"
)用途:允许用户选择上传文件。
属性:
accept
:定义可接受的文件类型。multiple
:定义是否允许上传多个文件。type="hidden"
)用途:用于在表单中存储不希望用户看到或修改的值,通常用于服务器端处理。
color 类型用在input字段主要用于选取颜色,如下所示:
实例:从拾色器中选择一个颜色:
选择你喜欢的颜色: <input type="color" name="favcolor">
date 类型允许你从一个日期选择器选择一个日期。
实例:定义一个时间控制器:
生日: <input type="date" name="bday">
datetime 类型允许你选择一个日期(UTC 时间)。
实例:定义一个日期和时间控制器(本地时间):
生日 (日期和时间): <input type="datetime" name="bdaytime">
datetime-local 类型允许你选择一个日期和时间 (无时区).
实例:定义一个日期和时间 (无时区):
生日 (日期和时间): <input type="datetime-local" name="bdaytime">
month 类型允许你选择一个月份。
实例:定义月与年 (无时区):
生日 (月和年): <input type="month" name="bdaymonth">
range 类型用于应该包含一定范围内数字值的输入域。
range 类型显示为滑动条。
实例:定义一个不需要非常精确的数值(类似于滑块控制):
<input type="range" name="points" min="1" max="10">
search 类型用于搜索域,比如站点搜索或 Google 搜索。
实例:定义一个搜索字段 (类似站点搜索或者Google搜索):
Search Google: <input type="search" name="googlesearch">
定义输入电话号码字段:
电话号码: <input type="tel" name="usrtel">
url 类型用于应该包含 URL 地址的输入域。
在提交表单时,会自动验证 url 域的值。
定义输入URL字段:
添加您的主页: <input type="url" name="homepage">
- <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>
展示了一个多步骤的表单,用户需要在第一步填写个人信息,然后点击“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>
- <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”按钮动态添加文本输入字段。每次点击按钮都会添加一个新的输入字段。
- <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)属性:
赞
踩
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。