<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. express利用nodemailer发送邮件（163邮箱）

    Nodemailer 是一个简单易用的Node.js邮件发送组件 首先安装这个组件 npm install nodemailer --save 安装之后,可以在某个get请求下,发送邮件,具体路由代码 ...

  2. 【思考】为什么说Bagging减少variance，Boosting减少bias？（转载）

    具体讨论可见于此知乎问题,有很多种理解方向,甚至这一个命题可能本来就不成立!

  3. MySQL中tinytext、text、mediumtext和longtext等各个类型详解

    转: MySQL中tinytext.text.mediumtext和longtext等各个类型详解 2018年06月13日 08:55:24 youcijibi 阅读数 26900更多 个人分类: 每 ...

  4. Oracle11g安装与卸载教程

    1.1,前言: 电脑太卡,鄙人穷屌丝啊,没钱买新电脑,想想周六日还要耍游戏就给电脑重做了个系统,糟糕的是电脑上的各种环境,工具都需要重新装一边,包括oracle数据库- -,依稀记得昨天装了一上午的数 ...

  5. c++拷贝文件-传统处理异常(学习)

    #include <iostream>#include <stdio.h> using namespace std; int my_copy(const char* src_f ...

  6. Java csv

    CsvWriter csvWriter = new CsvWriter("data2019052803.csv", ',', Charset.forName("UTF-8 ...

  7. PAT 甲级 1014 Waiting in Line (30 分)（queue的使用，模拟题，有个大坑）

    1014 Waiting in Line (30 分)   Suppose a bank has N windows open for service. There is a yellow line ...

  8. BTE增强

    转自https://www.cnblogs.com/Garfield/p/5313962.html Enhancement(1)--BTEs 最近一个同事碰到一个FI的增强,要用BTEs实现,我也是第 ...

  9. 搭建IIS CA DC Exchange TMG SQL (CA DC篇)

    搭建IIS CA DC Exchange TMG SQL (CA DC篇)   步骤 1: 在“下一步(N) > (按下按钮)”(位于“添加角色向导”中)上用户左键单击   步骤 2: 在“Ac ...

  10. 【并行计算与CUDA开发】基于NVIDIA显卡的硬编解码的一点心得 （完结）

    原文:基于NVIDIA显卡的硬编解码的一点心得 (完结) 1.硬解码软编码方法:大体流程,先用ffmpeg来读取视频文件的包,接着开启两个线程,一个用于硬解码,一个用于软编码,然后将读取的包传给解码器 ...