HTML【详解】input 标签

input 标签主要用于接收用户的输入，随 type 属性值的不同，变换其具体功能。

通用属性

属性	属性值	功能
name	字符串	定义输入字段的名称，在表单提交时，服务器通过该名称来获取对应的值
disabled	布尔值	禁用输入框，使其无法被用户修改和操作，也不会被提交
readonly	布尔值	使输入框内容只读，无法编辑，但可以被选中和复制

输入框

属性	属性值	功能
value	字符串	输入框的默认值
placeholder	字符串	输入框内的提示文本，当用户未输入内容时显示，输入内容后消失

单行文本输入框 text

在这里插入图片描述

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

属性	属性值	功能
maxlength	数字	可输入的最大字符数

密码输入框 password

在这里插入图片描述

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

数字输入框 number

可通过上下箭头调整数值

在这里插入图片描述

<input type="number" name="age" min="0" max="200" />

属性	属性值	功能
min	数字	最小值
max	数字	最大值
step	数字	输入值的增量或减量

step="2" 表示输入值的增量或减量为 2，min="0"表示最小值为 0。用户只能输入 0、2、4、6 等符合步长规则的值。

电子邮件输入框 email

在这里插入图片描述

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

网址输入框 url

在这里插入图片描述

<input type="url" name="website" placeholder="请输入网址">

搜索输入框 search

用于搜索的文本字段，一些浏览器会显示搜索图标等样式

在这里插入图片描述

<input type="search" name="search" placeholder="请输入搜索内容" />

按钮 submit reset button image

在这里插入图片描述

    <input type="submit" value="提交" />
    <input type="reset" value="重置" />
    <!-- 普通按钮 -->
    <input type="button" value="按钮" />
    <!-- 使用图像作为提交按钮 -->
    <input type="image" src="submit-button.png" alt="Submit Form" />

提交按钮，用于将表单数据发送到服务器进行处理
重置按钮，点击可将表单字段重置为初始值
普通按钮，通常与 JavaScript 一起使用来触发脚本或执行特定操作

属性	属性值	功能
formaction	字符串	用于覆盖 `<form>` 元素本身的 action 属性，允许在同一个表单中为不同的提交按钮指定不同的目标 URL，使表单数据可以根据不同的操作需求提交到不同的处理页面。

<input type="submit" formaction="URL1">
<input type="image" formaction="URL2">
<button type="submit" formaction="URL3">提交</button>

用户点击 <input type="image"> 按钮时，除了表单中的其他数据，浏览器还会自动提交两个额外的参数：x 和 y，它们分别表示用户点击图像的水平和垂直坐标。在服务器端脚本中可以获取这些坐标值。

单选 radio

在这里插入图片描述

    <input type="radio" name="sex" value="男" checked />男
    <input type="radio" name="sex" value="女" />女

属性	属性值	功能
checked	布尔值	设置默认选中状态

多选 checkbox

    <input type="checkbox" name="hobby" value="篮球" />篮球
    <input checked type="checkbox" name="hobby" value="阅读" />阅读
    <input checked type="checkbox" name="hobby" value="编程" />编程

属性	属性值	功能
checked	布尔值	设置默认选中状态

文件上传 file

<input type="file" />

滑块 range

在这里插入图片描述

<input type="range" name="range" min="0" max="100" step="1" />

属性	属性值	功能
step	数字	滑块移动的间隔
min	数字	最小值
max	数字	最大值

step="5" 意味着滑块每次移动的距离是 5 个单位，用户可以选择的值为 0、5、10 等

颜色选择器 color

用户可以选择颜色
在这里插入图片描述

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

日期选择器 date

<input type="date" name="birthdate" />

在这里插入图片描述

step="7" 表示日期选择的间隔为 7 天，用户只能选择每周的同一天。

时间选择器 time

<input type="time" name="startTime" />

在这里插入图片描述