零基础HTML教程(33)--HTML5表单新功能

文章目录

  • 1. 背景
  • 2. HTML5新增表单元素
    • 2.1 number (数字输入框)
    • 2.2 email (邮箱输入框)
    • 2.3 url (链接输入框)
    • 2.4 tel (电话输入框)
    • 2.5 range (范围选择框)
    • 2.6 color (颜色选择框)
    • 2.7 datetime (日期时间选择框)
    • 2.8 search (搜索框)
  • 3. placeholder (占位属性)
  • 4. 小结

1. 背景

实际上HTML5之前提供的表单也够用了,但是如果原生HTML就能提供一些更复杂的表单元素,例如日期时间输入框,岂不是更好?

HTML5确实也这么做了,提供了更多细分种类的表单元素,但是不好意思,目前PC端浏览器支持并不算很好,倒是手机端支持的都挺棒的。或许是手机更新换代更快,更潮流的原因吧。

2. HTML5新增表单元素

接下来我们简要介绍下H5新增的那些表单元素,注意此处测试使用的浏览器为360极速浏览器,不同浏览器对这些新特性的支持还是不大一样的。

2.1 number (数字输入框)

可以先定元素只能输入数字,代码:

请输入年龄:<input type="number">

效果如下,该输入框只能输入数字,另外右侧有个挺丑的用来调大1/减小1的操作按钮。这个还是挺有用的,毕竟能限制输入内容必须是数字。
在这里插入图片描述

2.2 email (邮箱输入框)

可以设定元素用来输入邮箱,代码如下:

请输入邮箱:<input type="email">

效果如下,似乎就是个文本框而已,所以H5标准虽然是单独给email设了个元素,实际当前浏览器可能也没怎么给它支持到位。
在这里插入图片描述

2.3 url (链接输入框)

可以设定元素用来输入链接,代码如下:

请输入网址链接:<input type="url">

效果如下,说实话还是第一个普通文本框,浏览器的支持还是没跟上。
在这里插入图片描述

2.4 tel (电话输入框)

可以设定元素输入电话号码,代码如下:

请输入电话:<input type="tel">

效果如下,这个就更尴尬了,除了数字还可以输入字母,说实话当前浏览器对它的支持就是个文本框。
在这里插入图片描述

2.5 range (范围选择框)

可以设定元素取值的范围,代码如下:

请选择年龄范围:<input type="range" min="0" max="100" step="1">

效果如下,此时可选最小值为0,最大值100,滑块每次移动最小变化值为1。

可喜可贺的是,当前浏览器给range元素单独做了样式,可惜的是竟然看不到当前选中的值,这个还得需要后续学习JS等技术后再完善它的功能。
在这里插入图片描述

2.6 color (颜色选择框)

可以设定元素用来选择颜色,代码如下:

请选择颜色:<input type="color">

效果如下,我们可以轻易的选择任意的颜色,而且选中值还会形象的显示到选择框中,当前浏览器对它的支持堪称完美。
在这里插入图片描述

2.7 datetime (日期时间选择框)

可以设定元素用来选择日期、时间信息,代码如下:

 	请选择日期:<input type="date"><br><br>请选择时间:<input type="time"><br><br>请选择日期+时间:<input type="datetime">

效果分别如下,支持的都很好,看来日期时间很重要,浏览器迅速推出支持,可喜可贺。
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.8 search (搜索框)

可以设定元素用来进行搜索,代码如下:

请输入关键词:<input type="search">

效果如下,可见又是一个普通的问文本框。
在这里插入图片描述

3. placeholder (占位属性)

html5中除了新增了很多表单元素,还有一个很重要的功能,就是增加了一个属性,该属性用来展示占位内容。

所谓占位内容,就是当表单没有输入时候显示的提示信息,例如:

姓名:<input type="text" placeholder="此处输入姓名">

效果如下,可见占位符可以显示灰色的提示文字,而且文字就在表单元素内部,效果还是比较好的。
在这里插入图片描述

现在的一些表单,有时候直接把左侧的文字去掉,使用placeholder来引导用户输入信息,这也是可以的。唯一需要考虑的是特别的老的浏览器,可能不支持。

4. 小结

新增元素挺多,但是当前浏览器支持不够友好。

而新增的placeholder属性,非常好用!

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

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

相关文章

前后端分离的好处

进行前后端分离开发的原因主要归结于以下几个方面&#xff1a; 提升开发效率&#xff1a;前后端分离允许前端和后端团队独立工作&#xff0c;他们可以并行开发&#xff0c;不需要等待对方完成才能开始自己的工作。这样可以大大缩短开发周期&#xff0c;加快产品上市时间。 职责…

站在ESG“20+”新起点上,看中国ESG先锋探索力量

全链减碳、建设绿色工厂、打造零碳产品、守护生物多样性、向受灾群众捐助……不知你是否察觉&#xff0c;自“双碳”目标提出以来&#xff0c;一股“可持续发展热潮”正覆盖各行各业&#xff0c;并且渗透到我们衣食住行的方方面面。在资本市场&#xff0c;ESG投资热潮更是席卷全…

TemperMonkey用于通义千问网页版回答完毕自动朗读的脚本代码

// UserScript // name 通义千问回答完毕-朗读结果 // namespace http://tampermonkey.net/ // version 2024-04-26 // description try to take over the world! // author You // match https://tongyi.aliyun.com/qianwen* // icon h…

AI爆文写作:要写文章爆,这47个爆文前缀少不了!

47个爆文前缀:很震惊很好用 这些前缀,虽然被用了无数次,但每个人看到还是会忍不住点进去。 可以借鉴这样强情绪的句式。 序号前缀1就在刚刚…2真相曝光…3震惊国人…4惊天秘密…5疯狂转发…6删前速看…7千万别吃…8还敢喝吗…9癌症前兆…10赶快扔了…11太可怕了…12大事不…

1-3RT-Thread内核基础-笔记

RT-Thread内核相关的概念与基础知识 其中内核库是为了保证内核能够独立运行的一套小型的类似C库的函数实现子集。这部分根据编译器的不同&#xff0c;自带C库的情况也会有些不同。 内核最小的资源占用情况是3K的ROM和1.2K的RAM。 RT thread系统启动流程 启动文件&#xff0c;此…

智慧仓储新动力:EasyCVR+AI视频智能监管系统方案助力仓储安全高效管理

一、背景 随着物流行业的快速发展和智能化水平的提升&#xff0c;智慧仓储视频智能监管系统已成为现代仓储管理的重要组成部分。本系统通过综合运用物联网、视频分析、边缘计算等技术手段&#xff0c;实现对仓储环境的全面监控、智能分析和高效管理。 TSINGSEE青犀视频汇聚Ea…

【启明智显技术分享】SOM2D02-2GW核心板适配ALSA(适用Sigmastar ssd201/202D)

提示&#xff1a;作为Espressif&#xff08;乐鑫科技&#xff09;大中华区合作伙伴及sigmastar&#xff08;厦门星宸&#xff09;VAD合作伙伴&#xff0c;我们不仅用心整理了你在开发过程中可能会遇到的问题以及快速上手的简明教程供开发小伙伴参考。同时也用心整理了乐鑫及星宸…

IPIDEA与您分享:代理IP究竟是如何保护用户隐私的?

在信息化、网络化的今天&#xff0c;互联网已成为人们生活中不可或缺的一部分。无论是日常沟通、学习工作&#xff0c;还是娱乐休闲&#xff0c;网络都扮演着举足轻重的角色。然而&#xff0c;随着网络活动的增加&#xff0c;网络安全问题也日益凸显&#xff0c;为了保护个人隐…

前端 CSS 经典:元素倒影

前言&#xff1a;好看的元素倒影&#xff0c;可以通过-webkit-box-reflect 实现。但有兼容问题&#xff0c;必须是 webkit 内核的浏览器&#xff0c;不然没效果。但是好看啊。 效果图&#xff1a; 代码实现&#xff1a; <!DOCTYPE html> <html lang"en"&g…

【C++】<图形库> 三人成棋(面向对象写法)

目录 一、游戏需求 二、程序架构 三、代码实现 四、实现效果 五、已知BUG 一、游戏需求 构建一个五子棋游戏&#xff0c;在自定义棋盘宽度和高度的基础上&#xff0c;实现三人对战功能&#xff0c;并且能判定谁输谁赢。 二、程序架构 (1) 对象分析&#xff1a; 【1】 需…

监控服务器性能指标,提升服务器性能

服务器是网络中最关键的组件之一&#xff0c;混合网络架构中的每个关键活动都以某种方式与服务器操作相关&#xff0c;服务器不仅是现代计算操作的支柱&#xff0c;也是网络通信的关键。 从发送电子邮件到访问数据库和托管应用程序&#xff0c;服务器的可靠性和性能直接影响到…

揭秘循环购模式:消费返利新玩法,引领电商新潮流

在当今的消费市场中&#xff0c;有一种商业模式引起了广大消费者的热烈讨论——那就是循环购模式。你可能会想&#xff0c;消费满千元就能得到两千元的福利&#xff0c;每天还能领取现金&#xff0c;这怎么可能呢&#xff1f;商家难道真的在“慷慨解囊”&#xff1f;今天&#…

数据结构_链式二叉树(Chained binary tree)基础

✨✨所属专栏&#xff1a;数据结构✨✨ ✨✨作者主页&#xff1a;嶔某✨✨ 二叉树的遍历 前序、中序以及后序遍历 学习二叉树结构&#xff0c;最简单的方式就是遍历。所谓二叉树遍历(Traversal)是按照某种特定的规则&#xff0c;依次对二叉树中的结点进行相应的操作&#xff…

Docker(三) 容器管理

1 容器管理概述 Docker 的容器管理可以通过 Docker CLI 命令行工具来完成。Docker 提供了丰富的命令&#xff0c;用于管理容器的创建、启动、停止、删除、暂停、恢复等操作。 以下是一些常用的 Docker 容器命令&#xff1a; 1、docker run&#xff1a;用于创建并启动一个容器。…

声量 2024 | 从小到大,有哪些好产品曾出现在我们生活里?

点击文末“阅读原文”即可参与节目互动 剪辑、音频 / 老段 运营 / SandLiu 卷圈 监制 / 姝琦 封面 / 姝琦 产品统筹 / bobo 场地支持 / 阿那亚 联合制作 / 声量The Power of Voice 特别鸣谢 / 深夜谈谈播客网络 本期节目录制于第二届「声量The Power of Voice」现场。 在…

Visual Studio调用matlab的二种方式及区别

VS调用matlab的方式有两种&#xff1a; 方式1调用MATLAB引擎 首先&#xff0c;添加头文件 #include “engine.h” 然后&#xff0c;引用函数调用依赖库(lib) libeng.lib libmx.lib libmat.lib&#xff0c;之后就可以调用MATLAB引擎。 方式2调用MATLAB生成的dll 调用MATLAB生…

如何在VSCode中修改默认终端

如何在VSCode中修改默认终端 步骤1: 打开设置步骤2: 搜索终端设置步骤3: 配置默认终端Windows:macOS:Linux: 步骤4: 保存设置 在VSCode中修改默认终端的步骤如下&#xff1a; 步骤1: 打开设置 点击左下角的齿轮图标&#xff0c;选择“设置”(或者使用快捷键 Ctrl , on Windo…

如果直升机一直在空中悬停,24小时后能否绕行地球一圈?

直升机悬停在空中&#xff0c;似乎给了我们一种静止的错觉。但如果直升机一直保持这种状态&#xff0c;24小时后&#xff0c;它是否能够神奇地绕地球一圈&#xff1f; 地球自转&#xff1a;直升机悬停的无形锁链 问题的答案并非像表面上看起来那样简单。要解答这个问题&#…

【Java】全局统一返回结果类封装

文章目录 为什么需要封装全局统一的返回结果类结果枚举类统一结果类 我是一名立志把细节说清楚的博主&#xff0c;欢迎【关注】&#x1f389; ~ 原创不易&#xff0c; 如果有帮助 &#xff0c;记得【点赞】【收藏】 哦~ ❥(^_-)~ 如有错误、疑惑&#xff0c;欢迎【评论】指正…

使用 Django Admin 进行高效的后台管理

文章目录 创建超级用户注册模型到 Admin 后台自定义 Admin 后台界面定制 Admin Actions结语 当使用 Django Admin 进行后台管理时&#xff0c;开发者可以通过简单的配置和定制来满足项目的需求。可以根据不同的模型和数据结构&#xff0c;轻松地创建和管理数据条目、进行搜索和…