FORM
一 .新增的input输入属性
1.email类型
在表单提交E-mail地址时，无效的输入会生成很多无效数据，对后期的数据检索造成一定的影响。所以在表单提交之前，需要对输入的E-mail地址进行有效性进行验证。早期的实现方式都是通过正则表达式和JavaScript进行验证，HTML5中，使用email类型的input输入就可以实现对E-mail地址的基本验证功能
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="#" method="get">
E-mail:<input type="email" name="myEmail" id=“”/><br/>
<input type="submit"/>
</form> </body>
</html>
表单action属性设置“#”，表示提交到当前页面，method属性设置提交方式为get，即在URL地址栏中显示提交的数据。第一个input标签的type类型设置为email，表示该输入框用于输入E-mail地址，并为其设置name属性
2.URL类型
URL描述了互联网上的每一个文件地址，url类型的输入框则是用来验证用户输入的内容是否符合url规则的控件。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="#" method="post">
URL:<input type="url" name="myurl"/><br/>
<input type="submit"/>
</form>
</body>
</html>
3.number类型
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>6.1.3</title>
</head>
<body>
<form action="#" method="get">
Number:<input type="number" name="myNumber"/><br />
<input type="submit" />
</form>
</body>
</html>
4.range类型
range类型是一种区域范围文本，通常称之为滑块，常见的案例有调节声音、调节RGB颜色等等
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>6.1.4</title>
</head>
<body>
<form action="#" method="get">
<input type="range" min="0" max="100" step="1" value="" name="myRange"/><br />
<input type="submit" />
</form>
</body>
</html>
设置input元素的type属性为range，最小值0，最大值为100，步长1，
5.date pickers类型
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>6.1.5</title>
</head>
<body>
<form action="#" method="get"><br />
Date:<input type="date" name="myDate"/><br />
month : <input type="month" name="myMonth"/><br />
week: <input type="week" name="myWeek"/><br />
time: <input type="time" name="myTime"/><br />
datetime: <input type="datetime" name="myDatetime"/><br />
datetime-local : <input type="datetime-local" name="myDatatimeLocal"/><br />
<input type="submit" />
</form>
</body>
</html>
6.search类型：用于页面的搜索功能，可以是站内搜索
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>6.1.6</title>
</head>
<body>
<form action="#" method="get"><br />
Search:<input type="search" name="mySearch"/><br />
<input type="submit" />
</form>
</body>
</html>
7.color类型
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>6.1.7</title>
</head>
<body>
<form action="#" method="get"><br />
Color:<input type="color" name="myColor" /><br />
<input type="submit" />
</form>
</body>
</html>
二.新增的表单元素
1.datalist元素
datalist元素用于将一组值设置到输入控件上，当输入控件获得焦点时，控件会以列表的形式显示这组数据。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>6.2.1</title>
</head>
<body>
<input type="url" list="url_list" name="myUrl" />
<datalist id="url_list">
<option label="Microsoft" value="http://www.microsoft.com" />
<option label="Google" value="http://www.google.com" />
<option label="百度" value="http://www.baidu.com" />
</datalist>
</body>
</html>
url类型的input控件设置了一个list属性值，并将该值赋予datalist元素的id属性，这样就将datalist与input元素关联在一起了。在datalist元素中，使用多个option元素显示数据，每个option元素都有一个label属性和value属性，label属性用于设置每个数据要显示的名称，而value属性则要设置每个数据的值。当input控件获得焦点时，以列表的形式显示这些数据
2.keygen元素
使用keygen元素可以生产一个公钥和私钥，私钥会存放在用户本地，而公钥则会发送到服务器，服务器感根据公钥生产一个客户端证书，然后返回到浏览器让用户去下载并保存到本地
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>6.2.2</title>
</head>
<body>
<form action="a.asp" method="get">
请输入: <input type="text" name="usr_name" />
加密: <keygen name="security" />
<input type="submit" />
</form>
</body>
</html>
3.output元素
output元素用于输出内容，输出的内容通过其他元素的触发而来的。当真正的输入控件获得输入内容后，可以对这些内容进行加工处理，然后再有output元素输出显示
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>6.2.3</title>
</head>
<body>
<form oninput="myOutput.value+=txt.value.length%4">
<input type="text" id="txt" >
<br />
<output name="myOutput" for="txt"></output>
</form>
</body>
</html>
FORM的更多相关文章
- form表单验证-Javascript
Form表单验证: js基础考试内容,form表单验证,正则表达式,blur事件,自动获取数组,以及css布局样式,动态清除等.完整代码如下: <!DOCTYPE html PUBLIC &qu ...
- Form 表单提交参数
今天因为要额外提交参数数组性的参数给form传到后台而苦恼了半天,结果发现,只需要在form表单对应的字段html空间中定义name = 后台参数名 的属性就ok了. 后台本来是只有模型参数的,但是后 ...
- s:form标签
2017-01-07 17:43:18 基本的用法 <!-- Action类必须有一个无参的构造器,因为在执行action方法之前,拦截器已经创建了一个"空"的Action对 ...
- ASP.NET Aries JSAPI 文档说明：AR.Form、AR.Combobox
AR.Form 文档 1:对象或属性: 名称 类型 说明 data 属性 编辑页根据主键请求回来的数据 method 属性 用于获取数据的函数指向,默认值Get objName 属性 用于拦截form ...
- form表单 ----在路上（15）
form 表单就是将用户的信息提交到服务器,服务器会将信息存储活着根据信息查询数据进行增删改查,再将其返回给用户. 基本格式: <form action="" method ...
- 了解HTML表单之form元素
前面的话 表单是网页与用户的交互工具,由一个<form>元素作为容器构成,封装其他任何数量的表单控件,还有其他任何<body>元素里可用的标签 表单能够包含<input& ...
- form表单的字符串进行utf-8编码
<form>表单有assept-charset属性.该属性规定字符的编码方式,默认是"unknown",与文档的字符集相同. 该属性除了Internet explore ...
- js Form.elements[i]的使用实例
function pdf(){ //一个html里面可能存在多个form,所以document.form[0]指的是第一个form,document.form[1]返回就是第二个form,如果没 ...
- PHP跨域form提交
因为安全性因素,直接跨域访问是不被允许的. 1.PHP CURL方式 function curlPost($url,$params) { $postData = ''; foreach($params ...
- C#模拟HTTP Form请求上传文件
using System; using System.Collections.Generic; using System.Text; using System.Net; using System.IO ...
随机推荐
- （五）什么是RDD-Java&Python版Spark
什么是RDD 视频教程: 1.优酷 2.YouTube RDD是个抽象类,全称为Resilient Distributed Datasets,是一个容错的.并行的数据结构,可以让用户显式地将数据存储到 ...
- 将Centos的yum源更换为国内的阿里云源
阿里云是最近新出的一个镜像源.得益于阿里云的高速发展,这么大的需求,肯定会推出自己的镜像源.阿里云Linux安装镜像源地址:http://mirrors.aliyun.com/ CentOS系统更换软 ...
- java基础学习02（简单的java程序）
简单的java程序 一.完成的目标 1. 理解java程序的基本组成 2. 如何对程序代码进行注释 3. java标识符的命名规则 4. 了解java中的关键字 5. 使用java定义变量或声明变量 ...
- 编程语言吉祥物之Duke
在看到这个可爱的小家伙前,我一直以为那个咖啡杯子是Java的吉祥物.直到拿到<Java性能优化权威指南>这本书,才知道有这个小东西Duke.这位可爱的Duke是由Joe Palrang在1 ...
- WWW读取安卓外部音乐文件
需求分析 使用Everyplay(2121-1540版本)录屏,在升级SDK之后,遇到个问题,调用安卓原生的mediaplay进行播放音乐,在录屏时无法录制到声音,所以想到的解决办法是在Unity中播 ...
- Everything(文件搜索神器)
前言 Everything官网: http://www.voidtools.com/ 软件版本: V1.3.4.686 (x64) 操作系统: windows 7/10 搜索FTP(内网)资源 比如内 ...
- ESLint规则配置说明
"no-alert": 0,//禁止使用alert confirm prompt "no-array-constructor": 2,//禁止使用数组构造器 & ...
- js禁止页面刷新禁止用F5键刷新,禁止右键
<script language="javascript"> //禁止用F5键 function document.onkeydown() { if ...
- 完整部署CentOS7.2+OpenStack+kvm 云平台环境（3）--为虚拟机指定固定ip
之前在测试环境(centos7.2)上部署了openstack云平台(完整部署CentOS7.2+OpenStack+kvm 云平台环境(1)--基础环境搭建),openstack在neutron组网 ...
- java sound初探
网上关于java sound的正规资源讲解的非常好,本文不再给出示例,主要提供一些好的资源,并说说我的一些理解,用于形成对java sound的整体认识. 一.几个词汇 TTS:text-to-spe ...