<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. R-CNN/Fast R-CNN/Faster R-CNN

    一.R-CNN 横空出世R-CNN(Region CNN,区域卷积神经网络)可以说是利用深度学习进行目标检测的开山之作,作者Ross Girshick多次在PASCAL VOC的目标检测竞赛中折桂,2 ...

  2. Servlet的运行原理

  3. 安装mysql数据库及问题解决方法

    1.mysql官网下载安装包,官网地址:www.mysql.com [root@seiang software]# ll total 580020 -rw-r--r--. 1 root root 59 ...

  4. java调用js脚本

    有些情况下,需要java去调用js,groovy等脚本语言,传入参数获取脚本运行的结果. js脚本例子: function add(a,b){ return a + b + number; } jav ...

  5. sklearn常见分类器(二分类模板)

    # -*- coding: utf-8 -*- import pandas as pd import matplotlib matplotlib.rcParams['font.sans-serif'] ...

  6. 【leetcode_easy】551. Student Attendance Record I

    problem 551. Student Attendance Record I 题意: solution: class Solution { public: bool checkRecord(str ...

  7. windows10环境下pip安装Scrapy报错

    问题描述 当前环境win10,python_3.6.1,64位. 在windows下,在dos中运行pip install Scrapy报错: building 'twisted.test.raise ...

  8. Tracking of Features and Edges

    目录 Joint Tracking of Features and Edges Joint Tracking of Features and Edges 1. LK光流 基本LK光流运动假设: \[ ...

  9. flask数据库连接池DBUtils

    数据库连接池 为啥要使用数据库连接池 频繁的连接和断开数据库,消耗大,效率低 DBUtils可以创建多个线程连接数据库,且一直保持连接,不会断开 执行数据库操作时,由数据池分配线程,当数据池空时,可选 ...

  10. 重置mysql数据库root密码

    一. 在已知MYSQL数据库的ROOT用户密码的情况下,修改密码的方法:1,shell环境下:]#mysqladmin –u root –p password “新密码” 回车后要求输入旧密码2,my ...