html5 新增和改良的input 类型实例

最新推荐文章于 2024-07-08 16:22:22 发布
最新推荐文章于 2024-07-08 16:22:22 发布
阅读量67 收藏
点赞数
原文链接：http://www.cnblogs.com/guangzhou11/p/7468974.html
版权

url

test1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>s</title>
</head>
<body>
url提交成功
</body>
</html>

test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>

<body>
<form   action="test1.html"  method="post">
     <input type="url"   name="url" value="http://baidu.com">
       <input type="submit"  value="提交">
</form>
</body>
</html>

效果：

 

email

test1.html

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>s</title>
</head>
<body>
email提交成功
</body>
</html>

test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>

<body>
<form   action="test1.html"  method="post">
     <input type="email"   name="email" value="1774761877@qq.com">
       <input type="submit"  value="提交">
</form>
</body>
</html>

效果：

 

 date

test.html

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>

<body>
<form   >
     <input type="date"   name="date" value="">

</form>
</body>
</html>

 

效果：

 

time

test.html

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>

<body>
<form   >
     <input type="time"   name="time" value="10:00">

</form>
</body>
</html>

 

效果：

 

month

 test..html

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>

<body>
<form>
     <input type="month"   name="month"  value="2017-9-3">

</form>
</body>
</html>

 

效果：

 

 week

test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>

<body>
<form>
    <input type="week"   name="week"  value="">

</form>
</body>
</html>



 效果：

number

test.html

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>

<body>
<form>
    <input type="number"   name="number"  value="20"  min="10" max="100" step="10">

</form>
</body>
</html>

 

 效果：

 

 

range

test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>

<body>
<form>
    <input type="range"   name="range"  value="20"  min="10" max="100" step="5">

</form>
</body>
</html>

　效果：

 

color

test.html

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>

<body>
<form>
    <input type="color"   name="color"
           onchange="document.body.style.backgroundColor=document.getElementById('currentColor').textContent=this.value" >
     <span id="currentColor">

     </span>
</form>
</body>
</html>

 

效果：

2017-09-03  11:02:15

 

转载于:https://www.cnblogs.com/guangzhou11/p/7468974.html

weixin_30642267
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5学习笔记——新增元素
ass_ace
08-16 554
1、新增的元素： 1）新增的结构元素： &lt;section&gt;、&lt;article&gt;、&lt;aside&gt;、&lt;header&gt;、&lt;footer&gt;、&lt;nav&gt;、&lt;address&gt;、&lt;figure&gt;、&lt;main&gt; 2）新增的其他元素： &lt;video&am
HTML5新增的8类INPUT输入类型介绍
09-28
主要介绍了HTML5新增的8类INPUT输入类型介绍,这8个新的输入类型分别是email类型、url类型、number类型、range类型、日期类型、search类型、tel类型,本文分别对它们一一介绍,需要的朋友可以参考下
根据不同input类型设置不同的css
weixin_34362875的博客
11-03 201
只能通过如下方式设置<style> input.hrong { font-family:arial; font-weight:bold; color: red; } </style> <SCRIPT LANGUAGE="JavaScript"> functio...
HTML5中新增的input类型及其属性
热门推荐
rishonyou的博客
02-22 2万+
HTML5中新增的input类型及其属性HTML4.01中，input的类型只有text、button、password、submit、radio、checkbox和hidden（隐藏域）。H5中新增了一些类型，使用起来更加方便，包括： color 点击时弹出颜色选择器，可以选择任意颜色 number 输入范围内的数字，可以手动输入超出范围的数字，但不能提交 tel 输入电话号码，只有
h5 页面点击添加添加input框
weixin_30312563的博客
04-18 777
h5 页面点击添加添加input框 前段时间有个需求，页面要能点击添加按钮控制input框的个数，当时感觉有点难，就没做，这两个又遇到了，没办法写了个简单的 效果图，加号增加，减号减少 直接上代码， 用来bootstrap的组件 div部分 <div class="container col-md-8" style="margin:100px"> ...
html5新增搜索类型是,1 HTML5新增input类型
weixin_33782296的博客
06-03 155
全屏在HTML5中，大幅度增加与改良了input元素的种类，可以简单地使用这些元素来实现HTML5之前需要使用JavaScript才能实现的许多功能。HTML5中也没有规定这些元素在浏览器中的外观形式，所以同样的input元素在不同的浏览器中可能会有不同的外观。对于不支持新增input元素的浏览器来说，统一将这些input元素视为text类型。2.1.1邮件类型(1)功能描述：输入E-mail地址...
HTML5新增的input元素类型：number、range、email、color、date等
pan_junbiao的博客
07-08 954
HTML5 大幅度地增加与改良了 input 元素的种类，可以简单地使用这些元素来实现 HTML5 之前需要使用 JavaScript 才能实现的许多功能。到目前为止，大部分浏览器都支持 input 元素的种类。对于不支持新增 input 元素的浏览器，input 元素被统一视为 text 类型。另外，HTML5 中也没有规定这些元素在浏览器中的外观形式，因此同样的 input 元素在不同的浏览器中可能会有不同的外观。下面将详细介绍这些新增的 input 元素的类型。daterange。
HTML5+CSS3笔记(一)
单车去旅行的博客
08-19 252
一、H4与H5的区别 H5推出的理由及目标 1.web浏览器之间的兼容性很低 2.文档结构不够明确 3.web应用程序功能受到了限制 H5语法的改变 内容类型 文件扩展名html 内容类型不变 依然为text-html doctype声明 直接<!doctype html> 指定字符编码 <meta charset="U...
html 5与css 3入门书,HTML 5与CSS 3权威指南[按需印刷]
weixin_39912163的博客
06-29 114
《HTML 5与CSS 3权威指南》前言第 1 章 Web时代的变迁 / 11.1 迎接新的Web时代 / 21.1.1 HTML 5时代即将来临 / 21.1.2 HTML 5的目标 / 41.2 HTML 5会深受欢迎的理由 / 41.2.1 世界知名浏览器厂商对HTML 5的支持 / 41.2.2 第一个理由：时代的要求 / 51.2.3 第二个理由：Inte...
HTML5新增的表单元素和属性实例解析
09-28
此外，HTML5还引入了几种新的input类型，包括email、number、range、tel、url以及日期和时间类型。email类型用于输入电子邮件地址，当用户输入格式不正确时，浏览器会给予提示。number类型用于输入数字，可以结合min...
HTML5 input新增type属性color颜色拾取器的实例代码
09-22
`type="color"` 是HTML5中新增的`input`类型，它用于创建一个颜色选择器，允许用户从颜色选取器中选择颜色。下面是一个关于`type="color"`的简单实例： ```html <!DOCTYPE html> <html lang="en"> , initial-...
HTML5与CSS3权威指南
ljiechang的专栏
11-03 2470
第一章：Web时代的变迁 HTML5放心使用的理由： 兼容性：HTML5在老板本的浏览器上也可以正常运行； 实用性：HTML5内部并没有封装什么很复杂的，不切实际的功能，而只是封装了简单实用的功能； 非革命性的发展：HTML5的内部功能不是革命性的，只是发展性的。 第二章：HTML5与HTML4的区别 1.DOCTYPE声明： 2.指定字符i编码： 3.不允许写结束标记的元
【浏览器插件】智译网页翻译 自动翻译 双语对照 AI对话.zip
08-21
智译网页翻译插件，由新译科技精心打造，是一款智能化的网页翻译利器。当您浏览网页时，它能够自动识别页面语言，并迅速将其翻译成您预设的目标语言。支持双语对照、自动翻译、划词翻译，让您在浏览外文网站时，信息一目了然。 AI助手LangGPT的加入，让智译更进一步。它不仅能自动总结页面内容，还能与您自由对话，高效便捷地获取所需信息。智译支持包括英语、俄语、德语、法语、西班牙语等在内的十数种语言与中文的互译，无论是欧美语言还是亚洲语言，甚至是少数民族语言，都能轻松应对。 无论是查阅资料、浏览新闻还是在线购物，智译都能助您一臂之力，节省时间，提升效率。使用起来也非常简单： 1. 自动翻译的开启与关闭：在设置页面，选择“自动翻译为”选项，即可在打开网页时自动翻译。若不需要自动翻译，关闭此选项即可，也可以点击右下角功能条上的“译”按钮手动翻译。 2. 双语对照翻译的开启与关闭：在设置页面，打开“双语对照模式”，新开或刷新页面后，翻译触发，页面将同时展示原文与译文。点击智译图标可切换查看模式，还可以自定义显示样式。 3. 划词翻译的开启与关闭：在设置页面，启用“启动划词翻译”，即可在页面上划选
毕业设计，基于SpringBoot+Vue+MySQL开发的公寓报修管理系统，源码+数据库+毕业论文+视频演示
08-21
毕业设计，基于SpringBoot+Vue+MySQL开发的公寓报修管理系统，源码+数据库+毕业论文+视频演示 现代经济快节奏发展以及不断完善升级的信息化技术，让传统数据信息的管理升级为软件存储，归纳，集中处理数据信息的管理方式。本公寓报修管理系统就是在这样的大环境下诞生，其可以帮助管理者在短时间内处理完毕庞大的数据信息，使用这种软件工具可以帮助管理人员提高事务处理效率，达到事半功倍的效果。此公寓报修管理系统利用当下成熟完善的Spring Boot框架，使用跨平台的可开发大型商业网站的Java语言，以及最受欢迎的RDBMS应用软件之一的MySQL数据库进行程序开发。公寓报修管理系统有管理员，住户，维修人员。管理员可以管理住户信息和维修人员信息，可以审核维修人员的请假信息，住户可以申请维修，可以对维修结果评价，维修人员负责住户提交的维修信息，也可以请假。公寓报修管理系统的开发根据操作人员需要设计的界面简洁美观，在功能模块布局上跟同类型网站保持一致，程序在实现基本要求功能时，也为数据信息面临的安全问题提供了一些实用的解决方案。可以说该程序在帮助管理者高效率地处理工作事务的同时，也实现了数据信息的整体化，规范化与自动化。 关键词：公寓报修管理系统；Spring Boot框架；MySQL；自动化；VUE
批量flac转mp3脚本
最新发布
08-21
可以批量将.flac音频文件转换成mp3格式，高效快捷 1、将下载的flac文件放到flac目录下 2、双击flac2mp3.bat 3、等转码完成，到mp3目录下查看即可
【浏览器插件】Ctool程序开发常用工具.zip
08-21
【浏览器插件-Ctool：程序开发常用工具】 ### 功能概览 以下是Ctool插件提供的功能列表，每个功能都支持离线使用，以满足开发者在不同环境下的需求。 | 功能分类 | 支持功能 | 离线使用 | |-----------|-----------|-----------| | **哈希** | `md5`, `sha1`, `sha256`, `sha512`, `sm3`, 支持批量处理及文件哈希计算 | √ | | **加密/解密** | `AES`, `DES`, `RC4`, `Rabbit`, `TripleDes`, `sm2`, `sm4` | √ | | **BASE64编码** | 加密、解密，支持文件操作 | √ | | **URL编码** | 编码、解码 | √ | | **时间** | 时间戳转换、毫秒处理、时区转换、时间计算器 | √ | | **二维码** | 生成、解析 | √ | | **条形码** | 生成 | √ | | **汉字转拼音** | 支持声调、首字母、分隔符 | √ | | **IP地址查询** | 运营商、城市信息查询（不支
java资源数字图书制作工具EpubCheck
08-21
java资源数字图书制作工具 EpubCheck提取方式是百度网盘分享地址
html5新增的input类型有
05-19
HTML5新增了多种input类型，包括： 1. color：用于选择颜色的输入框 2. date：用于选择日期的输入框 3. datetime-local：用于选择日期和时间的输入框 4. email：用于输入电子邮件地址的输入框 5. month：用于选择...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值