nput框作为一个简单的输入框,你对它的属性知道有多少?
常见的属性(带new为h5新增属性):
1、accept:accept 属性规定了可通过文件上传提交的服务器接受的文件类型。仅用于input的type类型为"file"的时候。
属性值:
audio/*,音频
video/* ,视频
image/* ,图片
MIME_type,一个有效的 MIME 类型,不带参数
<input type="file" name="pic" accept="image/*" />
// 如需规定多个值,请使用逗号分隔
<input type="file" accept="audio/*,video/*,image/*" />
2、value:指定元素的value值。
属性值:text
value 属性对于不同 input 类型,用法也不同:
注意:value 属性对于 <input type="checkbox"> 和 <input type="radio"> 是必需的。
注意:value 属性不适用于 <input type="file">。
<input value="文本" />
3、name:表示的该文本输入框名称。用于表单提交后引用表单数据。只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。
属性值:text
<input type="text" name="email" />
4、size:输入框的长度大小。
属性值:number
<input type="text" name="email" size="35" />
注意:size 属性适用于下面的 input 类型:text、search、tel、url、email 和 password。
5、maxlength:输入框中允许输入字符的最大数。
属性值:number
<input type="text" name="usrname" maxlength="10" />
6、readonly:表示该框中只能显示,不能添加修改。
<input type="text" name="country" value="中国" readonly />
7、required(new):属性规定必须在提交表单之前填写输入字段。
<input type="text" name="username" required />
8、alt:定义图像输入的替代文本。 (只针对type="image")
属性值:text
<input type="image" src="submit.gif" alt="Submit" width="48" height="48" />
9、autocomplete(new):autocomplete 属性规定输入字段是否应该启用自动完成功能。
属性值:on/off,默认启动自动完成功能。
<input autocomplete="off" />
注意:autocomplete 属性适用于下面的 <input> 类型:text、search、url、tel、email、password、datepickers、range 和 color。
10、autofocus(new):属性规定当页面加载时 <input> 元素应该自动获得焦点。
属性值:autofocus
<input type="text" autofocus />
11、checked:checked 属性规定在页面加载时应该被预先选定的 <input> 元素。 (只针对 type="checkbox" 或者 type="radio")
属性值:checked
<input type="checkbox" name="vehicle" value="Car" checked />小汽车
12、disabled:disabled 属性规定应该禁用的 <input> 元素。
属性值:disabled
<input type="text" name="lname" disabled />
13、form(new): form 属性规定 <input> 元素所属的一个或多个表单。
位于 form 表单外的输入字段(但仍然属于 form 表单的一部分):
<form action="demo-form.php" id="form1">
First name: <input type="text" name="fname"><br>
<input type="submit" value="提交">
</form>
14、formaction(new):属性规定当表单提交时处理输入控件的文件的 URL。(只针对 type="submit" 和 type="image")
属性值:URL
<input type="submit" formaction="demo-admin.php" value="提交" />
注意:
formaction 属性规定当表单提交时处理输入控件的文件的 URL。
formaction 属性覆盖 <form> 元素的 action 属性。
15、formenctype(new):属性规定当表单数据提交到服务器时如何编码(只适合 type="submit" 和 type="image")。
属性值:application/x-www-form-urlencoded ;multipart/form-data text/plain
<input type="submit" formenctype="multipart/form-data" value="以 Multipart/form-data 提交" />
注意:
formenctype 属性规定当表单数据提交到服务器时如何编码(仅适用于 method="post" 的表单)。
formenctype 属性覆盖 <form> 元素的 enctype 属性。
16、formmethod (new):定义发送表单数据到 action URL 的 HTTP 方法。 (只适合 type="submit" 和 type="image")
属性值:get / post
<input type="submit" formmethod="post" formaction="demo-post.php" value="使用 POST 提交" />
17、formnovalidate(new):formnovalidate 属性覆盖 <form> 元素的 novalidate 属性。
属性值:formnovalidate
<input type="submit" formnovalidate="formnovalidate" value="不验证提交">
18、formtarget (new):规定表示提交表单后在哪里显示接收到响应的名称或关键词。(只适合 type="submit" 和 type="image")
属性值:_blank; _self; _parent; _top; framename
<input type="submit" formtarget="_blank" value="提交到一个新的页面上">
19、height (new);width(new):属性规定 <input> 元素的高度和宽度。 (只针对type="image")
属性值:pixels
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48" />
20、max (new);min(new):属性规定 <input> 元素的最大值和最小值。
属性值:number;date
<input type="date" name="bday" max="1979-12-31">
<input type="date" name="bday" min="2000-01-02">
<input type="number" name="quantity" min="1" max="5">
21、multiple (new):属性规定允许用户输入到 <input> 元素的多个值。
属性值:multiple
<input type="file" name="img" multiple>
注意:multiple 适用于以下 input 类型:email 和 file。
22、pattern (new):pattern 属性规定用于验证 <input> 元素的值的正则表达式。
属性值:regexp;
<form action="demo_form.html">
Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
<input type="submit">
</form>
23、placeholder (new): 属性规定可描述输入 <input> 字段预期值的简短的提示信息 。
属性值:text
<input placeholder="请输入姓名" />
24、src : src 属性规定显示为提交按钮的图像的 URL。 (只针对 type="image")
属性值:URL
<input type="image" src="submit.gif" alt="Submit" />
25、step (new): step 属性规定 <input> 元素的合法数字间隔。
属性值:number
<input type="number" name="points" step="3">
26、list(new) :属性引用 <datalist> 元素,其中包含 <input> 元素的预定义选项。
属性值:datalist_id
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Google Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
27、type: type 属性规定要显示的 <input> 元素的类型。
属性值:button;checkbox;color;date;datetime;datetime-local;email;file;hidden;image;month;number;password;radio;range;reset;search;submit;tel;text;time;url;week
type的属性值众多,也是用的比较多的一个。
button:定义可点击的按钮(通常与 JavaScript 一起使用来启动脚本)。
checkbox:定义复选框。
color(new):定义拾色器。
date(new):定义 date 控件(包括年、月、日,不包括时间)。
datetime(new):定义 date 和 time 控件(包括年、月、日、时、分、秒、几分之一秒,基于 UTC 时区)。
datetime-local(new):定义 date 和 time 控件(包括年、月、日、时、分、秒、几分之一秒,不带时区)。
email(new):定义用于 e-mail 地址的字段。file定义文件选择字段和 "浏览..." 按钮,供文件上传。
hidden:定义隐藏输入字段。
image:定义图像作为提交按钮。
month(new):定义 month 和 year 控件(不带时区)。
number(new):定义用于输入数字的字段。
password:定义密码字段(字段中的字符会被遮蔽)。
radio:定义单选按钮。
range(new):定义用于精确值不重要的输入数字的控件(比如 slider 控件)。
reset:定义重置按钮(重置所有的表单值为默认值)。
search(new):定义用于输入搜索字符串的文本字段。
submit:定义提交按钮。
tel(new):定义用于输入电话号码的字段。
text:默认。定义一个单行的文本字段(默认宽度为 20 个字符)。
time(new):定义用于输入时间的控件(不带时区)。
url(new):定义用于输入 URL 的字段。
week(new):定义 week 和 year 控件(不带时区)。
<input name="fee" type="text" onkeyup="validates(this)">
<script type="text/javascript">
function validate(obj) {
obj.value = obj.value.replace(/[^\d.]/g, ""); //清除"数字"和"."
obj.value = obj.value.replace(/^\./g, ""); //验证第一个字符是数字而不是
obj.value = obj.value.replace(/\.{2,}/g, "."); //只保留第一个. 清除多余的
obj.value = obj.value.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');//只能输入两位小数
}
</script>
TML中input文本输入框在某些情况下禁止或者限制部分操作是很有必要的,下面为大家分享一下如何在input文本输入框添加限制条件,验证内容是否选中或者内容编辑等,此方法仅供才考。
以图片形式方便大家手机端阅读:
图片形式
以文字形式方便大家在PC端验证:
1、选中去除文本框文字,离开后显示原有文字:
<input name="key" type="text" id="key" value="关键词" size="30"
onmouseover=this.focus();this.select();
onclick="if(value==defaultValue){value='';this.style.color='#000'}"
onBlur="if(!value){value=defaultValue;this.style.color='#999'}" style="color:#999" />
2、选中后方可编辑:
<input type="checkbox" name="tpbox" value="1" onclick="if(this.checked) {txtNo.disabled=false}else{txtNo.disabled=true}">你一定要幸福,我会好好的!
你的姓名:<input type="text" name="txtNo" size="20" value="选中前面的选项方可编辑" disabled>
3、点击链接后方可编辑:
<a href="#" onclick="username.readOnly=false;alert('你好,欢迎使用!')">先点击我哦!</a>
你的姓名:<input id="username" value="--请输入--" size="30" readOnly>
4、输入框从中间输入:从中间输入:
<input type="text" name="mid"style="text-align:center;">
5、输入框变色:输入框改变变色:
<input type="text" size="20" style="background-color:#FFFFFF"
onfocus="style.backgroundColor='#FFFF00'"
onblur="style.backgroundColor='#FFFFFF'">
6、输入框只能输入数字(用的是正则表达式):你的年龄:
<input onkeyup="value=value.replace(/[^\d]/g,'') "
onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))">
7、输入框只能输入中文(用的是正则表达式):你的中文名:
<input onkeyup="value=value.replace(/[ -~]/g,'')" onkeydown="if(event.keyCode==13)event.keyCode=9">
8、只能输入英文和数字(用的是正则表达式):
你 的昵称:<input onkeyup="value=value.replace(/[\W]/g,'') "
onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"
onkeydown="if(event.keyCode==13)event.keyCode=9">
9、输入框不能编辑,但表单可以获得输入框内的值:
<input type="text" value="afreon" onclick="alert('总和不能编辑!');" onfocus="this.blur()" />
<input type="text" value="afreon" onclick="alert(this.value);" readonly />
<input value="不可修改" readonly= "true" type="text"/>//:字体颜色为黑体
10、输入框不能编辑,并且表单不能获得输入框内的值
<input value="不可修改" disabled="disabled" type="text"/>//:字体颜色为灰体
11、输入框禁止输入法:
<input onpaste="return false" style="ime-mode:disabled">
*请认真填写需求信息,我们会在24小时内与您取得联系。