<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. post请求导出Excel表格

    axios.interceptors.response.use((response) =>{ if(response.config && response.config.resp ...

  2. Mybatis 事物回滚最简单的操作方式

    简单例子 //假设这是一个service类的片段 try{ //出现异常 } catch (Exception e) { e.printStackTrace(); //设置手动回滚 Transacti ...

  3. python3 枚举enum定义和使用

    两种方式定义枚举类: 1.直接使用Enum列出多个枚举值来创建枚举类. 2.通过集成Enum基类派生枚举类. 程序示范: 1.直接使用Enum列出多个枚举值来创建枚举类. from enum impo ...

  4. JAVA 基础编程练习题47 【程序 47 打印星号】

    47 [程序 47 打印星号] 题目:读取 7 个数(1—50)的整数值,每读取一个值,程序打印出该值个数的*. package cskaoyan; public class cskaoyan47 { ...

  5. IIS中应用Application Request Route 配置负载均衡

    转自:https://blog.csdn.net/wucong60/article/details/84930234 简介ApplicationRequest Route(后面简称为ARR)是一个寄宿 ...

  6. Nginx sticky模块实现session粘滞

    一:下载,解压nginx sticky模块. 1 2 3 # cd /usr/local/src # wget http://nginx-sticky-module.googlecode.com/fi ...

  7. linux中环境变量设置

    Linux下环境变量设置的三种方法: 如想将一个路径加入到$PATH中,可以像下面这样做: 只对当前的shell 起作用的环境变量 1.控制台中设置,不赞成这种方式,因为他只对当前的shell 起作用 ...

  8. JS实现对数组进行自定义排序

    /** * 数组排序 * @param source 待排序数组 * @param orders 排序字段数组 * @param type 升序-asc 倒序-desc * 调用:var res =  ...

  9. tomcat8.5.37设置虚拟目录

    之前做的solr和tomcat是放在tomcat的webapps下 solr7.2.1+tomcat8.5.37+jdk8安装配置 现在就是放在其他,通过tomcat的server.xml配置虚拟目录 ...

  10. redis数据库安装

        一. 简单介绍: REmote DIctionary Server(Redis) 是一个由Salvatore Sanfilippo写的key-value存储系统. Redis是一个开源的使用A ...