<Input />输入框及input的相关属性
目录
1、name、type、value、accept、alt、checked、disabled、maxlength、readonly、 size、src、这些属性是input元素的传统元素属性
2、autocomplete、autofocus、form、formaction、formenctype、formmethod、formnovalidate、formtarget、height、list、max、min、multiple、novalidate、pattern、 placeholder、required、step、width这19个属性是HTML5新增的元素属性
1、name、type、value、accept、alt、checked、disabled、maxlength、readonly、size、src、这些属性是input元素的常用元素属性
1.1 name:
name属性用于规定input元素的名称,用于对提交到服务器后的表单数据进行标识,或者在客户端通过javascript引用表单数据
只有设置了name属性的表单元素才能在提交表单时传递它们的值
1.2 type:
type属性用来规定input元素的类型
如果input元素没有设置type属性,或者设置的值在浏览器中不支持,那么输入类型会变成type="text"
1.3 value:
type="button"、"reset"、"submit"用于定义按钮上的显示的文本
type="text"、"password"、"hidden"用于定义输入字段的初始值
type="checkbox"、"radio"、"image"用于定义与输入相关联的值
type="checkbox"或"radio"必须设置value属性
value属性无法与type="file"的input元素一起使用
1.4 accept:
accept属性用来规定能够通过文件上传进行提交的文件类型。理论上可以用来限制上传文件类型,然而它只是建设性的,并很可能被忽略,它接受逗号分隔的MIME类型
该属性只能与type="file"配合使用
<input type="file" accept="image/gif,image/jpeg,image/jpg">
1.5 alt:
alt属性为图像输入规定替代文本
alt属性只能与type="image"的input元素配合使用
<input type="image" src="#" alt="测试图片">
1.6 disabled:
禁用input元素,被禁用的字段是不能修改的
disabled属性无法与type="hidden"的input元素一起使用
<input id="test" disabled value="内容">
1.7 checked:
1.8 maxlength:
maxlength属性规定输入字段的最大长度,以字符个数计
该属性只能与type="text"或type="password"的input元素配合使用
<input maxlength="6">
<input type="password" maxlength="6">
1.9 readonly:
readonly属性规定输入字段为只读,只读字段是不能修改的
readonly属性可与type="text"或"password"的input元素配合使用
<input id="test" value="内容" readonly>
1.10 size:
推荐使用CSS来代替它
<input size="1">
1.11 src:
src属性作为提交按钮显示的图像的URL
src属性只能且必须与type="image"的input元素配合使用
<form action="#"><input name="test"><input type="image" src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/submit.jpg" width="99" height="99" alt="测试图片">
</form>
2、autocomplete、autofocus、height、list、max、min、multiple、novalidate、pattern、placeholder、required、step、width等HTML5新增的常用元素属性
2.1 autocomplete:
浏览器输入表单信息的时候,往往input输入框会记录之前提交的表单信息,容易暴露数据,autocomplete="off"可以清除之前缓存的数据
IE浏览器不支持该属性,只有元素拥有name属性,该属性才有效
<input name="test1" autocomplete="on">
<input name="test2" autocomplete="off">
2.2 autofocus:
autofocus属性规定在页面加载时,域自动地获得焦点
autofous属性适用于button、input、select和textarea元素
<input name="test2" autofocus>
2.3 required:
required属性规定必须在提交之前填写输入域(不能为空),用于校验
IE9-浏览器及safari浏览器不支持
2.4 placeholder:
placeholder属性提供占位符文字
<input type="tel" placeholder="请输入数字" pattern="\d{11}">
2.5 pattern:
pattern是正则表达式,用于验证input域的
2.6 multiple:
multiple属性规定按住ctrl按键,输入字段可以选择多个值
<input id="test" type="file" multiple>
2.7 step、min、max:
step属性为输入域规定合法的数字间隔
min属性规定输入域所允许的最小值
max属性规定输入域所允许的最大值
<input type="number" min="0" max="10" step="0.5" value="6" />
2.8 width、height:
规定image类型的input标签的图像宽度、高度
该属性只适用于image类型的input标签
<input type="image" src="submit.jpg" width="99" height="99">
2.9 novalidate:
novalidate属性规定在提交表单时不验证form或input域
IE9-浏览器不支持
<Input />输入框及input的相关属性相关推荐
- input输入框的input事件和change事件
input输入框的onchange事件,要在 input 失去焦点的时候才会触发: 在输入框内容变化的时候不会触发change,当鼠标在其他地方点一下才会触发: onchange 事件也可用于单选框与 ...
- input输入框的input事件
首先是一个坑,在IE和360浏览器中页面刷新会执行一遍input事件,在其他浏览器就没有,所以会有很大问题,导致做的自动补全列表直接显示,刷新页面也不能隐藏. <input type=" ...
- 弹出框动态增加input输入框
欢迎关注微信公众号: 程序员小圈圈 原文首发于: www.zhangruibin.com 本文出自于: RebornChang的博客 转载请标明出处^_^ 弹出框动态增加input输入框 最近项目上有 ...
- HTML中限制input 输入框输入内容
HTML中限制input 输入框输入内容 先介绍使用 oninput 事件,限制HTML中input 输入框输入内容的方式,再介绍用其它方式限制HTML中input 输入框输入内容. 只能输入纯数字的 ...
- input输入框限制(座机,手机号码)
记录一下 座机input输入框: <input style="width:100px;" id="tel" type="text" o ...
- input 输入框 监听@input
监控 input 输入框 @input 获取输入数据报错:Cannot read property 'detail' of undefined at VueComponent 使用 input 输入框 ...
- css input光标粗细,如何用CSS原生属性caret-color改变input输入框光标颜色
表单对大家来说并不陌生,当然,我也不是来和大家聊怎么做表单或者处理表单的样式网格,因为这些对于大家来说都是小儿科的东西.而是来聊聊怎么改变表单控件中光标的颜色.日常开发中我们可能会有改变input光标 ...
- JavaScript控制input输入框的required属性值
JavaScript控制input输入框的required属性值 当我们在勾选上一个复选框之后,希望该选项的输入框成为必填项时,那么将会用到required这个属性 在HTML中,required为属 ...
- 如何在input输入框中加一个搜索的小图片_前端开发困难重重,如何把握机会学习?...
第3天[form表单] 主要内容 Form表单 表单元素 表单元素的属性 HTML5新增type类型 HTML新增属性 学习目标 一.Form表单 表单在 Web 网页中用来给访问者填写信息,从而能采 ...
最新文章
- launchctl mysql_Mac Yosemite 10.10 下利用 Launchctl 自启动 mysql
- Spring MVC入门
- java实现https请求
- 电机编码器调零步骤_西门子伺服电机电缆选型
- 你不知道的JavaScript·第一部分
- PHP写sqlserver事务,php调用sqlserver存储过程使用事务处理
- NSInteger,NSUInteger,NSNumber
- camera.swf java_java调用摄像头保存图片上传功能
- Java进行spark计算
- DeFi收益聚合协议Pickle Finance与APY Vision达成合作
- [SCM]源码管理 - SVN Server
- linux下mysql数据的导出和导入
- openpose环境搭建(详细教程CPU/GPU)windows 10+python 3.7+CUDA 11.6+VS2022
- C语言/C++基础之奔跑的小人
- myeclipse出现Severs栏不显示Tomcat
- 同态加密(CKKS)中的重线性化(Relinearization)
- AI“独角兽”排队上市,但属于AI公司的胜利还没有到
- day26_安卓基础之之Android介绍与入门
- 2018春招京东实习编程题解
- UTC与BJT时间换算C语言
热门文章
- 三维重建 PyQt Python VTK 医学图像的可视化 vtkImageView2三视图(横断面,冠状面,矢状面)
- 他是这么解决视频版权的,南京小伙做视频剪辑,一个月赚了7k多
- vue 打印(模板套打)
- 【Python编程:从入门到实践】第二十章练习题
- 大数据 - 指标 - 流量
- 重庆python好找工作吗_在重庆大学城呆四年是怎样的体验?
- 证明n阶方阵A可相似对角化的充要条件是A有n个线性无关的特征向量
- Cocos2d-JS开发中的一些小技巧(持续更新)
- labelme设置生成label_viz.png中的图例大小
- 20145330 《网络对抗》PC平台逆向破解:注入shellcode 和 Return-to-libc 攻击实验