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