input标签的type属性汇总

1.单行输入框< input type=“text”/>
单行文本输入框常用来输入简短的信息,如用户名、账号等,常用的属性有name、value、 maxlength。

2.密码输入框< input type=" password"/>
密码输入框用来输入密码,其内容将以圆点的形式显示。

3.单选按钮< input type=" radio"/>
单选按钮用于单项选择,如选择性别、是否操作等。需要注意的是,在定义单选按钮时,必须为同一组中的选项指定相同的name值,这样“单选”才会生效。此外,可以对单选按钮应用 checked属性,指定默认选中项。

4.复选框< input type=" checkbox"/>
复选框常用于多项选择,如选择兴趣、爱好等,可对其应用 checked属性,指定默认选中项。

5.普通按钮< input type=" button"/>
普通按钮常常配合JavaScript脚本语言使用,初学者了解即可。

6.提交按钮< nput type=" 'submit"/>
提交按钮是表单中的核心控件,用户完成信息的输入后一般都需要单击提交按钮才能完成表单数据的提交。可以对其应用 value属性,改变提交按钮上的默认文本。

7.重置按钮< input type=" reset"/>
当用户输入的信息有误时,可单击重置按钮取消已输入的所有表单信息。可以对其应用 value属性,改变重置按钮上的默认文本。

8.图像形式的提交按钮< input type=" image"/>
图像形式的提交按钮与普通的提交按钮在功能上基本相同,只是它用图像替代了默认的按钮,外观上更加美观。需要注意的是,必须为其定义src属性指定图像的url地址。

9.隐藏域< input type=" hidden"/>
隐藏域对于用户是不可见的,通常用于后台的程序,初学者了解即可。

10.文件域< input type=“file”/>
当定义文件域时,页面中将出现一个“选择文件”按钮和提示信息文本,用户可以通过单击按钮然后直接选择文件的方式,将文件提交给后台服务器。

11.emai类型< input type=“email”/>

emai类型的标记是一种专门用于输入E-mai地址的文本输入框,用来验证emai输入框的内容是否符合E-mai地址格式;如果不符合,将提示相应的错误信息。

12.url类型 <input type “url”/>
Url类型的< input />标记是一种用于输入URL地址的文本框。如果所输入的内容是URL地址格式的文本,则会提交数据到服务器;如果输入的值不符合URL地址格式,则不允许提交,并且会有提示信息。

13.tel类型< input type=“tel”/>
tel类型用于提供输入电话号码的文本框,由于电话号码的格式千差万别,很难实现一个通用的格式。因此,tel类型通常会和 pattern属性配合使用。

14 search类型< input type=" search"/>

search类型是一种专门用于输入搜索关键词的文本框,它能自动记录一些字符,如站点搜索或者Google搜索。在用户输入内容后,其右侧会附带一个删除图标,单击这个图标按钮可以快速清除内容。

15 color类型< input type=" color"/>
color类型用于提供设置颜色的文本框,用于实现一个RGB颜色输入。其基本形式是# RRGGBB,默认值为#000000,通过value属性值可以更改默认颜色。单击clor类型文本框,可以快速打开拾色器面板,方便用户可视化选取一种颜色。

16 number类型< input type=" number/>
number类型的 <input/标记用于提供输入数值的文本框。在提交表单时,会自动检查该输入框中的内容是否为数字。如果输入的内容不是数字或者数字不在限定范围内则会出现错误提示。

number类型的输入框可以对输入的数字进行限制,规定允许的最大值和最小值、合法的数字间隔或默认值等。具体属性说明如下。
●vale:指定输入框的初始值
●max:指定输入框可以接受的最大的输入值。
min:指定输入框可以接受的最小的输入值。
●sep:输入域合法的数字间隔,如果不设置,默认值是1。

17 range类型< input type=" range"/>
range类型的<inpu标记用于提供一定范围内数值的输入范围,在网页中显示为滑动条。它的常用属性与 number类型一样,通过min属性和max属性,可以设置最小值与最大值,通过step属性指定每次滑动的步幅。如果想改变mnge的vale值,可以通过直接拖动滑动块或者单击滑动条来改变。

18.Date pickers类型< input type= date, month,week…"/>
Date picker类型是指时间日期类型。HML中提供了多个可供选取日期和时间的输入类型,用于验证输入的日期、具体。
Date:选取日、月、年
Month:选取月、年
Week:选取周、年
Time:选取时间(小时和分钟)
Datetime:选取时间、日、月、年(UTC时间)
datetime-local:选取时间、日、月、年(本地时间)

UTC是 Universal Time Coordinated的英文缩写,即“协调世界时”,又称世界标准时间。简单地说,UTC时间就是0时区的时间。例如,如果北京时间为早上8点,则UTC时间为0点,即UC时间比北京时间晚8小时。

注意:对于浏览器不支持的标记输入类型,则会在网页中显示为一个普通输入框。

HTML5是一种标记语言,用于构建网页内容和结构。它包含许多新功能和标签,为开发者提供了更多的灵活性和创造力。以下是一些HTML5的重要知识点。 1. 新的语义化标签:HTML5引入了一些新的标签,如`<header>`,`<nav>`,`<section>`,`<article>`等,用于更好地描述网页的结构和内容。这些标签对搜索引擎优化(SEO)很有帮助。 2. 多媒体支持:HTML5支持直接在网页上嵌入多媒体内容,如视频和音频。通过使用`<video>`和`<audio>`标签,开发者可以更容易地在网页上播放和控制媒体元素。 3. canvas绘图:HTML5的`<canvas>`元素允许开发者通过JavaScript来绘制图形、动画和游戏,而不需要使用插件。它提供了一个可编程的二维图形环境。 4. 本地存储:HTML5引入了本地存储技术,如localStorage和sessionStorage。这些技术允许开发者在客户端存储和访问数据,减少服务器负载并提高性能。 5. 表单增强:HTML5改进了表单元素,提供了一些新的输入类型和属性。例如,`<input>`标签type属性可以使用email、date、number等新类型,而不仅仅是text。 6. Web Workers:HTML5的Web Workers功能允许开发者在后台运行脚本,提高了网页的响应速度和性能。它可以在不干扰用户界面的情况下执行复杂的任务。 7. Web存储:HTML5提供了两种存储方式:IndexedDB和Web SQL。这些存储方式可以在客户端存储大量的数据,而无需依赖服务器。 总之,HTML5是一种强大的标记语言,为开发者提供了许多新功能和工具,使网页设计和开发更加灵活和高效。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值