<html>

<head>
<title>新型input类型及表单新元素</title>
<meta charset="utf-8">
</head>

<body>
<!-- input新类型 列出一部分-->

<form action="">
选择你喜欢的颜色: <input type="color" name="favcolor">
生日: <input type="date" name="bday">
生日 (日期和时间): <input type="datetime" name="bdaytime">
生日 (日期和时间): <input type="datetime-local" name="bdaytime">
E-mail: <input type="email" name="email">
生日 (月和年): <input type="month" name="bdaymonth">
数量 ( 1 到 5 之间 ): <input type="number" name="quantity" min="1" max="5">
电话号码: <input type="tel" name="usrtel">
添加您的主页: <input type="url" name="homepage">
</form>

<!-- 表单新元素 不是所有的浏览器都支持HTML5
新的表单元素，但是你可以在使用它们
，即使浏览器不支持表单属性，仍然可以显示
为常规的表单元素。-->

<!-- datalist
与select区别
1.能模糊搜索
2.可由用户输入
-->
<input list="browser" name="browser">
<datalist id="browser">
<option value="ie"></option>
<option value="safari"></option>
<option value="opera"></option>
<option value="firefox"></option>
</datalist>

<!-- keygen
提供一种验证用户的可靠方法
当提交表单时，会生成两个键，一个是私钥，一个公钥。
-->
<form action="" method="get">
用户名: <input type="text" name="usr_name">
加密: <keygen name="security">
<input type="submit">
</form>

<!-- output
用于不同类型的输出
-->
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100 +
<input type="number" id="b" value="50">=
<output name="x" for="a b"></output>
</form>
</body>

</html>

h5学习之表单的更多相关文章

  1. bootstrap基础学习【表单含按钮】（二）

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. [jQuery学习系列五 ]5-Jquery学习五-表单验证

    前言最近总是有一个感觉,虽然这些东西都自己学习并一个案例一个案例的去验证过了.但是总觉得不写成博客记录下来这些都不是自己的东西(心理作用,哈哈).所以每当学习或者复习相关的知识我都喜欢记录下来,下面开 ...

  3. 学习W3SCHOOL 表单验证

    //表单学习笔记 //建立一张表单的验证 <!DOCTYPE html> <html> <head> <meta http-equiv="Conte ...

  4. SpringMVC学习系列- 表单验证

    本篇我们来学习Spring MVC表单标签的使用,借助于Spring MVC提供的表单标签可以让我们在视图上展示WebModel中的数据更加轻松. 一.首先我们先做一个简单了例子来对Spring MV ...

  5. H5自带表单验证

    HTML5自带的表单验证 转载:https://www.web-tinker.com/article/20781.html HTML5对表单元素提供了patern属性,它接受一个正则表达式.表单提交时 ...

  6. php学习笔记——表单

    13.表单 1)GET vs. POST GET 和 POST 都创建数组(例如,array( key => value, key2 => value2, key3 => value ...

  7. [html5] 学习笔记-表单新增的元素与属性（续）

    本节主要讲解表单新增元素的controls属性.placeholder属性.List属性.Autocomplete属性.Pattern属性.SelectionDirection属性.Indetermi ...

  8. JavaWeb学习日记----表单提交方式

    1.表单提交方式 (1) 使用input控件中的submit提交 代码如下: <!DOCTYPE html> <html lang="en"> <he ...

  9. 9. Javascript学习笔记——表单处理

    9. 表单处理 9.1 表单的基础知识 ///表单用 <form> 元素表示,对应的是 HTMLFormElement 类型,继承自 HTMLElement. //属性:action.me ...

随机推荐

  1. Flask 静态文件缓存问题

    大家好,今天才发现很多学习Flask的小伙伴都有这么一个问题,清理缓存好麻烦啊,今天就教大家怎么解决. 大家在使用Flask静态文件的时候,每次更新,发现CSS或是Js或者其他的文件不会更新. 这是因 ...

  2. 自定义Camera的setPictureSize拍照完毕出现花屏怎么解决

    Camera.Parameters parameters = mCamera.getParameters();// 获得相机参数 List<Camera.Size> sizes = par ...

  3. [maven][转]pom配置之：snapshot快照库和release发布库

    在使用maven过程中,我们在开发阶段经常性的会有很多公共库处于不稳定状态,随时需要修改并发布,可能一天就要发布一次,遇到bug时,甚至一天要发布N次.我们知道,maven的依赖管理是基于版本管理的, ...

  4. JAVA 基础编程练习题22 【程序 22 递归求阶乘】

    22 [程序 22 递归求阶乘] 题目:利用递归方法求 5!. 程序分析:递归公式:fn=fn_1*4! package cskaoyan; public class cskaoyan22 { @or ...

  5. JavaScript 异步和单线程

    JavaScript语言本身是单线程的,所以它自身不可能是异步.所谓单线程,就必然意味着:所有任务需要排队,前一个任务结束,才会执行后一个任务. 但js的宿主环境(比如浏览器,Node)是多线程的.宿 ...

  6. [!] The version of CocoaPods used to generate the lockfile (1.4.0.beta.1) is higher than the version of the current executable (1.3.0.beta.1). Incompatibility issues may arise.

    今天在看一个开源Demo代码的时候,需要执行pod install命令,直接报错如下: 解决方法: 执行:pod update 命令更新资源库即可.

  7. Python操作qml对象

    1. 如何在python里获得qml里的对象? 1.1 获取根对象 QML: import QtQuick 2.12 import QtQuick.Controls 2.12 ApplicationW ...

  8. Flutter 的url_launcher简介

    url_launcher是用于在移动平台中启动URL的Flutter插件,适用于IOS和Android平台.他可以打开网页,发送邮件,还可以拨打电话. github地址:https://github. ...

  9. Python绘制可爱的卡通人物 | 【turtle使用】

    Turtle库 简介 什么是Turtle 首先,turtle库是一个点线面的简单图像库,能够完成一些比较简单的几何图像可视化.它就像一个小乌龟,在一个横轴为x.纵轴为y的坐标系原点,(0,0)位置开始 ...

  10. VMware Windows Server 2008 R2 X64 虚拟机安装教程

    首先进入VMware Workstation中,点击创建新的虚拟机 然后按如下步骤操作 然后进去选择拷贝的Windows 2008的映像文件 下面这个网址里面提供了各种映像文件的下载http://is ...