input标签的23种type类型

简介: input标签的23种type类型

type="text":用于显示文本输入框,用户可以输入任意文本。 示例: <input type="text" name="username" placeholder="请输入用户名">

type="password":用于显示密码输入框,用户输入的内容会被隐藏。 示例: <input type="password" name="password" placeholder="请输入密码">

type="submit":用于显示提交按钮,点击该按钮将提交表单数据。 示例: <input type="submit" value="提交">

type="reset":用于显示重置按钮,点击该按钮将重置表单数据。 示例: <input type="reset" value="重置">

type="button":用于显示普通按钮,点击该按钮可以触发指定的JavaScript代码。 示例: <input type="button" value="点击按钮">

type="checkbox":用于显示复选框,用户可以选择一个或多个选项。 示例: <input type="checkbox" name="checkbox1" value="1">选项1

type="radio":用于显示单选按钮,用户只能选择一个选项。 示例: <input type="radio" name="radio" value="1">选项1 <input type="radio" name="radio" value="2">选项2

type="color":用于显示颜色选择器,用户可以选择一个颜色。 示例: <input type="color" name="colorpicker">

type="date":用于显示日期选择器,用户可以选择一个日期。 示例: <input type="date" name="date">

type="email":用于显示电子邮件输入框,用于输入电子邮件地址。 示例: <input type="email" name="email" placeholder="请输入邮箱">

type="file":用于显示文件选择框,用户可以选择一个文件进行上传。 示例: <input type="file" name="file">

type="number":用于显示数字输入框,仅允许用户输入数字。 示例: <input type="number" name="quantity" min="1" max="10">

type="range":用于显示滑动条,用户可以通过滑动选择一个值。 示例: <input type="range" name="range" min="0" max="100">

type="search":用于显示搜索框,用户可以输入搜索关键词。 示例: <input type="search" name="search" placeholder="搜索">

type="tel":用于显示电话号码输入框,用于输入电话号码。 示例: <input type="tel" name="phone" placeholder="请输入电话号码">

type="time":用于显示时间输入框,用户可以选择一个时间。 示例: <input type="time" name="time">

type="url":用于显示URL输入框,用于输入URL地址。 示例: <input type="url" name="url" placeholder="请输入URL">

type="week":用于显示周选择器,用户可以选择一个周份。 示例: <input type="week" name="week">

type="datetime":用于显示日期时间输入框,用户可以选择日期和时间。 示例: <input type="datetime" name="datetime">

type="datetime-local":用于显示本地日期时间输入框,用户可以选择本地日期和时间。 示例: <input type="datetime-local" name="datetime-local">

type="month":用于显示月份选择器,用户可以选择一个月份。 示例: <input type="month" name="month">

type="hidden":用于隐藏域,不显示在页面上,用于在后台存储数据。 示例: <input type="hidden" name="hidden" value="hidden value">

type="image":用于显示图像按钮,点击图像按钮时可以触发指定的JavaScript代码。 示例: <input type="image" src="image.png" alt="图像按钮">

目录
相关文章
|
5月前
使用Form报错提示If ngModel is used within a form tag, either the name attribute must be set or the form
使用Form报错提示If ngModel is used within a form tag, either the name attribute must be set or the form
|
6月前
|
JavaScript 前端开发 数据安全/隐私保护
HTML中input常用的type属性及使用场景
HTML中input常用的type属性及使用场景
87 0
Thymeleaf 表达式工具类(#strings #dates #numbers #bools)
Thymeleaf 表达式工具类(#strings #dates #numbers #bools)
|
6月前
|
关系型数据库 MySQL 数据库
连接MySQL时报错:Public Key Retrieval is not allowed的解决方法
连接MySQL时报错:Public Key Retrieval is not allowed的解决方法
173 1
|
Java
groovy下的field和property
groovy下的field和property
190 0
|
9月前
|
Java
Java——获取实体类默认值
Java——获取实体类默认值
|
11月前
|
Java
【java】主线程等待子线程执行结束后再执行,线程池
【java】主线程等待子线程执行结束后再执行,线程池
138 0
|
JavaScript 前端开发 API
HTML property 和 attribute 的区别
HTML property 和 attribute 的区别
129 0
|
Web App开发 iOS开发
HTML Input属性(三)
HTML Input属性(三)
106 0
|
Web App开发 移动开发 JavaScript
HTML Input属性(一)
HTML Input属性(一)
184 0