html input标签的属性有哪些？input标签
作者：admin 发布时间：2022-10-28 点击数：
<p>本篇文章主要的向大家介绍了关于html input标签的属性，还有关于html input标签的具体的用法总结。让我们一起来看看html input标签有哪些用法吧</p><p>首先先来说说html input标签的属性：</p><p>1.type：该属性是input标签里唯一的必须输入的属性，当然，也可以不填，默认为type = "text"。具体它有那些值，我们后面再讨论。</p><p>2.required：标记一个字段是否为必须。如果一个字段被标记为required = "required"（严格模式下），或者required（宽松模式下）(ps：下面属性的写法同理，就不一一写出了)，并且这个字段的值为空，或者填入的值是无效值，那么这个表单不能提交。什么是无效值？看pattern属性。</p><p>3.pattern：该属性包含了一个JavaScript风格的正则表达式，输入的内容必须完全匹配该正则表达式，不然就算输入的内容无效。对正则表达式不了解？可以去看看JavaScript 正则表达式。</p><p>4.min max：这两个属性用于日期date时间time等输入，还有number和range。顾名思义，它们的作用是限制最大值，最小值。</p><p>5.step：和max min类似，作用是提供一个可以上下点的按钮，比如当前数字是1，你设置了step = "5"，点一下上的按钮，就变成6了。</p><p>6.placeholder：该属性不多说，大家应该都很熟悉，一般是用来提示用户输入的，当用户真的输入了文字之后，会被输入的文字覆盖。</p><p>7.readonly：顾名思义，该属性会让表单空控件不可编辑。这里的不可编辑不是禁用，只是不能编辑文本而已，比如像单选框radio，复选框checkbox这种，本来就是不可编辑的，所以这个属性对它们来说毫无意义。</p><p>8.disabled：该属性会禁用一个表单元素。这里是禁用，完全禁用掉除了<output>之外的所有表单元素。</p><p>9.maxlength ：该属性用于限制用户输入的最大字数限制。</p><p>10.size：已经没什么时候实际的作用了，控制大小现在几乎都是由CSS控制了。</p><p>11.form：在HTML5中，表单控件已经没有必要嵌套在一个表单中，新的form属性可以把表单元素与页面上的任意的表单关联起来。也可以被嵌套在一个表单中，随着另一个表单提交，代码如下：</p><pre class="brush:html;toolbar:false"><form id="form1"></form>
<p>
<label for="admin">admin</label>
<input type="text" id="admin" form="form1"/>
</p></pre><p>这样，就把form和input联系起来了。如果input没有form属性，那么，它将被关联到离他最近的form表单。</p><p>12.autocomplete：顾名思义，自动完成，用户输入一部分，后面的自动补全。需要浏览器保存用户输入的内容，以便下一次自动补全。</p><p>13.autofocus：该属性指的是表示这个表单控件在页面载入的时候自动获得焦点。</p><p>以上就是html input标签的属性了。</p><p>现在说说input标签的用法：</p><p>先看个html input标签的实例：</p><pre class="brush:html;toolbar:false"><!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>学生网页作业：input标签</title>
<style type="text/css">
</style>
</head>
<body>
<form action="demo_form.asp">
用户名: <input type="text" name="fname"><br>
输入框: <input type="text" name="lname"><br>
<input type="submit" value="提交">
</form>
</body>
</html></pre><p>这个的效果如图：</p><p><img style="max-width:100%!important;height:auto!important;" src="/uploads/allimg/20221027/1-22102G01313596.jpg" title="html input标签的属性有哪些？input标签(图1)" alt="1.jpg"/></p><p>效果还是可以的，也是最简单的输入框的样式，我们今天讲的就要简单的，简单的也表示容易懂。</p><p>来说一说html input标签的用法总结：</p><p><strong>1.文本框：</strong></p><p>在表单中，文本框用来让用户输入字母、数字等等，如用户的姓名，地址等。</p><p>代码格式如下：</p><p><span style="color: rgb(192, 0, 0);"><input type="text" name="..." size="..." maxlength="..." value="..."/></span></p><p><strong>2.密码框：</strong></p><p>是一种特殊的文本域，用于输入密码。</p><p>代码格式如下：</p><p><span style="color: rgb(192, 0, 0);"><input type="password" name="..." size="..." maxlength="..." value="..."/></span></p><p><strong>3.隐藏域：</strong></p><p>是用来收集或发送信息的不可见元素，对于网页的访问者来说，隐藏域是看不见的。当表单被提交时，隐藏域就会将信息用你设置时定义的名称和值发送到服务器上。</p><p>代码格式如下：</p><p><span style="color: rgb(192, 0, 0);"><input type="hidden" name="..." value="..."/></span></p><p><strong>4.单选按钮：</strong></p><p>当需要用户从有限个选项中选择一个时，使用单选按钮。比如我们在注册的时候选择体重。</p><p>代码格式如下：</p><p><span style="color: rgb(192, 0, 0);"><input type="radio" name="..." value="..."/></span></p><p><strong>5.复选框：</strong></p><p>允许在待选项中选中一项以上的选项。每个复选框都是一个独立的元素，都必须有一个独一的名称。</p><p>代码格式如下：</p><p><span style="color: rgb(192, 0, 0);"><input type="checkbox" name="..." value="..."/></span></p><p><strong>6.文件上传框：</strong></p><p>代码格式如下：</p><p><span style="color: rgb(192, 0, 0);"><input type="file" name="..."></span></p><p>注意：利用这项功能时，在 form 标签中要指定method属性。要把method 指定为post, enctype属性指定为 multipart/form-data。</p><p>说明：multipart 控件是否上传多文件</p><p>以上就是本篇关于html input标签的属性介绍，还有关于html input标签的用法总结。</p>
