html——input标签介绍

HTML <input> 标签是用于收集用户信息的关键元素。它有多种类型，包括文本、密码、复选框、单选按钮、文件选择等。

以下是一些常用的 <input> 标签类型及其使用示例：

1. 文本输入：

<input type="text" name="username" placeholder="Enter your username">

2. 密码输入：

<input type="password" name="password" placeholder="Enter your password">

3. 单选按钮：

<input type="radio" name="gender" value="male"> Male<br>
<input type="radio" name="gender" value="female"> Female

4. 复选框：

<input type="checkbox" name="vehicle" value="Bike"> I have a bike<br>
<input type="checkbox" name="vehicle" value="Car"> I have a car

5. 文件选择：

<input type="file" name="fileToUpload" accept=".jpg, .jpeg, .png">

6. 提交按钮：

<input type="submit" value="Submit">

7. 重置按钮：

<input type="reset" value="Reset">

8. 隐藏字段：

<input type="hidden" name="userId" value="12345">

9. 图像作为提交按钮：

<input type="image" src="submit.jpg" alt="Submit">

10. 颜色选择器：

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

11. 日期选择器：

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

12. 月份和年份选择器：

<input type="month" name="bdaymonth">

13. 周选择器：

<input type="week" name="week_year">

14. 数字输入，可以设置最小值、最大值和步长：

<input type="number" name="quantity" min="1" max="5" step="1">

15. 范围选择器：

<input type="range" min="0" max="100" step="10" value="50">

16. 搜索框：

<input type="search" name="search" placeholder="Search...">

17. 电话号码输入，自动验证格式：

<input type="tel" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">

18. 时间输入：

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

19. 日期时间输入：

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

20. 输出标签，用于显示计算结果或服务器响应：

<input type="text" readonly name="result" id="result">

每个类型都有其特定的用途和行为，根据需求选择合适的 <input> 类型。