HTML/Xhtml
☘ 主页 > 网页 > HTML/Xhtml >

HTML input标签介绍

2025-06-21 | 佚名 | 点击：次

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

通用属性

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

输入框

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

单行文本输入框 text

1

<input type="text" name="username" placeholder="请输入用户名" />
属性 属性值 功能
maxlength 数字 可输入的最大字符数

密码输入框 password

1

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

数字输入框 number

可通过上下箭头调整数值

在这里插入图片描述

1

<input type="number" name="age" min="0" max="200" />
属性 属性值 功能
min 数字 最小值
max 数字 最大值
step 数字 输入值的增量或减量

电子邮件输入框 email

1

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

网址输入框 url

1

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

搜索输入框 search

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

1

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

按钮 submit reset button image

1

2

3

4

5

6

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

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

<!-- 普通按钮 -->

<input type="button" value="按钮" />

<!-- 使用图像作为提交按钮 -->

<input type="image" src="submit-button.png" alt="Submit Form" />
属性 属性值 功能
formaction 字符串 用于覆盖 <form> 元素本身的 action 属性，允许在同一个表单中为不同的提交按钮指定不同的目标 URL，使表单数据可以根据不同的操作需求提交到不同的处理页面。

1

2

3

<input type="submit" formaction="URL1">

<input type="image" formaction="URL2">

<button type="submit" formaction="URL3">提交</button>

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

单选 radio

1

2

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

<input type="radio" name="sex" value="女" />女
属性 属性值 功能
checked 布尔值 设置默认选中状态

多选 checkbox

1

2

3

<input type="checkbox" name="hobby" value="篮球" />篮球

<input checked type="checkbox" name="hobby" value="阅读" />阅读

<input checked type="checkbox" name="hobby" value="编程" />编程
属性 属性值 功能
checked 布尔值 设置默认选中状态

文件上传 file

1

<input type="file" />

滑块 range

1

<input type="range" name="range" min="0" max="100" step="1" />
属性 属性值 功能
step 数字 滑块移动的间隔
min 数字 最小值
max 数字 最大值

颜色选择器 color

用户可以选择颜色

1

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

日期选择器 date

1

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

时间选择器 time

1

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

原文链接：
相关文章
最新更新