< input >标签用法与功能全面解析
< input > 标签规定用户可输入数据的输入字段。根据不同的 type 属性，输入字段有多种形态。输入字段可以是文本字段、复选框、密码字段、单选按钮、按钮等等。这是w3school官网最基础易懂的一段解析，但还有很多其他的用法与功能在我们写代码过程中会经常用到，下面就是我整理的一些关于该标签的其余用法。
|
属性
|
值
|
描述
|
|
accept
|
list-of-mime-types
|
规定可通过文件上传控件提交的文件类型（仅适用于 type=“file”）
|
|
alt
|
text
|
规定图像输入控件的替代文本（仅适用于 type=“image”）
|
|
autocomplete
|
on/off
|
规定是否使用输入字段的自动完成功能
|
|
autofocus
|
autofocus
|
规定输入字段在页面加载时是否获得焦点（不适用于 type=“hidden”）
|
|
checked
|
checked
|
规定当页面加载时是否预先选择该 input 元素（适用于 type=“checkbox” 或 type=“radio”）
|
|
disabled
|
disabled
|
规定当页面加载时是否禁用该 input 元素（不适用于 type=“hidden”）
|
|
form
|
form name
|
规定输入字段所属的一个或多个表单
|
|
form action
|
URL
|
覆盖表单的 action 属性（适用于 type=“submit” 和 type=“image”）
|
|
height
|
pixels%
|
定义 input 字段的高度（适用于 type=“image”）
|
|
width
|
pixels%
|
定义input字段的宽度（适用于type=“image”）
|
|
max
|
number/date
|
规定输入字段的最大值，请与 “min” 属性配合使用，来创建合法值的范围
|
|
max length
|
number
|
规定文本字段中允许的最大字符数
|
|
min
|
number/date
|
规定输入字段的最小值，请与 “max” 属性配合使用，来创建合法值的范围
|
|
multiple
|
multiple
|
如果使用该属性，则允许一个以上的值
|
|
name
|
field-name
|
规定 input 元素的名称，name 属性用于在提交表单时搜集字段的值
|
|
placeholder
|
text
|
规定帮助用户填写输入字段的提示
|
|
readonly
|
readonly
|
指示字段的值无法修改
|
|
required
|
required
|
指示输入字段的值是必需的
|
|
size
|
number-of-char
|
规定输入字段中的可见字符数
|
|
s r c
|
URL
|
规定图像的 URL（适用于 type=“image”）
|
|
step
|
number
|
规定输入字的的合法数字间隔
|
|
type
|
button/checkbox/date/datetime/datetime-local/email/file/hidden/image/month/number/password/radio/range/reset/submit/text/time/URL/week
|
规定 input 元素的类型
|
|
value
|
value
|
对于按钮：规定按钮上的文本/对于图像按钮：传递到脚本的字段的符号结果/对于复选框和单选按钮：定义 input 元素被点击时的结果/对于隐藏、密码和文本字段：规定元素的默认值/注释：不能与 type=“file” 一同使用/注释：对于 type=“checkbox” 以及 type=“radio”，是必需的
|
关于该标签的一些快捷用法
1.只能输入和粘贴汉字
|
<input οnkeyup=“value=value.replace(/[^\u4E00-\u9FA5]/g,’’)” onbeforepaste=“clipboardData.setData(‘text’,clipboardData.getData(‘text’).replace(/[^\u4E00-\u9FA5]/g,’’))”`>
|
2.只能输入和粘贴数字
<input onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" />
|
<input onkeyup="if(/\D/.test(this.value)){alert('只能输入数字');this.value='';}">
|
3.只能输入英文和数字
<input onkeyup="value=value.replace(/[\W]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))">
|
4.简易禁止输入汉字，但可粘贴
<input style="ime-mode:disabled">
|
5.输入数字和小数点
<input on key up="value=value. replace(/[^\d{1,}\.\d{1,}|\d{1,}]/g,'')" />
|
6.只能输入数字（小数点也除外）
<input onkeyup="this.value=this.value.replace(//D/g,'')" onafterpaste="this.value=this.value.replace(//D/g,'')">
|
7.只能输入数字和小数点
<input onkeyup="if(isNaN(value))execCommand('undo')" onafterpaste="if(isNaN(value))execCommand('undo')">
|
<input name=txt1 onchange="if(//D/.test(this.value)){alert('只能输入数字');this.value='';}">
|
8.只能输入字母和汉字
<input onkeyup="value=value.replace(/[/d]/g,'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[/d]/g,''))" maxlength=10 name="Numbers">
|
9.只能输入英文字母和数字,不能输入中文
<input onkeyup="value=value.replace(/[^/w/.//]/ig,'')">
|
10.只能输入数字和英文
<font color="Red">c</font> <input onkeyup="value=value.replace(/[^/d]/g,'')">
|
11.屏蔽输入法
<input type="text" name="url" style="ime-mode:disabled" onkeydown="if(event.keyCode==13)event.keyCode=9" />
|
input标签用法与功能全面解析相关推荐
- HTML5/HTML中input标签用法解读
HTML5/HTML中<input>标签用法解读 OK!今天博主为小伙伴们介绍的内容是HTML5/HTML中<input>标签的用法,,, ,emmm图文并茂哦! 喜欢博主的粉 ...
- input标签用法解读
HTML5/HTML中标签用法解读 OK!今天博主为小伙伴们介绍的内容是HTML5/HTML中标签的用法,,, ,emmm图文并茂哦! 下面正式开始内容的介绍:首先,直观上说标签规定了用户可以在其中输 ...
- php 内置 日历 input,input标签的日历功能实现
1. 利用HTML5 input标签属性type="date" 以上代码在PC端的样式为 Paste_Image.png 在iPhone6s手机端的样式为 Paste_Image. ...
- html中radio单选按钮控件标签用法解析及如何设置默认选中
Radio 对象代表 HTML 表单中的单选按钮.在 HTML 表单中 <input type="radio"> 每出现一次,一个 Radio 对象就会被创建.单选按钮 ...
- 在php中标签input用法,html input标签的属性有哪些？input标签的用法总结（附实例）...
本篇文章主要的向大家介绍了关于html input标签的属性,还有关于html input标签的具体的用法总结.让我们一起来看看html input标签有哪些用法吧 首先先来说说html input标 ...
- html input标签的属性有哪些？input标签的用法总结（附实例）
首先先来说说html input标签的属性: 1.type:该属性是input标签里唯一的必须输入的属性,当然,也可以不填,默认为type = "text".具体它有那些值,我们后 ...
- HTML中input标签使用法汇总
HTML input标签的属性: 1.type:该属性是input标签里唯一的必须输入的属性,当然,也可以不填,默认为type = "text".具体它有那些值,我们后面再讨论. ...
- HTML中input标签功能介绍
我们先来了解一下input标签的几个基本控制属性. 1. name属性:元素的名称,也就是name的值代表当前input元素的名字: 2.value属性:元素的默认值 1)当input type=&q ...
- input type=range标签用法实例代码
在HTML5中,又新增许多新<input>控件类型,比较实用的一个就是<input type="range">,以滑竿的方式来调整value值,在这以前需要 ...
- php多图片上传并回显,如何用input标签和jquery实现多图片的上传和回显功能
本文主要记录如何用input标签和jquery实现多图片的上传和回显,不会涉及后端的交互,大概的效果看图 效果图 我们从零来做一个这样的demo 第一步: 我们先完善一下我们的页面,默认的input- ...
最新文章
- go语言json的使用技巧
- 我是 Redis，MySQL 大哥被我害惨了！
- 白盒测试工具 - sonar的安装、配置与使用入门手册，用sonar检查代码质量实战演示
- 微服务架构下分布式事务解决方案 —— 阿里GTS
- linux strcpy函数实现,strcpy(char *dest , char ＊src)的漏洞
- 洛谷——P1109 学生分组
- 给出两个字符串（可能包含空格）,找出其中最长的公共连续子串,输出其长度
- 第六届蓝桥杯java b组第一题
- 如何用谷歌地图下载器下载大字体谷歌地图打印喷绘
- web3调用智能合约取事件
- windows 强制关闭程序并强制删除文件
- 【历史上的今天】12 月 23 日：Python 起源；TCP/IP 协议发明者出生；设计第一台 PC 的人诞生
- 为什么百度蜘蛛不对网站进行抓取？
- 看漫画学python下载_Python爬虫实现漫画下载 - 『编程语言区』 - 吾爱破解 - LCG - LSG |安卓破解|病毒分析|www.52pojie.cn...
- 关于mac下搭建php、apache、mysql环境
- 最近远景论坛打不开修改hosts
- 台州学院c语言期末试题,台州学院 高等数学上册 期末试题3
- Mac上的ps插件安装教程：苹果电脑ps插件怎么安装
- LES生产物流执行系统，实施精益生产五大托词
- 璀璨星空html,璀璨星空心情灯
热门文章
- ROS_melodoc编译运行SVO错误的解决方案
- Rust LLDB 调试入门指北
- wps缺少字体ubuntu
- 网易云易盾发布多国家多语种内容安全服务，助力中国互联网出海
- 仿写网易云-项目初始化-扫描二维码登录
- AUTOCAD--动态缩放
- html图片在桌面的路径,桌面路径无法恢复以前的路径
- word目录中英文开头目录不对齐
- python进行主成分分析_python 主成分分析
- OpenCV图像锐化
