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类型

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

      <input type="email" name="email" />

    2)url类型

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

      <input type="url" name="url"/>

    3)number类型

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

      <input type="number" name="number" min="1" max="20" step="4"/>

    4)range类型

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

      <input type="range" name="range" min="1" max="20" step="4"/>

    5)date类型

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

      <input type="date" name="date"/>

    6)month类型

      输出月,年

      <input type="month" name="month"/>

    7)week类型

      输出周,年

      <input type="week" name="week"/>

    8)time类型

      输出小时,分钟

      <input type="time" name="time" max="" min="" step="" value=""/>

    9)datetime类型

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

      <input type="datetime" name="datetime"/>

    10)datetime-local类型

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

    11)search类型

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

      <input type="search" name="search"/>

    12)tel类型

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

      <input type="tel" name="tel"/> 

    13)color类型

      用于设置颜色的文本框.

      <input type="color" name="color"/>

  4.新增的input属性

    1)autocomplete属性

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

      <input type="text" autocomplete="off/on"/>

    2)autofocus属性

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

      <input type="text" autofocus="true"/> 

    3)width和height属性

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

      <input type="image" src="img/haha.png" width="50" height="50"/>

    4)list属性

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

    5)min,max,step属性

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

    6)multiple属性

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

      <input type="file" multiple="multiple"/>

    7)pattern属性

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

      <input type="text" pattern="[0-9]{6}"/>

    8)placeholder属性

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

      <input type="tel" placeholder="请输入电话号码"/>

    9)required属性

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

      <input type="text" required/>  

时间: 2024-10-10 15:57:36

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

javascript表单处理相关的知识总结(一)

在HTML中,表单是由元素来表示的,而在JavaScript中,表单对应的则是HTMLFormElement类型.HTMLFormElement继承了HTMLElement,它拥有HTML元素具有的默认属性,还有自己的属性和方法 acceptCharset 服务器能够处理的字符集 action 接受请求的URL elements 表单中所有控件的集合 enctype 请求的编码类型 length 表单中控件的数量 name 表单的名称 target 用于发送请求和接受响应的窗口名称 reset(

表格和表单的学习知识

刚开始接触java 学习基础知识表格和表单的做法,下面写今天所学知识 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>&l

asp.net 表单提交安全知识

1.防止跨站点提交 传统mvc中,ValidateAntiForgeryToken特性用于防止跨站点数据提交,但是使用时必须配合前台view页面的Html.AntiForgeryToken()代码一起使用. 而在asp.net core中,taghelper表单特性已经将该特性包含在view中服务器特性代码asp-action 或者asp-route中了,详见TagHelper参考我的另一个博文http://www.cnblogs.com/xiatianoo/p/6323245.html 2.防

表单及相关的标签

表单是一个很常用的标签,在如今个个网站都采用游客使用和注册客户使用的情况下,注册登录表单是网页中十分常见的一部分了. 表单标签: <form></form> 常用属性:  action 属性值是表单提交数据的去向. method 表单数据的提交方式,通常有get和post两种,前者有限制性且显示在url中不安全,后者则不存在这亮点问题. enctype 当表单中有文件域是必须有此标签,属性值可填multipart. 表单控件标签:<input></input>

php表单验证入门知识

当处理 HTML 表单时,PHP 能把来自 HTML 页面中的表单元素自动变成可供 PHP 脚本使用. <form action="from.php" method="post"> 名字: <input type="text" name="fname"> 年龄: <input type="text" name="age"> <input type

html5图片异步上传/ 表单提交相关

1 form 表单 get/post提交时候. action地址(或者啥ajax的url地址) 会涉及到跨域问题 常见跨域问题http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html 举例: 第一种写法 相对路径 $.get('localhost:8080/test_upload/aservlet', { }, function (data) { }); test_upload 为项目名 这里写的为相对路径,不会出现问题 第二种

反馈表单(留言)相关

1.反馈表单的提交后跳转页: 在表单中加入: <input name="bid" type="hidden" value="2"> //这个是你反馈信息的分类ID(没有的话在FF等非IE浏览器不能提交) <input name="ecmsfrom" type="hidden" value="跳转地址">//这个是需要提交后跳转的地址 2.修改“反馈”.“留言”这些

Angular2 表单验证相关

angular4响应式表单与校验http://blog.csdn.net/xiagh/article/details/78360845?locationNum=10&fps=1 How to implement Custom Async Validator in Angular4https://stackoverflow.com/questions/43366514/how-to-implement-custom-async-validator-in-angular4 How to add de

iview中Modal弹窗做form表单验证相关问题

在modal中初始化状态,点击确定弹窗消失. 有的时候表单验证就不希望立刻消失 在iview官网中有自定义页头页脚 可以直接自定义使用 如果报错 validate 未定义的话,需要看一下点击事件内容引号是否正确 原文地址:https://www.cnblogs.com/xu-nian-qin/p/10824736.html