h5表单属性的介绍
表单
type属性对应的属性值
text:代表文本框 案例:<input type="text" />
password:代表密码框
radio:单选框
checkbox:多选框
submit:提交按钮
button:按钮
h5 email:邮箱(必须是邮箱格式的)
tel:电话号码(手机上显示虚拟键盘)
url:网络地址(必须填网络地址)
search:有个 x 按钮,可以清空文本框内容
range:数值选择器;
number:只能输入数字的文本框
color:颜色选择器
date:显示日期
time:显示时间
input的属性:
type:文本框类型
value:文本框输入的值
placeholder:输入提示框的信息
autocomplete="off" 不会有提示的情况
autofocus:自动聚焦
required:这个内容必填
pattern:正则验证
validity:对象,多个正则验证成功为true,一个为false就是false;
案例:

查看到的结果

看到上面有很多的属性,他们的属性值都是false,他们的评判的依据,是通过valid这个属性,如果这8个属性都为true,才为true,8个中有一个为false,就为false;
但是刚开始,什么也没设,也会默认为true,所以说,我们必须用这8个属性才可以,或者说,可以进行判断的属性,这个属性才有用;
h5表单属性的介绍的更多相关文章
- H5新增input表单、表单属性
新增表单 email,Email类型 url , Url类型 date,日期类型 time,时间类型 month,月类型 week,周类型 number,数字类型 tel,电话类型 search,搜索 ...
- H5表单
H5表单 HTML5 新的 Input 类型 HTML5 拥有多个新的表单输入类型.这些新特性提供了更好的输入控制和验证. 本章全面介绍这些新的输入类型: email url number range ...
- [H5表单]一些html5表单知识及EventUtil对象完善
紧接着上面的文章,一开始准备一篇文章搞定,后来看到,要总结的东西还不少,干脆,把上面文章拆成两部分吧,这部分主要讲讲表单知识! 表单知识 1.Html5的autofocus属性. 有个这个属性,我们不 ...
- H5 表单
伴随着互联网富应用以及移动开发的兴起,传统的Web表单已经越来越不能满足开发的需求,HTML5在Web表单方向也做了很大的改进,如拾色器.日期/时间组件等,使表单处理更加高效. 1.1新增表单类型 - ...
- H5表单基础知识(二)
表单新增属性 <!--<input type="text" class="name" />--> <!-- placeholder ...
- Html5学习进阶四 表单元素和表单属性
HTML5 的新的表单元素: HTML5 拥有若干涉及表单的元素和属性. 本章介绍以下新的表单元素: datalist keygen output 浏览器支持 Input type IE Firefo ...
- 基于react hooks,zarm组件库配置开发h5表单页面
最近使用React Hooks结合zarm组件库,基于js对象配置方式开发了大量的h5表单页面.大家都知道h5表单功能无非就是表单数据的收集,验证,提交,回显编辑,通常排列方式也是自上向下一行一列的方 ...
- html5中新增的form表单属性
html5中新增两个表单属性,分别autocomplete和novalidate属性 1.autocomplete属性 该属性用于控制自动完成功能的开启和关闭.可以设置表单或者input元素,有两个属 ...
- 兼容IE8以下浏览器input表单属性placeholder不能智能提示功能
当前很多表单提示使用了表单属性placeholder,可这属性不兼容IE8以下的浏览器,我自己写了一个兼容处理js // 兼容IE8以下浏览器input不能智能提示功能 if(navigator.ap ...
随机推荐
- 【6.10校内test】T1 FBI树
FBI树[题目链接] 感觉我超废. MY SOLUTION: 我的想法其实也是很简单的,递归的去做,因为最后要求输出FBI的后序遍历,也就是左右头,我的方法是递归存字符数组,(按照与后序遍历完 ...
- Luogu P5339 [TJOI2019]唱、跳、rap和篮球
题目 设\(f_i\)表示从\((a-4i,b-4i,c-4i,d-4i)\)中选\(n-4i\)个排队的方案数. 那么我们可以容斥,答案为\(\sum\limits_{i=0}^{lim}(-1)^ ...
- Linux系统性能测试工具(四)——CPU性能测试工具之super_pi、sysbench
本文介绍关于Linux系统(适用于centos/ubuntu等)的CPU性能测试工具-sysbench.CPU性能测试工具包括: super_pi: sysbench——不仅可以测试CPU性能,而且可 ...
- Linux用户的基本操作1 用户相关信息 及useradd /usermod 部分
目录 linux 用户管理 - 用户的基本操作 用户管理 用户的相关命令 linux 用户管理 - 用户的基本操作 用户管理 1.什么是用户? 用户指的是能够正常登录Linux或windows系统 2 ...
- Python自动化学习--元素定位
from selenium import webdriver import time driver = webdriver.Chrome() driver.get("https://www. ...
- 源讯科技(中国)有限公司(Atos Worldline)
源讯公司是欧洲***的IT服务公司,去年营收达到88亿欧元,在全球52个国家拥有77100名员工.Worldline为Atos(源讯)全资子公司,专注于金融支付领域.Worldline在B2B及B2C ...
- java打印树形目录结构
import java.io.File; public class MainTest { public static void main(String[] args) { String dirname ...
- js 动态时间
<script type="text/javascript"> function show_cur_times(){ //获取当前日期 var date_time = ...
- easyui自学模板代码
index.jsp源码 <%@ page language="java" contentType="text/html; charset=UTF-8" p ...
- display:line-block
1.那是因为第二个标签是inline-block,它的对齐方式是基线对齐,对齐的是第一个元素里面字的下划线,所以第二个元素的下边缘对齐的是1的下划线,只要在第二个元素里面加内容或者加个空格( )就可以 ...