input标签特性

最新推荐文章于 2023-10-08 16:17:19 发布

空城里的往日时光

最新推荐文章于 2023-10-08 16:17:19 发布

阅读量960

点赞数

分类专栏： Html

本文链接：https://blog.csdn.net/weixin_42472040/article/details/100599303

版权

Html 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

一、概述

二、传统标签特性

三、html5新增特性

一、概述

input标签是最常见的表单控件。根据根据不同的type属性值，input控件拥有很多不同形式，例如文本框、单选框、复选框、按钮等。html中input是一个单标签，没有结束标签。所有浏览器都支持input控件。

二、传统标签特性

input标签有11个传统特性。

name特性

规定input标签的名称，主要有两个作用。其一对提交到服务器的表单数据进行标识（只有设置了name特性的表单控件才能在提交表单时传递它们的值）。其二在脚本中引用表单数据。

type特性

规定input标签的类型。如果input标签没有设置type特性，或设置的特性值不被浏览器支持，浏览器默认将其识别为文本框。

accept特性

规定能够通过文件上传提交的文件类型。理论上可以用来限制上传文件的类型，然而它只是建设性的，并很可能被忽略，它接受逗号分隔的MIME类型。注意，该特性只能与文件上传控件配合使用。

<input type="file" accept="image/gif,image/jpeg,image/jpg">

alt特性

规定图像的替代文本，为用户由于某些原因无法查看图像时提供备选信息。功能类似于image标签的alt特性。

<!--该特性只能与type="image"的input标签配合使用-->
<input type="image" src="#" alt="测试图片">

checked特性

规定页面加载时应该被预先选定的input标签，也可以在页面加载后，通过JS进行设置。该特性只能与单选框或多选框配合使用。

<input type="radio" name="radio" value="1" checked>
<input type="radio" name="radio" value="2">
<input type="checkbox" name="checkbox" value="1">
<input type="checkbox" name="checkbox" value="2">
<script>
    var input = document.getElementsByTagName('input');
    for(var i = 0,len = input.length; i < len; i++){
        input[i].onmouseover = function(){
            this.checked = 'checked';
        }
    } 
</script>

disabled特性

规定应该被禁用的input标签。被禁用的字段不能修改，也不可以使用tab键切换到该字段，但可以选中或拷贝其文本。该标签不能与type特性值为hidden的input标签一起使用。ie7及以下版本的浏览器必须设置为disabled="disabled"，而不可以直接设置disabled，否则使用JS控制时将失效。

<button id="btn1">输入域可用</button>
<button id="btn2">输入域不可用</button>
<input id="demo" disabled value="内容">
<script>
    btn1.onclick = function(){
        demo.removeAttribute('disabled');
    }    
    btn2.onclick = function(){
        demo.setAttribute('disabled','disabled');
    }    
</script>

readonly特性

规定输入字段为只读。只读字段不能修改，但用户可以使用tab键切换到该字段，也可以选中或拷贝其文本。该特性只能与文本框或密码框配合使用。ie7及以下版本的浏览器不支持使用JS控制readonly特性。

<button id="btn1">输入域只读</button>
<button id="btn2">输入域可读写</button>
<input id="demo" value="内容" readonly>
<script>
    btn1.onclick = function(){
        demo.setAttribute('readonly','readonly');
    }
    btn2.onclick = function(){
        demo.removeAttribute('readonly');
    }    
</script>

maxlength特性

规定输入字段的最大长度，以字符个数统计。该特性只能与文本框或密码框配合使用。

<input maxlength="6">
<input type="password" maxlength="6">

size特性

文本框或密码框中，该特性规定可见的字符数。对于其他类型，规定以像素为单位的输入字段宽度。注意，由于size特性是一个可视化的设计属性，推荐使用CSS来代替它。

<input size="1">
<input type="password" size="2">

src特性

规定提交按钮显示图像的url。src特性必须与type特性值为image的input标签配合使用。

<form action="#">
    <input name="test">
    <input type="image" src="https://deme.site/submit.jpg" width="99" height="99" alt="测试图片">
</form>

value特性

为input标签设定值。对于不同的控件类型，value特性的用法存在区别。

1、type="button"、"reset"、"submit" 用于定义按钮上的显示的文本
2、type="text"、"password"、"hidden"用于定义输入字段的初始值
3、type="checkbox"、"radio"、"image"用于定义与输入相关联的值

单选框和多选框必须设置value特性。value特性不能与文件上传控件配合使用。

<input id="btn1" type="button" value="1">
<input id="btn2" type="button" value="2">
<input id="test">
<script>
    btn1.onclick = btn2.onclick =function(){
        test.value=this.value;
    }    
</script>

三、html5新增特性

input标签有19个新增特性。

autocomplete特性

在表单控件上开启或关闭浏览器的自动完成功能。当用户在字段开始键入时，浏览器基于之前键入过的值，显示出字段中填写的选项。该特性适用于form表单中以下类型的input标签：text、search、url、telephone、email、password、date pickers、range、color。

注意，ie浏览器不支持该特性，只有标签拥有name特性，autocomplete特性才有效。

<input name="demo0" autocomplete="on">
<input name="demo1" autocomplete="off">

autofocus特性

规定在页面加载时，表单控件自动获取焦点。autofocus特性适用于button、input、keygen、select和textarea标签。

<input name="demo0">
<input name="demo1" autofocus>

novalidate特性

规定在提交表单时不验证input域。novalidate特性适用于form表单及其以下类型的input标签：text、search、url、telephone、email、password、date pickers、range、color。ie9及以下版本的浏览器不支持。

<form action="">
    <input type="email" name="demo" id="demo" novalidate>
    <input type="submit" value="提交">
</form>

height特性

规定image类型的input标签引入的图像的高度。height特性只适用于image类型的input标签。

width特性

规定image类型的input标签引入的图像的宽度。width特性只适用于image类型的input标签。

<form action="#">
    <input name="test">
    <input type="image" src="git.PNG" width="200" height="99">
</form>

list特性

大多数input控件类型包含一个list特性，它和一个新标签datalist结合使用。datalist标签定义在表单控件输入数据时可用的一个选项列表。datalist标签本身不会在页面中显示，而是为其它标签的list特性提供数据。

list特性适用于form标签及以下类型的input标签：text、search、url、telephone、email、password、date pickers、range、color。ie9及以下版本的浏览器和safari浏览器不支持list特性。

<form action="#">
    <input list="list" name="input">
    <datalist id="list">
        <option value="1">
        <option value="2">
        <option value="3">
    </datalist>
</form>

min特性

规定数字域所允许的最小值。

max特性

规定数字域所允许的最大值。

step特性

为数字域规定合法的数字间隔。min、max、step特性适用于以下类型的input标签：date pickers、number、range。

<input type="number" min="0" max="10" step="0.5" value="6" />

<input type="range" min="0" max="10" step="0.5" value="6" />

multiple特性

multiple特性规定按住ctrl键，输入字段可以同时选择多个值。该特性适用于type特性值为email和file的input标签。ie9及以下版本的浏览器不支持该特性。

<button id="btn1">打开文件多选</button>
<button id="btn2">关闭文件多选</button>
<br><br>
<input id="test" type="file" multiple>
<script>
    btn1.onclick = function(){
        test.setAttribute('multiple','');
    };
    btn2.onclick = function(){
        test.removeAttribute('multiple');
    };
</script>

pattern特性

规定用于验证input域的模式。模式pattern是正则表达式。pattern特性适用于以下类型的input标签：text、search、url、tel、email、password。ie9及以下版本的浏览器和safari浏览器不支持该特性。

<form action="#">
    <input pattern="\d{3}">    
    <input type="submit">
</form>

placeholder特性

该特性提供占位符文字，描述输入域所期待的值。占位符会在输入域为空时显示，在输入域获得焦点时消失。placeholder特性适用于以下类型的input标签：text、search、url、tel、email、password。ie9及以下版本的浏览器不支持该特性。

<form action="#">
    <input type="tel" placeholder="请输入数字" pattern="\d{11}">    
    <input type="submit">
</form>

要修改placeholder的颜色需要使用::placeholder。

::placeholder{
    color:green;
}

required特性

规定输入域不能为空。required特性适用于以下类型的input标签：text、search、url、telephone、email、password、date pickers、number、checkbox、radio、file。ie9及以下版本的浏览器和safari浏览器不支持required特性。

<form action="#">
    <input required>    
    <input type="submit">
</form>

form特性

规定输入域所属的一个或多个表单，若需要引用一个以上的表单时，用空格分隔。form特性值为所属表单的id。form特性适用于所有input标签类型。ie浏览器不支持该特性，只有标签拥有name特性，该特性才有效。

<form id="form" action="#">
    <input type="submit">
</form>
<input name="test" form="form">

formaction特性

重写表单的action特性。该特性适用于submit或reset的button或input标签。

<form action="#" >
    账号: <input type="text" name="fname" /><br />
    密码: <input type="text" name="lname" /><br />
    <input type="submit" value="提交" /><br />
    <input type="submit" formaction="#" value="以管理员身份提交" />
</form>

formenctype特性

重写表单的enctype特性。该特性适用于submit或reset的button或input标签。

<form action="#" method="post">
    账号: <input type="text" name="fname" /><br />
    <input type="submit" value="提交" />
    <input type="submit" formenctype="multipart/form-data" value="以multipart/form-data编码提交" />
</form>

formmethod特性

重写表单的method特性。该特性适用于submit或reset的button或input标签。

<form action="#" method="get">
    First name: <input type="text" name="fname" /><br />
    Last name: <input type="text" name="lname" /><br />
    <input type="submit" value="提交" />
    <input type="submit" formmethod="post" formaction="#" value="使用POST提交" />
</form>

formnovalidate特性

重写表单的novalidate特性。该特性适用于button或input标签。

<form action="#" method="get">
    邮箱: <input type="email" name="userid" /><br />
    <input type="submit" value="提交" /><br />
    <input type="submit" formnovalidate="formnovalidate" value="进行没有验证的提交" />
</form>

formtarget特性

重写表单的target特性。该特性适用于submit或reset的button或input标签。

<form action="#">
    账号: <input type="text" name="fname" /><br />
    密码: <input type="text" name="lname" /><br />
    <input type="submit" value="提交" />
    <input type="submit" formtarget="_blank" value="提交到新窗口/选项卡" />
</form>