HTML【详解】input 标签

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

通用属性

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

输入框

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

单行文本输入框 text

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

密码输入框 password

html 复制代码
<input type="password" name="password" placeholder="请输入密码" />

数字输入框 number

可通过上下箭头调整数值

html 复制代码
<input type="number" name="age" min="0" max="200" />
属性 属性值 功能
min 数字 最小值
max 数字 最大值
step 数字 输入值的增量或减量
  • step="2" 表示输入值的增量或减量为 2,min="0"表示最小值为 0。用户只能输入 0、2、4、6 等符合步长规则的值。

电子邮件输入框 email

html 复制代码
<input type="email" name="email" placeholder="请输入邮箱地址" />

网址输入框 url

html 复制代码
<input type="url" name="website" placeholder="请输入网址">

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

html 复制代码
<input type="search" name="search" placeholder="请输入搜索内容" />

按钮 submit reset button image

html 复制代码
    <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,使表单数据可以根据不同的操作需求提交到不同的处理页面。
html 复制代码
<input type="submit" formaction="URL1">
<input type="image" formaction="URL2">
<button type="submit" formaction="URL3">提交</button>

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

单选 radio

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

多选 checkbox

html 复制代码
    <input type="checkbox" name="hobby" value="篮球" />篮球
    <input checked type="checkbox" name="hobby" value="阅读" />阅读
    <input checked type="checkbox" name="hobby" value="编程" />编程
属性 属性值 功能
checked 布尔值 设置默认选中状态

文件上传 file

html 复制代码
<input type="file" />

滑块 range

html 复制代码
<input type="range" name="range" min="0" max="100" step="1" />
属性 属性值 功能
step 数字 滑块移动的间隔
min 数字 最小值
max 数字 最大值
  • step="5" 意味着滑块每次移动的距离是 5 个单位,用户可以选择的值为 0、5、10 等

颜色选择器 color

用户可以选择颜色

html 复制代码
<input type="color" name="color" />

日期选择器 date

html 复制代码
<input type="date" name="birthdate" />
  • step="7" 表示日期选择的间隔为 7 天,用户只能选择每周的同一天。

时间选择器 time

html 复制代码
<input type="time" name="startTime" />
相关推荐
前端Hardy3 小时前
HTML&CSS:超丝滑的动态导航菜单
javascript·css·html
前端Hardy3 小时前
HTML&CSS:你绝对没见过的input输入框,确定不看看吗
javascript·css·html
前端Hardy3 小时前
HTML&CSS:不一样的开关效果
javascript·css·html
木木黄木木5 小时前
HTML5手写签名板项目实战教程
前端·html·html5
爱上大树的小猪8 小时前
【前端安全】模板字符串动态拼接HTML的防XSS完全指南
前端·安全·html
懒大王952711 小时前
echarts+HTML 绘制3d地图,加载散点+散点点击事件
前端·html·echarts
Yolo@~17 小时前
个人网站:基于html、css、js网页开发界面
javascript·css·html
DarkBule_1 天前
零基础驯服GitHub Pages
css·学习·html·github·html5·web
前端Hardy1 天前
HTML&CSS:超好看的轮播图,你绝对用得上(建议收藏)
javascript·css·html
前端Hardy1 天前
HTML&CSS:必学!手把手教你实现动态天气图标
javascript·css·html