目录

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的相关属性相关推荐

  1. input输入框的input事件和change事件

    input输入框的onchange事件,要在 input 失去焦点的时候才会触发: 在输入框内容变化的时候不会触发change,当鼠标在其他地方点一下才会触发: onchange 事件也可用于单选框与 ...

  2. input输入框的input事件

    首先是一个坑,在IE和360浏览器中页面刷新会执行一遍input事件,在其他浏览器就没有,所以会有很大问题,导致做的自动补全列表直接显示,刷新页面也不能隐藏. <input type=" ...

  3. 弹出框动态增加input输入框

    欢迎关注微信公众号: 程序员小圈圈 原文首发于: www.zhangruibin.com 本文出自于: RebornChang的博客 转载请标明出处^_^ 弹出框动态增加input输入框 最近项目上有 ...

  4. HTML中限制input 输入框输入内容

    HTML中限制input 输入框输入内容 先介绍使用 oninput 事件,限制HTML中input 输入框输入内容的方式,再介绍用其它方式限制HTML中input 输入框输入内容. 只能输入纯数字的 ...

  5. input输入框限制(座机,手机号码)

    记录一下 座机input输入框: <input style="width:100px;" id="tel" type="text" o ...

  6. input 输入框 监听@input

    监控 input 输入框 @input 获取输入数据报错:Cannot read property 'detail' of undefined at VueComponent 使用 input 输入框 ...

  7. css input光标粗细,如何用CSS原生属性caret-color改变input输入框光标颜色

    表单对大家来说并不陌生,当然,我也不是来和大家聊怎么做表单或者处理表单的样式网格,因为这些对于大家来说都是小儿科的东西.而是来聊聊怎么改变表单控件中光标的颜色.日常开发中我们可能会有改变input光标 ...

  8. JavaScript控制input输入框的required属性值

    JavaScript控制input输入框的required属性值 当我们在勾选上一个复选框之后,希望该选项的输入框成为必填项时,那么将会用到required这个属性 在HTML中,required为属 ...

  9. 如何在input输入框中加一个搜索的小图片_前端开发困难重重,如何把握机会学习?...

    第3天[form表单] 主要内容 Form表单 表单元素 表单元素的属性 HTML5新增type类型 HTML新增属性 学习目标 一.Form表单 表单在 Web 网页中用来给访问者填写信息,从而能采 ...

最新文章

  1. launchctl mysql_Mac Yosemite 10.10 下利用 Launchctl 自启动 mysql
  2. Spring MVC入门
  3. java实现https请求
  4. 电机编码器调零步骤_西门子伺服电机电缆选型
  5. 你不知道的JavaScript·第一部分
  6. PHP写sqlserver事务,php调用sqlserver存储过程使用事务处理
  7. NSInteger,NSUInteger,NSNumber
  8. camera.swf java_java调用摄像头保存图片上传功能
  9. Java进行spark计算
  10. DeFi收益聚合协议Pickle Finance与APY Vision达成合作
  11. [SCM]源码管理 - SVN Server
  12. linux下mysql数据的导出和导入
  13. openpose环境搭建(详细教程CPU/GPU)windows 10+python 3.7+CUDA 11.6+VS2022
  14. C语言/C++基础之奔跑的小人
  15. myeclipse出现Severs栏不显示Tomcat
  16. 同态加密(CKKS)中的重线性化(Relinearization)
  17. AI“独角兽”排队上市,但属于AI公司的胜利还没有到
  18. day26_安卓基础之之Android介绍与入门
  19. 2018春招京东实习编程题解
  20. UTC与BJT时间换算C语言

热门文章

  1. 三维重建 PyQt Python VTK 医学图像的可视化 vtkImageView2三视图(横断面,冠状面,矢状面)
  2. 他是这么解决视频版权的,南京小伙做视频剪辑,一个月赚了7k多
  3. vue 打印(模板套打)
  4. 【Python编程:从入门到实践】第二十章练习题
  5. 大数据 - 指标 - 流量
  6. 重庆python好找工作吗_在重庆大学城呆四年是怎样的体验?
  7. 证明n阶方阵A可相似对角化的充要条件是A有n个线性无关的特征向量
  8. Cocos2d-JS开发中的一些小技巧(持续更新)
  9. labelme设置生成label_viz.png中的图例大小
  10. 20145330 《网络对抗》PC平台逆向破解:注入shellcode 和 Return-to-libc 攻击实验