H5表单input标签新增type

示例代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="">
    <!--email提供了默认的电子邮箱的完整验证:要求必须包含@符号,同时必须包含服务器名称,如果不能满足验证,则会阻止当前的数据提交-->
    邮箱:<input type="email"> <br>
    <!--tel它并不是来实现验证。它的本质目的是为了能够在移动端打开数字键盘。意味着数字键盘限制了用户只能输入数字。  如何查看效果:qq发送文件>>手机端使用qq来接收>>使用手机浏览器查看-->
    电话:<input type="tel"> <br>
    <!--验证只能输入合法的网址:必须包含http://-->
    网址:<input type="url"> <br>
    <!--number:只能输入数字(包含小数点),不能输入其它的字符
    max:最大值
    min:最小值
    value:默认值-->
    数量:<input type="number" value="60" max="100" min="0"> <br>
    <!--search:可以提供更人性化的输入体验-->
    请输入商品名称:<input type="search"> <br>
    <!--range:范围-->
    范围:<input type="range" max="100" min="0" value="50"> <br>
    颜色:<input type="color"> <br>
    <!--日期时间相关-->
    <!--time:时间:时分秒-->
    时间:<input type="time"> <br>
    <!--date:日期:年月日-->
    日期:<input type="date"> <br>
    <!--datetime:大多数浏览器不能支持datetime.用于屏幕阅读器-->
    日期时间:<input type="datetime"><br>
    <!--datetime-local:日期和时间-->
    日期时间:<input type="datetime-local"> <br>
    月份:<input type="month"> <br>
    星期:<input type="week">
    <!--提交-->
    <input type="submit">
</form>
</body>
</html>

补充:邮箱验证及其他验证,当input标签上有required属性时浏览器才会在表单提交前自动执行验证

原文地址:https://www.cnblogs.com/chuanzi/p/10807504.html

时间: 2024-10-10 23:50:24

H5表单input标签新增type的相关文章

前端1-----块级标签(独占一行),排版标签(样式排版),其他标签,form表单(input的多种类型)

前端1-----块级标签(独占一行),排版标签(样式排版),其他标签,form表单(input的多种类型) 一丶HTML块级标签 排版标签 p 标签: 段落标签,会自动在段落上下加上空白来分开 p标签是一个文本标签,本身是一个块级标签不能再嵌套块标签 div 标签: 没有样式的标签 ,最常用 列表 ???????1.无序列表 常用 ??????2.有序列表 ??????3.标题列表 # 无序列表 circle:空心圆, disc:默认实心圆,square:实心方片 <ul type='circl

HTML5 表单及其他新增和改良元素(上)

1. 表单内元素的form属性 在H5中可以把form放到页面的任何地方,然后为该元素指定一个form属性,属性值为该表单的id,这样就可以声明该元素从属于指定表单了 <form id="testform"> <input type="text"> </form> <textarea form="testform"></textarea> 2. 表单内元素的formaction属性 在H

表单input按钮在各浏览器之间的兼容性

从网上看了这篇关于表单input按钮的浏览器兼容性问题,总结的还不错,所以copy下来学习下. input按钮在各个浏览器之间的兼容性问题,看下边这段代码: input.item { background: #4D90FE; border: 1px solid #4D90BB; color: white; } <input type="submit" value="提交" /> 这是很简单的一个input提交按钮,它在各大浏览器中的情况如下: 很明显,我

HTML表单提交标签

<form>表单提交标签,设置提交范围 有name属性才能被提交 action:提交的地址url method:提交方式 get方式(默认):会将参数拼接在连接后,有大小限制(4k) post方式:提交后只显示连接,会将参数封装在请求体中,没有这样的限制 name 属性用于对提交到服务器后的表单数据进行标识,或者在客户端通过 JavaScript 引用表单数据.注释:只有设置了 name 属性的表单元素才能在提交表单时传递它们的值.设置name后URL编码才能转换成人能看的懂的数据 原文地址:

H5表单新增元素和属性

1.form--把要提交的内容指定特定表单,而这个要提交内容不需要被包含在特定表单中. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>form</title> </head> <body> <form action="" id="testfor

H5表单标签属性使用小结

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="" id="myForm"> <!--placeholder:提示文本,提示占位-->

H5 表单

伴随着互联网富应用以及移动开发的兴起,传统的Web表单已经越来越不能满足开发的需求,HTML5在Web表单方向也做了很大的改进,如拾色器.日期/时间组件等,使表单处理更加高效. 1.1新增表单类型 - email - 限定输入内容为邮箱地址,表单提交时会校验格式- url - 限定输入内容为URL,表单提交时会校验格式- number - 限定输入内容为数字,表单提交时会校验格式- range - 数值范围选择器- Date Pickers - 日期时间选择器 + 样式不能修改,移动端用的比较多

html5+css3 权威指南阅读笔记(三)---表单及其他新增和改良元素

一.新增元素及属性 1.表单内元素的form属性. html5: <form id="testForm"> <input type=text> </form> <textarea form = testForm></textarea> 2.表单内元素的formaction属性 <form id="testForm" action="test.jsp"> <input t

HTML5表单、一些新增的输入类型以及为不支持新特性的浏览器提供解决方案

我们先来看一下这么样一个表单: 一.一步一步来分析下代码: 1 <form id="redemption" method="post"> 2 <hgroup> 3 <h1>Oscar Redemption</h1> 4 <h2>Here's your chance to set the record straight: tell us what 5 year the wrong film got nomin