HTML 输入类型

简介: HTML 输入类型

输入类型


本章描述 <input> 元素的输入类型。


输入类型:text


<input type="text"> 定义供文本输入的单行输入字段:


实例



输入类型:password


<input type="password"> 定义密码字段:只有使用了type="password",密码才能看不到。


实例



输入类型:submit


<input type="submit"> 定义提交表单数据至表单处理程序的按钮。


表单处理程序(form-handler)通常是包含处理输入数据的脚本的服务器页面。

如果您省略了提交按钮的 value 属性,那么该按钮将获得默认文本

在表单的 action 属性中规定表单处理程序(form-handler):


实例



Input Type: radio


<input type="radio"> 定义单选按钮。

Radio buttons let a user select ONLY ONE of a limited number of choices:


实例



Input Type: checkbox


<input type="checkbox"> 定义复选框。

Checkboxes let a user select ZERO or MORE options of a limited number of choices.


实例



Input Type: button


<input type="button> 定义按钮。


实例


HTML5 输入类型


HTML5 增加了多个新的输入类型:


  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week


注释:老式 web 浏览器不支持的输入类型,会被视为输入类型 text。


输入类型:number


<input type="number"> 用于应该包含数字值的输入字段。


您能够对数字做出限制。

根据浏览器支持,限制可应用到输入字段。


实例



输入限制


这里列出了一些常用的输入限制(其中一些是 HTML5 中新增的):


属性 描述
disabled 规定输入字段应该被禁用。
max 规定输入字段的最大值。
maxlength 规定输入字段的最大字符数。
min 规定输入字段的最小值。
pattern 规定通过其检查输入值的正则表达式。
readonly 规定输入字段为只读(无法修改)。
required 规定输入字段是必需的(必需填写)。
size 规定输入字段的宽度(以字符计)。
step 规定输入字段的合法数字间隔。
value 规定输入字段的默认值。





输入类型:color


<input type="color"> 用于应该包含颜色的输入字段。

根据浏览器支持,颜色选择器会出现输入字段中。


实例



输入类型:range


<input type="range"> 用于应该包含一定范围内的值的输入字段。

根据浏览器支持,输入字段能够显示为滑块控件。您能够使用如下属性来规定限制:min、max、step、value。


实例



输入类型:month

<input type="month"> 允许用户选择月份和年份。

根据浏览器支持,日期选择器会出现输入字段中。


实例



输入类型:week


<input type="week"> 允许用户选择周和年。

根据浏览器支持,日期选择器会出现输入字段中。


实例



输入类型:time


<input type="time"> 允许用户选择时间(无时区)。

根据浏览器支持,时间选择器会出现输入字段中。


实例


 

 

输入类型:datetime


<input type="datetime"> 允许用户选择日期和时间(有时区)。

根据浏览器支持,日期选择器会出现输入字段中。


实例


<form>
  Birthday (date and time):
  <input type="datetime" name="bdaytime">
</form>


输入类型:datetime-local

<input type="datetime-local"> 允许用户选择日期和时间(无时区)。

根据浏览器支持,日期选择器会出现输入字段中。


实例



输入类型:email


<input type="email"> 用于应该包含电子邮件地址的输入字段。

根据浏览器支持,能够在被提交时自动对电子邮件地址进行验证。

某些智能手机会识别 email 类型,并在键盘增加 ".com" 以匹配电子邮件输入。


实例



输入类型:search


<input type="search"> 用于搜索字段(搜索字段的表现类似常规文本字段)。


实例



输入类型:tel


<input type="tel"> 用于应该包含电话号码的输入字段。

目前只有 Safari 8 支持 tel 类型。


实例



输入类型:url


<input type="url"> 用于应该包含 URL 地址的输入字段。

根据浏览器支持,在提交时能够自动验证 url 字段。

某些智能手机识别 url 类型,并向键盘添加 ".com" 以匹配 url 输入。


实例


相关文章
|
6月前
|
XML 移动开发 数据格式
html5为什么只需要写<!doctype html>? 有多少种Doctype文档类型?
html5为什么只需要写<!doctype html>? 有多少种Doctype文档类型?
66 0
|
1月前
|
移动开发 HTML5
HTML5标签的类型
HTML5标签的类型。
57 5
|
2月前
|
移动开发 前端开发 JavaScript
Twaver-HTML5基础学习(15)形状连线(ShapeLink)四种类型(直线、正交、二次贝塞尔、三次贝塞尔)
本文介绍了Twaver HTML5中的形状连线(ShapeLink),包括如何使用它以及如何添加控制点。文章详细解释了ShapeLink支持的四种连线类型:直线(lineto)、正交(orthogonalto)、二次贝塞尔曲线(quadto)和三次贝塞尔曲线(cubicto),并通过示例代码展示了如何在React组件中创建和配置ShapeLink。
52 3
|
1月前
|
JavaScript 前端开发 UED
HTML 超链接的多种类型及应用
【10月更文挑战第17天】HTML 超链接类型丰富多样,它们共同构成了网页中不可或缺的导航和交互元素。通过合理地选择和运用这些超链接类型,我们可以为用户创造更加流畅和便捷的浏览体验,提升网站的可用性和吸引力。
42 1
|
2月前
|
移动开发 前端开发 JavaScript
Twaver-HTML5基础学习(14)连线(Link)连线类型(直线、延伸直线、正交直线)
本文介绍了Twaver HTML5中连线(Link)的不同类型,包括直线、延伸直线和正交直线,并通过示例代码展示了如何在React组件中设置Link的类型和样式。
27 1
Twaver-HTML5基础学习(14)连线(Link)连线类型(直线、延伸直线、正交直线)
|
1月前
|
移动开发 数据安全/隐私保护 UED
HTML5 新的 Input 类型详解
HTML5引入了多种新输入类型,显著提升了表单的用户体验和可用性。这些类型包括普通文本、搜索、电子邮件、网址、电话号码、密码、数字、范围选择、日期、时间、颜色选择等,每个类型都有特定用途和优化功能。例如,`email` 类型可自动验证邮件格式,`number` 类型提供增减按钮,而 `date` 类型则内置日期选择器。这些新类型不仅简化了用户操作,还增强了开发者对表单验证和数据交互的控制能力。
|
1月前
|
存储 移动开发 数据库
HTML5 Web IndexedDB 数据库常用数据存储类型
IndexedDB 支持多种数据存储类型,满足复杂数据结构的存储需求。它包括基本数据类型(如 Number、String、Boolean、Date)、对象(简单和嵌套对象)、数组、Blob(用于二进制数据如图像和视频)、ArrayBuffer 和 Typed Arrays(处理二进制数据)、结构化克隆(支持 Map 和 Set 等复杂对象),以及 JSON 数据。尽管不直接支持非序列化数据(如函数和 DOM 节点),但可以通过转换实现存储。开发者应根据具体需求选择合适的数据类型,以优化性能和使用体验。
|
2月前
|
存储 移动开发 搜索推荐
HTML5 常用存储类型
HTML5 常用存储类型
|
3月前
|
自然语言处理 前端开发 开发者
|
5月前
|
安全 数据安全/隐私保护 UED
HTML基础-输入类型与表单验证
【6月更文挑战第5天】本文探讨HTML表单元素和输入类型,强调表单验证的重要性。常见的输入类型包括text、email、password、number、date、checkbox和radio。在表单验证中,应注意设置`required`属性、指定输入类型和使用`pattern`属性以进行自定义验证。结合客户端和服务器端验证可提高用户体验和数据安全性。正确运用这些方法能创建更高效、更安全的表单。
56 5