【HTML+CSS】HTML ＜input＞元素详解：类型与常用属性

最新推荐文章于 2024-08-13 18:09:11 发布

Xiaoxin_03

最新推荐文章于 2024-08-13 18:09:11 发布

阅读量1.6k

点赞数 29

分类专栏： HTML5+CSS3网页制作入门教程文章标签： html css 前端

本文链接：https://blog.csdn.net/qq_33502371/article/details/140716901

版权

HTML5+CSS3网页制作入门教程专栏收录该内容

19 篇文章 2 订阅

订阅专栏

15. 日期+时间选择器（datetime-local）

7. 最大值（max）、最小值（min）和步长（step）

8. 长度（size）和最大长度（maxlength）

9. 自定义验证消息（使用JavaScript或HTML5的:invalid伪类）

10. 模式和正则表达式（pattern）

结论

在HTML中，<input> 元素是最常用的表单元素之一，它允许用户输入数据。<input> 元素极其灵活，通过不同的type属性，它可以转变为文本框、密码框、提交按钮、单选按钮、多选按钮等多种不同类型的输入控件。同时，它还支持多种属性来控制这些控件的行为和外观。本文将详细介绍HTML <input> 元素的各种类型及其常见属性。

`<input>` 元素的类型（`type`）

1. 文本框（`text`）

<input type="text" name="username" placeholder="请输入用户名">

这是最基本的输入类型，用于单行文本输入。

2. 密码框（`password`）

<input type="password" name="password" placeholder="请输入密码">

用于输入密码，输入的字符会被隐藏（通常为圆点或星号）。

3. 提交按钮（`submit`）

<input type="submit" value="提交">

用于提交表单数据到服务器。

4. 单选按钮（`radio`）

<input type="radio" name="gender" value="male"> 男  
<input type="radio" name="gender" value="female"> 女

用于在一组选项中选择一个。所有单选按钮必须具有相同的name值才能属于同一组。

5. 多选按钮（`checkbox`）

<input type="checkbox" name="hobby" value="reading"> 阅读  
<input type="checkbox" name="hobby" value="swimming"> 游泳

允许多个选项被选中。

6. 重置按钮（`reset`）

<input type="reset" value="重置">

用于重置表单中的所有字段到其初始值。

7. 普通按钮（`button`）

<input type="button" value="点击我">

用于执行JavaScript脚本，但不直接提交表单数据。

8. 图像按钮（`image`）

<input type="image" src="submit.png" alt="提交">

使用图像作为提交按钮。

9. 文件选择（`file`）

<input type="file" name="file">

允许用户选择文件上传到服务器。

10. 隐藏域（`hidden`）

<input type="hidden" name="token" value="xxxx">

对用户不可见，但表单提交时会包含此字段。

11. 邮箱域（`email`）

<input type="email" name="email" placeholder="请输入邮箱地址">

用于输入电子邮件地址，浏览器会验证其格式。

12. 颜色选择器（`color`）

<input type="color" name="favcolor">

允许用户选择一个颜色值。

13. 日期选择器（`date`）

<input type="date" name="birthday">

允许用户选择一个日期。

14. 时间选择器（`time`）

<input type="time" name="appointment">

允许用户选择一个时间（小时和分钟，可选秒和时区）。

15. 日期+时间选择器（`datetime-local`）

<input type="datetime-local" name="event">

允许用户选择一个日期和时间（无时区）。

16. 进度条（`range`）

<input type="range" name="points" min="0" max="10">

允许用户选择一个范围内的数值，通常显示为滑动条。

常见的属性

1. 只读（`readonly`）

<input type="text" readonly>

字段只可以读不能修改。

2. 默认选择（`checked`）

<input type="checkbox" checked>

对于单选按钮和多选按钮，表示默认选中。

3. 禁用（`disabled`）

<input type="text" disabled>

表示该输入控件不可点击，不可修改。

4. 自动聚焦（`autofocus`）

<input type="text" autofocus>

5. 必填（`required`）

<input type="text" name="username" required>

required 属性用于指定输入字段在提交表单前必须填写。如果用户在未填写该字段的情况下尝试提交表单，浏览器会阻止表单提交，并显示一条提示信息，告知用户该字段是必填的。

6. 占位符（`placeholder`）

<input type="text" name="search" placeholder="搜索...">

placeholder 属性提供了一种提示信息，用于描述输入字段的期望值，直到字段获得焦点为止。这对于提高表单的可用性非常有帮助，因为它可以为用户提供即时的上下文提示。

7. 最大值（`max`）、最小值（`min`）和步长（`step`）

这些属性通常与数值输入类型（如 number、range、date、time 等）一起使用，以限制用户输入的范围和精度。

最大值（max）：

<input type="number" name="age" min="1" max="120">

最小值（min）：

<input type="range" name="volume" min="0" max="100" step="5">

步长（step）：
```
<input type="number" name="quantity" step="2">
```
step 属性定义了输入字段的合法数字间隔。对于 range 类型的输入，它还可以控制滑动条的刻度间隔。

8. 长度（size）和最大长度（maxlength）
长度（size）：
最大长度（maxlength）：
虽然 size 属性在HTML5中不再是必需的，也不直接影响输入字段的实际宽度（这更多地取决于CSS），但它仍然可以在某些情况下用于指定输入字段的显示宽度（以字符数为单位）。
```
<input type="text" name="comment" maxlength="140">
```
maxlength 属性限制了用户可以在输入字段中输入的最大字符数。这对于控制文本长度（如微博评论、推文等）非常有用。

9. 自定义验证消息（使用JavaScript或HTML5的:invalid伪类）

虽然HTML5提供了一些基本的验证功能（如required、type="email"等），但你可能还需要自定义验证消息以满足特定需求。这通常涉及到JavaScript和/或CSS。

例如，你可以使用JavaScript来检查输入字段的值，并在不满足条件时显示自定义的错误消息。或者，你可以使用CSS的:invalid伪类来样式化未通过验证的输入字段。

10. 模式和正则表达式（pattern）
```
<input type="text" name="username" pattern="[A-Za-z0-9_]{3,15}">
```
pattern 属性允许你定义一个正则表达式，用于验证输入字段的值。如果输入的值不符合正则表达式的模式，则字段将被视为无效。这对于验证复杂的数据格式（如电话号码、邮箱地址等）非常有用。

结论

HTML <input> 元素是构建表单的基石，通过不同的type属性和其他属性，你可以创建各种类型的输入控件，并控制它们的行为和外观。掌握这些基础知识和技巧，将有助于你构建更加用户友好和高效的表单。随着Web技术的不断发展，记得关注新的HTML标准和最佳实践，以保持你的技能与时俱进。