<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. kotlin之MutableMap委托

    fun main(arg: Array<String>) { val map = mutableMapOf("name" to "tom", ) v ...

  2. python包中__init__.py文件的作用

    python包中__init__.py文件的作用 __init__.py文件最常用的作用是标识一个文件夹是一个 python包. __init__.py文件的另一个作用是定义模糊导入时要导入的内容. ...

  3. 【MYSQL】存储过程示例

    GROUPEMP_EXISTS: ), ), )) LANGUAGE SQL NOT DETERMINISTIC CONTAINS SQL SQL SECURITY DEFINER COMMENT ' ...

  4. mac下的夜神模拟器链接vscode

    1.找到夜神模拟器,点击右键,查看包内容,找到文件夹下面的macos在点击右键打开终端.输入: adb connect 127.0.0.1:62001 dart和flutter交流群:45289287 ...

  5. 请求路径@PathVariable注释中有点.英文句号的问题（忽略英文句号后面的后缀）

    前端页面请求地址 <video id=example-video width=960 height=540 class="video-js vjs-default-skin" ...

  6. HBase管理与监控——HMaster或HRegionServer自动停止挂掉

    问题描述 HBase在运行一段时间后,会出现以下2种情况: 1.HMaster节点自动挂掉: 通过jps命令,发现HMaster进程没了,只剩下HRegionServer,此时应用还能正常往HBase ...

  7. React Native npm第三方报错

    添加npm install第三方报错: 使用: yarn add 组件名称 注意: 这里不需要像npm的--save

  8. k8s install kubeadm网络原因访问不了谷哥and gpg: no valid OpenPGP data found. 解决办法

    gpg: no valid OpenPGP data found. 解决办法 待做.................................... 卡助在这curl -s https://pa ...

  9. 微信小程序 左右联动菜单

    根据左侧列表,联动跳右侧内容. 效果如图: wxml代码: <view class="page"> <!-- 左侧导航 --> <view class ...

  10. Visual Studio Code 调试 SpringBoot

    Build Anything with Spring Boot:Spring Boot is the starting point for building all Spring-based appl ...