编程笔记 html5cssjs 026 HTML输入类型(2/2)

编程笔记 html5&css&js 026 HTML输入类型(2/2)

  • 输入类型:date
  • 输入类型:color
  • 输入类型:range
  • 输入类型:month
  • 输入类型:week
  • 输入类型:time
  • 输入类型:datetime
  • 输入类型:datetime-local
  • 输入类型:email
  • 输入类型:search
  • 输入类型:tel
  • 输入类型:url
  • 小结

本节介绍HTML输入类型。也就是<input> 元素type属性的可以使用的值。这在桌面程序中是通过不同的控件实现的。

输入类型:date

<input type="date"> 用于应该包含日期的输入字段。
根据浏览器支持,日期选择器会出现输入字段中。

<form>Birthday:<input type="date" name="bday">
</form>
<form>Enter a date before 1980-01-01:<input type="date" name="bday" max="1979-12-31"><br>Enter a date after 2000-01-01:<input type="date" name="bday" min="2000-01-02"><br>
</form>

输入类型:color

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

<form>Select your favorite color:<input type="color" name="favcolor">
</form>

输入类型:range

用于应该包含一定范围内的值的输入字段。

<form><input type="range" name="points" min="0" max="10">
</form>

您能够使用如下属性来规定限制:min、max、step、value。

输入类型:month

允许用户选择月份和年份。
根据浏览器支持,日期选择器会出现输入字段中。

 <form>Birthday (month and year):<input type="month" name="bdaymonth">
</form>

输入类型:week

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

<form>Select a week:<input type="week" name="week_year">
</form>

输入类型:time

允许用户选择时间(无时区)。

<form>Select a time:<input type="time" name="usr_time">
</form>

输入类型:datetime

允许用户选择日期和时间(有时区)。

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

输入类型:datetime-local

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

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

输入类型:email

<input type="email"> 用于应该包含电子邮件地址的输入字段。
根据浏览器支持,能够在被提交时自动对电子邮件地址进行验证。
某些智能手机会识别 email 类型,并在键盘增加 “.com” 以匹配电子邮件输入。

<form>E-mail:<input type="email" name="email">
</form>

输入类型:search

·· 用于搜索字段(搜索字段的表现类似常规文本字段)。

<form>Search Google:<input type="search" name="googlesearch">
</form>

输入类型:tel

<input type="tel"> 用于应该包含电话号码的输入字段。
目前只有 Safari 8 支持 tel 类型。

<form>Telephone:<input type="tel" name="usrtel">
</form>

输入类型:url

<input type="url"> 用于应该包含 URL 地址的输入字段。
根据浏览器支持,在提交时能够自动验证 url 字段。
某些智能手机识别 url 类型,并向键盘添加 “.com” 以匹配 url 输入。

<form>Add your homepage:<input type="url" name="homepage">
</form>

小结

在实际项目中,根据现实业务需要,回头再详细了解HTML输入类型也是可以的。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/600885.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java数据结构与算法刷题-----LeetCode63. 不同路径 II

java数据结构与算法刷题目录&#xff08;剑指Offer、LeetCode、ACM&#xff09;-----主目录-----持续更新(进不去说明我没写完)&#xff1a;https://blog.csdn.net/grd_java/article/details/123063846 很多人觉得动态规划很难&#xff0c;但它就是固定套路而已。其实动态规划只…

第3章-指标体系与可视化-3.3-指标体系

目录 为什么要构建指标体系 什么是指标体系 如何构建指标体系 指标库

C#编程-实现继承

C#允许您通过扩展现有类的功能以创建新类来实现继承。 从基类创建派生类 使用以下语法在C#中创建派生类: class <derived_class>:<base_class>{...}确定继承的层次结构 要确定继承层次结构,必须检查派生类与基类之间的关系种类。确保派生类是一种基类。 请考虑以…

Linux——系统安全及应用

一、基本安全措施 1、系统账号清理 常见的非登录用户账号包括bin、daemon、 adm、lp、mail等。为了确保系统安全&#xff0c;这些用户账号的登录Shell通常是/ sbin/nologin&#xff0c;表示禁止终端登录&#xff0c;应确保不被人为改动。 //将非登陆用户的Shell设为/sbin/nolo…

【Spring Cloud】组件概念详解

&#x1f389;&#x1f389;欢迎来到我的CSDN主页&#xff01;&#x1f389;&#x1f389; &#x1f3c5;我是Java方文山&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;推荐给大家我的专栏《Spring Cloud》。&#x1f3af;&#x1f3af; &am…

2023 hnust 湖南科技大学 大四上 商务智能 课程 期末考试 复习资料

前言 《听了课就能及格》由于老师发的复习PPT内容过多&#xff08;近两万字&#xff09;&#xff0c;因此在此大幅删减由于老师透露太少&#xff0c;删减全凭主观意志&#xff0c;请谨慎参考&#xff01;&#xff01;&#xff01;猜测逻辑 过于细碎概念的不考&#xff08;不算…

【Tomcat】在一台计算机上运行两个Tomcat服务

首先把Tomcat整个文件复制一份放在其他文件夹路径中 1.修改环境变量 添加环境变量在系统变量里面 “CATALINA_HOME” 指向一个Tomcat文件夹路径 “CATALINA_HOME1” 指另一个Tomcat文件夹路径 2.修改startup里面的环境变量&#xff0c;全部修改 分别修改两个apache-tomcat…

【STM32】RTC实时时钟

1 unix时间戳 Unix 时间戳&#xff08;Unix Timestamp&#xff09;定义为从UTC/GMT的1970年1月1日0时0分0秒开始所经过的秒数&#xff0c;不考虑闰秒 时间戳存储在一个秒计数器中&#xff0c;秒计数器为32位/64位的整型变量 世界上所有时区的秒计数器相同&#xff0c;不同时区…

Linux第14步_安装FTP服务器

安装“vim编辑器”后&#xff0c;我们紧接着“安装FTP服务器”。 1、在安装前&#xff0c;要检查虚拟机可以上网&#xff0c;否则可能会导致安装失败。 2、在虚拟机界面右击鼠标&#xff0c;弹出下面的对话框 3、点击“打开终端(E)”&#xff0c;得到下面的界面 &#xff1a;…

基于SpringBoot的高校毕业生离校管理系统

文章目录 项目介绍主要功能截图:部分代码展示设计总结项目获取方式🍅 作者主页:超级无敌暴龙战士塔塔开 🍅 简介:Java领域优质创作者🏆、 简历模板、学习资料、面试题库【关注我,都给你】 🍅文末获取源码联系🍅 项目介绍 基于SpringBoot的高校毕业生离校管理系统…

SQL Server 权限管理

CSDN 成就一亿技术人&#xff01; 2024年 第一篇 难度指数&#xff1a;* * CSDN 成就一亿技术人&#xff01; 目录 1. 权限管理 什么是权限管理&#xff1f; SQL server的安全机制 服务器级角色 数据库级角色 对象级角色 2. 创建用户 赋予权限 最重要的一步骤 1. 权限…

oracle和mysql怎么传输数据

传输Oracle和MySQL之间的数据可以使用多种方法&#xff0c;以下是其中两种常用的方法&#xff1a; 使用ETL工具&#xff1a;ETL工具是一种用于数据抽取、转换和加载的工具&#xff0c;可以将数据从一个数据库传输到另一个数据库。常用的ETL工具有Apache NiFi、Talend、Pentaho…

使用arm-linux-gcc出现Syntax error: word unexpected (expecting “)“)

使用arm-linux-gcc出现Syntax error: word unexpected (expecting ")") 出现这样的报错该怎么解决&#xff1f; arm-linux-gcc 1.c -o 1 /usr/local/arm/usr/local/arm/5.4.0/usr/bin/../lib/gcc/arm-none-linux-gnueabi/5.4.0/../../../../arm-none-linux-gnueabi/b…

MySQL与Oracle数据库在网络安全等级方面用到的命令

MySQL数据库命令集 查看数据库版本 SELECT VERSION(); 空口令查询 SELECT user,host,account_locked FROM mysql.user WHERE user ; SELECT * FROM mysql.user; 查询 用户的密码加密情况 SELECT HOST,USER,PLUGIN FROM mysql.user; 查询是否有空用户 SELECT host,user,plug…

henauOJ 1102: 词组缩写

题目描述 定义&#xff1a;一个词组中每个单词的首字母的大写组合称为该词组的缩写。 比如&#xff0c;C语言里常用的EOF就是end of file的缩写。 输入 输入的第一行是一个整数T&#xff0c;表示一共有T组测试数据&#xff1b; 接下来有T行&#xff0c;每组测试数据占一行&a…

深入理解神经网络训练与反向传播

目录 前言1 损失函数1.1 交叉熵&#xff08;Cross Entropy&#xff09;&#xff1a;1.2 均方差&#xff08;Mean Squared Error&#xff09;&#xff1a; 2 梯度下降与学习率2.1 梯度下降2.2 学习率 3 正向传播与反向传播3.1 正向传播3.2 反向传播 4 链式法则和计算图4.1 链式法…

2023 hnust 湖南科技大学 大四上 计算机图形图像技术 课程 期末考试 复习资料

计算机图形图像技术复习资料 前言 改编自&#xff1a;https://blog.csdn.net/Liu_Xin233/article/details/135232531★重点&#xff0c;※补充github 考试题型 简述题&#xff08;10分4题&#xff0c;共40分&#xff09; 第1章的基本内容三维观察流水线中的基本概念与理解三…

抖店不好做?类目赛道没选对、选品能力跟不上,做不起来很正常!

我是王路飞。 抖店一直做不起来&#xff1f; 新手吐槽抖店不好做&#xff0c;绝大多数都有以下两个问题存在&#xff1a;类目赛道没选对、选品能力跟不上。 那你们做不起来也是很正常的一件事了。 今天围绕抖店的核心&#xff0c;给你们聊下&#xff0c;正确的运营抖店思路…

后台管理系统 -- 点击导航栏菜单对应的面包屑和标签(Tag)的动态编辑功能

相信很多时候,面包屑和标签(Tag)的功能几乎是后台管理系统标配。 就是会随着路由的跳转来进行相应的动态更新。 我先展示一下效果: 1.面包屑 先说一下思路&#xff1a; 我们导航菜单点击之后,将当前显示路由对象存储到Vuex的storge里面,然后在面包屑组件里面,读取这个状态即可…

Leetcode刷题笔记题解(C++):无重复字符的最长子串

思路&#xff1a; 利用滑动窗口的思想&#xff0c;用起始位置startindex和curlength来记录这个滑动窗口的大小&#xff0c;并且得出最长距离&#xff1b;利用哈希表来判断在滑动窗口中是否存在重复字符&#xff0c;代码如下所示&#xff1a; class Solution { public:int len…