input标签用法与功能全面解析

< 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" />