input标签的23种type类型

news/2025/2/21 4:43:15/

一、概述

随着html5的出现,input标签新增了多种类型,用以接收各种类型的用户输入。其中传统输入控件有10种,新增输入控件有13种。

二、传统类型

传统输入控件有10种,如下所示。

text        定义单行文本输入框
password    定义密码输入框
file        定义文件上传控件
radio       定义单选按钮
checkbox    定义复选框
hidden      定义隐藏的输入字段
button      定义按钮
image       定义图像形式的提交按钮
reset       定义重置按钮,重置按钮会清除表单中的所有数据
submit      定义提交按钮,提交按钮会把表单数据发送到服务器

三、新增类型

新增输入控件有13种,如下所示。

color    定义调色板
tel      定义包含电话号码的输入域
email    定义包含email地址的输入域
url      定义包含URL地址的输入域
search   定义搜索域
number   定义包含数值的输入域
range    定义包含一定范围内数字值的输入域
date     定义选取日、月、年的输入域 
month    定义选取月、年的输入域
week     定义选取周、年的输入域
time     定义选取月、年的输入域
datetime 定义选取时间、日 月、年的输入域(UTC时间)
datetime-local 定义选取时间、日 月、年的输入域(本地时间)

ie和firefox这6种日期类型都不支持,chrome不支持datetime类型。要预设控件的日期和时间,可以用字符串设置value属性。

date                   YYYY-MM-DD
time                   hh:mm:ss.s
datetime               YYYY-MM-DDThh:mm:ss:sZ
datetime-local           YYYY-MM-DDThh:mm:ss:s
month                 YYYY-MM
week                   YYYY-Wnn
YYYY=年
MM=月
DD=日
hh=小时
mm=分钟
ss=秒
s=0.1秒
T=日期与时间之间的分隔符
Z=Zulu时间的时区
Wnn=W周数,从1月的第一周开始是1,直到52

该类型的value特性格式还可以用在min和max的特性里,用来创建时间跨度。step可以用来设置移动的刻度。chrome不支持该类型的step设置。


http://www.ppmy.cn/news/1149280.html

相关文章

Gemmini测试test文件chisel源码详解(二)

HeaderGenerationUnitTest.scala 源码如下: package gemminiimport org.scalatest.FlatSpecclass HeaderGenerationUnitTest extends FlatSpec {it should "generate a header" in {println(GemminiConfigs.defaultConfig.generateHeader())} } Header…

【java学习】构造方法重载(26)

文章目录 构造方法(构造器)的重载 构造方法(构造器)的重载 构造器一般用来创建对象的同时初始化对象。如 class Person{         String name;         int age; public Person(String n , int a){         namen; agea;         } } 构造器…

203、RabbitMQ 之 使用 direct 类型的 Exchange 实现 消息路由 (RoutingKey)

目录 ★ 使用direct实现消息路由代码演示这个情况二ConstantUtil 常量工具类ConnectionUtil 连接RabbitMQ的工具类Publisher 消息生产者测试消息生产者 Consumer01 消息消费者01测试消费者结果: Consumer02 消息消费者02测试消费者结果: 完整代码&#x…

【GO】基础速成

简单介绍一下go好处 编译语言,可以提前报错同时又有python的一些优点,自带多线程 开始学习 学习网站:学习网站 值 包含:字符串、整型、浮点型、布尔型等等 字符串可以 进行拼接。 需要注意的是布尔型在go里面不自动转化为in…

【网安】网络安全防止个人信息泄露

网络安全防止个人信息泄露 1、尝试检查自己的网络隐私数据是否泄漏过,可以使用下面的网站2、使用安全非盈利组织的浏览器3、安装浏览器插件,防止网络跟踪4、保持安全的访问方式 1、尝试检查自己的网络隐私数据是否泄漏过,可以使用下面的网站 …

数据集笔记:分析OpenCellID 不同radio/ create_time update_time可视化

1 读取数据 (以新加坡的cellID为例) import geopandas as gpd import pandas as pdopencellidpd.read_csv(OpenCellID_SG.csv,headerNone,names[radio,mcc,net,area,cell,unit,lon,lat,range,samples,changeable1,created1,updated,AveSignal]) opence…

get和post的区别

请求方式GETPOST参数位置参数拼接到url的后面参数在请求体中参数大小受限于浏览器url大小,一般不超过32K1G服务器数据接收接收1次根据数据大小,可分多次接收适用场景从服务器端获取数据向服务器提交数据安全性参数携带在url中,安全性低相对于…

Qt作业五

1、思维导图 https://www.zhixi.com/view/9e899ee0 2、作业 #include <iostream>using namespace std;class Animal { private:string name; public:Animal(){}Animal(string n):name(n){}virtual void perform()0; };class Lion:public Animal { public:void perform…