HTML5form表单的相关知识总结

首先在介绍HTML5form表单的新增内容之前，我总结了一下HTML的form表单的内容。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>HTML表单标签</title>

</head>

<body>

<input type="text"><!--输入文本，字符，数字一切东西-->

<input type="password"><!--输入密码会以掩码的形式显示出来-->

<input type="radio"><!--单选框-->

<input type="checkbox"><!--复选框-->

<input type="submit"><!--提交按钮-->

<input type="reset"><!--重置按钮-->

<input type="image"><!--可以改变按钮颜色的提交按钮-->

<input type="hidden"><!--定义隐藏的输入字段-->

<input type="file"><!--浏览按钮，用于上传文件-->

<input type="button"><!--按钮-->

<select name="" id=""><!--下拉列表-->

    <option value=""></option>

    <option value=""></option>

    <option value=""></option>

</select>

</body>

</html>

接下来总结HTML5的form表单内容，我分为新增的form元素，新增的form属性，新增的input类型，新增的input属性四个部分。

　　1.新增的form元素

　　　　1)datalist元素

　　　　　　datalist与option联合使用，datalist元素通常通过list属性与一个input相关联，达到的效果就是我们既可以手动输出，也可以选择下拉列表中的选项。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>datalist的使用</title>

</head>

<body>

<form action="#" method="get">

    请输入网址：<input type="text" list="url_data">

    <datalist id="url_data">

        <option label="百度" value="http://www.baidu.com"></option>

        <option label="腾讯" value="http://www.qq.com"></option>

        <option label="搜狐" value="http://www.sohu.com"></option>

        <input type="submit">

    </datalist>

</form>

</body>

</html>

　　　　2)keygen元素

　　　　　　keygen元素是秘钥对生成器，能够使用户验证更为可靠。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>keygen元素的使用</title>

</head>

<body>

<form action="#" method="get">

    请输入用户名：<input type="text"><br>

    请选择加密强度：<keygen/><br>

    <input type="submit">

</form>

</body>

</html>

　　　　3)output元素

　　　　　　output元素用于在浏览器中显示计算结果或脚本输出。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>output的使用</title>

</head>

<body>

    <form action="#" method="get" name="form">

        <output name="output"></output>

    </form>

    <script>

        var a=parseInt(prompt("请输入第一个数：",0));

        var b=parseInt(prompt("请输入第二个数：",0));

        document.forms["form"]["output"].value=a*b;

    </script>

</body>

</html>

　　2.新增的form属性

　　　　1)autocomplete属性

　　　　　　新增的autocomplete属性可以帮组用户在form表单中的元素中实现自动完成内容输入，不过在使用这项功能之前需要先启用浏览器本身的自动完成功能，才能使用autocomplete属性。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>autocomplete属性的使用</title>

</head>

<body>

    <form action="#" method="get" autocomplete="on"><!--当浏览器开启自动补充功能时，autocomplete不写也自动补充，但是如果将autocomplete设置成为off，那么就算浏览器开启自动补充功能，也没有补充效果。-->

        姓名：<input type="text" name="name"><br><!--注意name属性不能省去，否则form表单的autocomplete属性不起作用。-->

        密码：<input type="password" name="pass"><br>

        电子邮箱：<input type="email" name="email"><br>

        <input type="submit">

    </form>

</body>

</html>

　　　　2)novalidate属性

　　　　　　form元素的novalidate属性用于在提交表单时取消整个表单的验证，即关闭对表单内所有元素的有效性检查。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>novalidate的使用</title>

</head>

<body>

<form action="" method="get" novalidate="true">

    请输入正确的电子邮箱：<input type="email"  name="user_email" >

    <input type="submit" value="提交"><!--点击提交没有浏览器自带的邮箱验证提示了-->

</form>

</body>

</html>

　　　　3)formaction属性

　　　　　　等于action。

　　　　4)formenctype属性

　　　　　　等于enctype。

　　　　5)formmethod属性

　　　　　　等于method。

　　　　6)formnovalidate属性

　　　　　　等于novalidate。

　　　　7)formtarget属性

　　　　　　等于target。

　　3.新增的input类型

　　　　1)email类型

　　　　　　再提交表单的时候浏览器会自动验证填写的邮箱是否正确。

　　　　2)url类型

　　　　　　提交表单的时候，输入的内容时url地址格式的内容，则将数据提交到服务器，如果不是就不允许提交,url地址格式例子：http://www.baidu.com。

　　　　3)number类型

　　　　　　这是一个只能输入数值的输入框，其中的属性可以有min，max，step。

　　　　4)range类型

　　　　　　输出一定范围内数字值的文本框

　　　　5)date类型

　　　　　　输出年，月，日，如2017年6月6日会以2017-06-06显示。

　　　　6)month类型

　　　　　　输出月，年

　　　　7)week类型

　　　　　　输出周，年

　　　　8)time类型

　　　　　　输出小时，分钟

　　　　9)datetime类型

　　　　　　输出选取的时间，日，月，年，其中时间为UTC时间。

　　　　10)datetime-local类型

　　　　　　同datetime，但是其中时间为本地时间。

　　　　11)search类型

　　　　　　用于输入搜索关键词的文本框。

　　　　12)tel类型

　　　　　　用于输入电话号码的文本框，但他不限定制输入数字，也包括+，-，（，）等等。

　　　　13)color类型

　　　　　　用于设置颜色的文本框.

　　4.新增的input属性

　　　　1)autocomplete属性

　　　　　　在上面的form元素上的autocomplete属性是全局的，我们也可以在一个input元素上单独使用让这个元素自动补充或是不补充。

　　　　2)autofocus属性

　　　　　　用于自动获取光标焦点.一般在搜索页面中的搜索文本框，或者一个同意某许可协议的同意按钮。

　　　　3)width和height属性

　　　　　　仅用于image类型的高度和宽度的设置。单位是像素。

　　　　4)list属性

　　　　　　和datalist搭配使用，在datalist有详细介绍。

　　　　5)min,max,step属性

　　　　　　适用于date，picker，number，range属性的input标签。

　　　　6)multiple属性

　　　　　　input中file只支持单个文件的上传，multiple属性支持一次性选择多个文件。

　　　　7)pattern属性

　　　　　　用于验证input类型输入狂汇总用户输入的内容是否于自定义的正则表达式相匹配，适用于text，url，tel，email，password。

　　　　8)placeholder属性

　　　　　　用于为input类型的输入框提供一个提示，这些提示可以给用户一些提示性语言。

　　　　9)required属性

　　　　　　告诉用户这个输入框的内容不能为空。

HTML5form表单的相关知识总结的更多相关文章

HTML5-form表单
什么是表单? 01.获取用户的输入 ==>收集数据 02.将用户的输入发送到服务器 ==>与服务器进行交互相关属性: action:我们收集完用户的信息之后,需要提交的服务器地址 ...
html5图片异步上传/ 表单提交相关
1 form 表单 get/post提交时候. action地址(或者啥ajax的url地址) 会涉及到跨域问题常见跨域问题http://www.cnblogs.com/rainman/archiv ...
Angular4笔记——表单状态相关的属性
表单状态字段(FromControl)touched和untouched用来判断用户是否访问过一个字段(也就是这个字段是否获取过焦点,如果获取过焦点,touched是true,untouched是fa ...
Angular2 表单验证相关
angular4响应式表单与校验http://blog.csdn.net/xiagh/article/details/78360845?locationNum=10&fps=1 How to ...
JavaScript/Jquery：Validform 验证表单的相关属性解释
当我们写提交表单的时候往往需要验证表单是否填写了内容,是否正确,这个插件可以很方便的完成我们需要的验证! 使用方法: 1.先引用js <script type="text/javasc ...
iview中Modal弹窗做form表单验证相关问题
在modal中初始化状态,点击确定弹窗消失. 有的时候表单验证就不希望立刻消失在iview官网中有自定义页头页脚可以直接自定义使用另一种验证写法 serform: { ctCatelogue: ...
HTML - 表单标签相关
<html> <head></head> <body> <!-- 表单标签 : 收集其标签内部的数据, 提交给指定的服务器 action : 数据 ...
表单select相关
selectedIndex 属性可设置或返回下拉列表中被选选项的索引号. options[] 返回包含下拉列表中的所有选项的一个数组. add()向下拉列表添加一个选项. blur()从下拉列表移开焦 ...
AngularJS表单验证实现方法详解
本文主要是通过源码实例和大家分享AngularJS中的表单验证相关知识,希望通过本文的分享,对大家学习AngularJS有所帮助. 1.常规表单验证: 2.AngularJs中提供的表单验证实例. 实 ...

随机推荐

外键参数 onupdate,ondelete等（cascade,no adcion,set null,restrict）
MySQL外键约束On Delete.On Update各取值的含义先看On Delete属性,可能取值如上图为:No Action, Cascade,Set Null, Restrict属性. 当 ...
Redis的数据类型以及各类型的操作
讲完安装和配置,接下来就是所有数据库的重头戏,数据结构和常用操作的增删改查了 redis是key-value的数据结构,每条数据都是⼀个键值对键的类型是字符串注意:键不能重复值的类型分为五种: ...
vue 引入 mint-ui 简单使用
一 npm 方式 1,安装依赖 (已有项目) 如果想简单体验:基于vue-cli /* npm install vue -g npm install vue-cli -g // -g 是否全局 ...
vue 新属性学习
1, $listeners 父级元素 <base-input v-on:focus.native="onFocus"></base-input> 子级元素 ...
hive 入门
hive-site.xml 配置 <configuration> <property> <name>javax.jdo.option.ConnectionURL&l ...
安装使用supervisor来启动服务
supervisor 使用方法 supervisor(官网)是一个unix的系统进程管理软件,可以用它来管理apache.nginx等服务, 若服务挂了可以让它们自动重启.当然也可以用来实现golan ...
常用的go语言IDE对比
Go语言目前已经在开发者中越发的流行,自然很多人都在寻找合适的IDE来实现代码语法高亮.自动补全以及其他编辑特性. 下面就几种常用的IDE进行对比介绍: 1. Sublime text 这个文本编辑器 ...
HashMap底层实现原理及扩容机制
HashMap的数据结构:数组+链表+红黑树:Java7中的HashMap只由数组+链表构成:Java8引入了红黑树,提高了HashMap的性能:借鉴一张图来说明,原文:https://www.jia ...
优龙FS2410开发板学习过程遇到问题总结
以下的问题及其解决办法是基于优龙FS2410开发板,不定期更新 ============================================================= 开发学习环境 ...
【EXCEL】XMLファイルを開く方法（XML文件打开方法）
前言 XMLとは:Extensible Markup Language(エクステンシブルマークアップランゲージ)は.基本的な構文規則を共通とすることで.任意の用途向けの言語に拡張することを容易とし ...

HTML5form表单的相关知识总结

HTML5form表单的相关知识总结的更多相关文章

随机推荐

热门专题