APP正在开发中...
返回顶部
您的位置： 主页 > 网页 > HTML/Xhtml >

收藏
分享到

HTML input标签介绍

HTML/Xhtml 来源：互联网 作者：佚名 发布时间：2025-06-21 22:03:17 人浏览
摘要

input 标签主要用于接收用户的输入，随 type 属性值的不同，变换其具体功能。 通用属性 属性 属性值 功能 name 字符串 定义输入字段的名称，在表单提交时，服务器通过该名称来获取对应的值

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 数字 输入值的增量或减量
  • step="2" 表示输入值的增量或减量为 2，min="0"表示最小值为 0。用户只能输入 0、2、4、6 等符合步长规则的值。

电子邮件输入框 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" />
  • 提交按钮，用于将表单数据发送到服务器进行处理
  • 重置按钮，点击可将表单字段重置为初始值
  • 普通按钮，通常与 JavaScript 一起使用来触发脚本或执行特定操作
属性 属性值 功能
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 数字 最大值
  • step="5" 意味着滑块每次移动的距离是 5 个单位，用户可以选择的值为 0、5、10 等

颜色选择器 color

用户可以选择颜色

1

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

日期选择器 date

1

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

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

时间选择器 time

1

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


版权声明 : 本文内容来源于互联网或用户自行发布贡献，该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权， 违法违规的内容， 请发送邮件至2530232025#qq.cn(#换@)举报，一经查实，本站将立刻删除。

您可能感兴趣的文章 :

原文链接 :
相关文章

  • HTML input标签介绍

    HTML input标签介绍
    input 标签主要用于接收用户的输入，随 type 属性值的不同，变换其具体功能。 通用属性 属性 属性值 功能 name 字符串 定义输入字段的名称，
  • HTML中meta标签的常见使用案例
    HTML中meta标签的常见使用案例 在HTML中，meta标签主要用于提供关于HTML文档的元数据，这些数据通常不会显示在页面上，但对浏览器、搜索引
  • HTML img标签和超链接标签详细介绍
    img 标签 img是一个单标签 src 属性 img标签必须搭配src使用（指定图片的路径） 相对路径： ./xxx.png ./img/xxx.png ../xxx.png 绝对路径： 图片路径

  • html滚动条滚动过快会留下边框线的解决方案

    html滚动条滚动过快会留下边框线的解决方案
    滚动条滚动过快时，会留下边框线 但其实大部分时候是这样的，没有多出边框线的 滚动条滚动过快时留下边框线的问题通常与滚动条样式和
  • 在HTML文件中添加图片的常用方法
    在网页设计中，图片不仅可以增强页面的视觉效果，还能传达信息和情感。无论你是初学者还是经验丰富的开发者，掌握如何在 HTML 中正确
  • HTML表格的介绍
    HTML 表格用于在网页上展示数据，通过table标签及其相关标签来创建。表格由行和列组成，每一行包含一个或多个单元格，单元格可以包含文
  • 禁止HTML页面滚动的操作方法
    在前端开发中，禁止HTML页面滚动通常涉及到对CSS样式或JavaScript的使用。以下是一些常见的方法： 1. 使用CSS的overflow属性 你可以通过设置H
  • HTML文本域怎么设置为禁止用户手动拖动
    在HTML中，文本域（textarea）通常允许用户通过拖拽其右下角来调整大小。然而，有时我们可能希望禁止这种手动拖动行为，以固定文本域的

  • Html去除a标签的默认样式的代码

    Html去除a标签的默认样式的代码
    Html去除a标签的默认样式, a标签超链接字体默认蓝色带下划线; 去除可用: 1 2 3 4 5 a{ text-decoration:none; color:inherit; cursor:auto; } 测试代码 1 2 3 4

  • 通过HTML/CSS实现各类进度条的功能

    通过HTML/CSS实现各类进度条的功能
    需求：我们在开发中会遇到使用各式各样的进度条，因为当前插件里面进度条各式各样的，为了方便我们定制化的开发和方便修改样式，我
推荐阅读
最新更新
友情链接
  • 本站所有内容来源于互联网或用户自行发布，本站仅提供信息存储空间服务，不拥有版权，不承担法律责任。如有侵犯您的权益，请您联系站长处理！
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计