HTML input 标签示例详解

目录

• 通用属性
• 输入框
• 单行文本输入框 text
• 密码输入框 password
• 数字输入框 number
• 电子邮件输入框 email
• 网址输入框 url
• 搜索输入框 search
• 按钮 submit reset button image
• 单选 radio
• 多选 checkbox
• 文件上传 file
• 滑块 range
• 颜色选择器 color
• 日期选择器 date
• 时间选择器 time

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

通用属性

输入框

单行文本输入框 text

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

密码输入框 password

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

数字输入框 number

可通过上下箭头调整数值

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

• 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 一起使用来触发脚本或执行特定操作

<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="女" />女

多选 checkbox

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

文件上传 file

<input type="file" />

滑块 range

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

• 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" />

到此这篇关于HTML input 标签的文章就介绍到这了,更多相关html input 标签内容请搜索电脑知识网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持电脑知识网！