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" />
相关推荐
xcLeigh4 小时前
HTML5好看的水果蔬菜在线商城网站源码系列模板7
前端·html·html5
非凡网站4 小时前
企业网站html源代码 企业网站管理源码模板
前端·html
一个天蝎座 白勺 程序猿5 小时前
Python爬虫(3)HTML核心技巧:从零掌握class与id选择器,精准定位网页元素
前端·爬虫·html
wuhen_n17 小时前
CSS元素动画篇:基于当前位置的变换动画(一)
前端·css·html·css3·html5
一只小风华~20 小时前
Web前端开发:CSS Float(浮动)与 Positioning(定位)
前端·css·html·html5·web
听风吹等浪起1 天前
html5:从零构建经典游戏-扫雷游戏
前端·html·html5
代码不行的搬运工1 天前
HTML快速入门-4:HTML <meta> 标签属性详解
java·前端·html
埃兰德欧神1 天前
三分钟让你的H5变身‘伪原生’,揭秘H5秒变应用的魔法配置
javascript·html·产品
秋天的一阵风1 天前
突发奇想:border: 0 和boder: none 有区别吗?🤔🤔🤔
前端·css·html