HTML input 元素属性介绍

本文介绍了 HTML input 元素的不同属性,以及各个属性的适用场景和用法。

<input> 元素有多种不同的输入类型,也有很多属性,并且不同输入类型的属性设置可能并不相同,本文介绍了 HTML <input> 元素的不同属性,以及各个属性的适用场景和用法。

值属性 value

<input> 元素的 value 属性设置输入字段的初始值。

具有初始(默认)值的输入字段

<form>
  <label for="name">姓名:</label><br />
  <input type="text" id="name" name="name" value="张三" /><br />
  <label for="age">年龄:</label><br />
  <input type="text" id="age" name="age" value="19" />
</form>

只读属性 readonly

<input> 元素的 readonly 属性设置输入字段是只读的。

只读输入字段的值是无法修改的,但是,用户可以使用 Tab 键切换到它、突出显示它并从中复制文本。

提交表单数据时,只读输入字段会作为表单数据一并提交。

只读输入字段:

<form>
  <label for="name">姓名:</label><br />
  <input type="text" id="name" name="name" value="张三" readonly /><br />
  <label for="age">年龄:</label><br />
  <input type="text" id="age" name="age" value="19" />
</form>

禁用属性 disabled

<input> 元素的 disabled 属性设置输入字段是禁用的,不可点击,也不可编辑。

提交表单数据时,禁用输入字段不会被提交。

<form>
  <label for="name">姓名:</label><br />
  <input type="text" id="name" name="name" value="张三" disabled /><br />
  <label for="age">年龄:</label><br />
  <input type="text" id="age" name="age" value="19" />
</form>

尺寸大小 size

<input> 元素的 size 属性设置输入字段的可见宽度(以字符为单位),默认值为 20。

size 属性适用于输入类型为 text, search, tel, url, emailpassword 的输入字段。

设置输入字段的宽度

<form>
  <label for="name">姓名:</label><br />
  <input type="text" id="name" name="name" size="50" /><br />
  <label for="pin">PIN:</label><br />
  <input type="text" id="pin" name="pin" size="4" />
</form>

maxlength 属性

<input> 元素的 maxlength 属性设置了输入字段允许的最大字符数。

设置输入字段的最大长度:

<form>
  <label for="name">姓名:</label><br />
  <input type="text" id="name" name="name" size="50" /><br />
  <label for="pin">PIN:</label><br />
  <input type="text" id="pin" name="pin" maxlength="4" size="4" />
</form>

minmax 属性

minmax 属性设置输入字段的最小值和最大值,适用于输入类型为 number, range, date, datetime-local, month, timeweek 的输入字段。

设置最大日期、最小日期和合法值范围:

<form>
  <label for="datemax">输入早于 1980-01-01 的日期:</label>
  <input type="date" id="datemax" name="datemax" max="1979-12-31" /><br /><br />

  <label for="datemin">输入晚于 2000-01-01 的日期:</label>
  <input type="date" id="datemin" name="datemin" min="2000-01-02" /><br /><br />

  <label for="quantity">输入 1 - 5 之间的数字</label>
  <input type="number" id="quantity" name="quantity" min="1" max="5" />
</form>

多值属性 multiple

<input> 元素的 multiple 属性设置允许用户在输入字段中输入多个值。

multiple 属性适用于 emailfile 输入类型。

接受多个值的文件上传字段:

<form>
  <label for="files">请至少选择一个文件:</label>
  <input type="file" id="files" name="files" multiple />
</form>

模式属性 pattern

<input> 元素的 pattern 属性设置一个正则表达式,当提交表单时,会根据正则表达式检查输入字段的值。

pattern 属性适用于 text, date, search, url, tel, emailpassword 输入类型。

只能包含三个字母(无数字或特殊字符)的输入字段:

<form>
  <label for="country_code">国家代码</label>
  <input type="text" id="country_code" name="country_code" pattern="[A-Za-z]{3}" title="只能输入3微字母的国家代码" />
</form>

占位符属性

<input> 元素的 placeholder 属性设置了一个简短的提示,用于描述输入字段的样例或预期的格式。

在用户输入值之前, placeholder 值会显示在输入字段中。

placeholder 属性适用于 text, search, url, tel, email, password 输入类型。

带有占位符文本的输入字段:

<form>
  <label for="phone">输入电话号码:</label>
  <input type="tel" id="phone" name="phone" placeholder="010-12345678" pattern="[0-9]{3}-[0-9]{8}" />
</form>

required 属性

<input> 元素的 required 属性指示该输入字段必须填写,表单提交之前会检查此属性。

required 属性适用于 text, search, url, tel, email, password, date, datetime-local, month, time, week, number, checkbox, radio, file 输入类型。

必填字段:

<form>
  <label for="username">用户名:</label>
  <input type="text" id="username" name="username" required />
</form>

步长属性 step

<input> 元素的 step 属性设置输入字段的合法数字间隔。示例:如果 step=“3”,则合法数字可以是 -3、0、3、6 等。

step 属性可与 maxmin 属性一起使用来创建一系列合法值。

step 属性适用于 number, range, date, datetime-local, month, time, week 输入类型。

具有设置合法数字间隔的输入字段:

<form>
  <label for="points">数量:</label>
  <input type="number" id="points" name="points" step="3" />
</form>

自动对焦属性 autofocus

<input> 元素的 autofocus 属性设置输入字段应在页面加载时自动获得焦点。

让“名字”输入字段在页面加载时自动获得焦点:

<form>
  <label for="name">姓名:</label><br />
  <input type="text" id="name" name="name" autofocus /><br />
  <label for="age">年龄:</label><br />
  <input type="text" id="age" name="age" />
</form>

widthheight 属性

<input type="image"> 元素使用 widthheight 属性设置宽度和高度。

**提示:**始终设置图像的高度和宽度属性。如果设置了高度和宽度,则在加载页面时会保留图像所需的空间。没有这些属性,浏览器不知道图像的大小,也无法为其预留合适的空间,则网页可能在加载过程中闪烁。

定义一个图像作为提交按钮,具有高度和宽度属性:

<form>
  <label for="name">姓名:</label>
  <input type="text" id="name" name="name" /><br /><br />
  <label for="age">年龄:</label>
  <input type="text" id="age" name="age" /><br /><br />
  <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48" />
</form>

list 属性

<input> 元素通过 list 属性指定预定义的选项列表 <datalist> 元素。

使用 <datalist> 中具有预定义列表的 <input> 元素:

<form>
  <input list="browsers" />
  <datalist id="browsers">
    <option value="Internet Explorer"></option>
    <option value="Firefox"></option>
    <option value="Chrome"></option>
    <option value="Opera"></option>
    <option value="Safari"></option>
  </datalist>
</form>

自动完成属性 autocomplete

<input> 元素的 autocomplete 属性设置表单或输入字段是否应打开或关闭自动完成功能。

自动完成允许浏览器预测值。当用户开始在字段中键入时,浏览器应根据先前键入的值显示用于填充该字段的选项。

autocomplete 属性适用 text, search, url, tel, email, password, date, datetime-local, month, time, week, range, color 输入类型。

为一个输入字段打开和关闭自动完成功能的 HTML 表单:

<form action="/action_page.php" autocomplete="on">
  <label for="name">姓名:</label>
  <input type="text" id="name" name="name" /><br /><br />
  <label for="age">年龄:</label>
  <input type="text" id="age" name="age" /><br /><br />
  <label for="email">Email:</label>
  <input type="email" id="email" name="email" autocomplete="off" /><br /><br />

  <input type="submit" value="Submit" />
</form>

! **提示:**在某些浏览器中,您可能需要在设置中激活自动完成功能才能使其工作。

form 属性

<input> 元素通过 form 属性指定所属的表单,该属性的值必须等于它所属的 <form> 元素的 id 属性。通过这个属性,让不在 <form> 容器中的的元素仍然是表单的一部分。

位于 HTML 表单之外的输入字段:

<form action="/action_page.php" id="form1">
  <label for="name">姓名:</label> <input type="text" id="name" name="name" /><br /><br />
  <input type="submit" value="Submit" />
</form>

<label for="age">年龄:</label>
<input type="text" id="age" name="age" form="form1" />

formaction 属性

按钮的 formaction 属性指定表单处理程序的 URL,此属性会覆盖 <form> 元素的 action 属性。

formaction 属性适用于 submitimage 输入类型。

带有两个不同的操作提交按钮的 HTML 表单:

<form action="/action_page.php">
  <label for="name">姓名:</label>
  <input type="text" id="name" name="name" /><br /><br />
  <label for="age">年龄:</label>
  <input type="text" id="age" name="age" /><br /><br />

  <input type="submit" value="提交" />
  <input type="submit" formaction="/action_page2.php" value="提交到另一个表单处理程序" />
</form>

formenctype 属性

按钮的 formenctype 属性指定提交表单时对数据的编码方法(仅适用于 POST 方法),此属性会覆盖 <form> 元素的 enctype 属性。

formenctype 属性适用于 submitimage 输入类型。

第一个按钮使用默认编码发送数据,第二个使用“multipart/form-data”编码数据:

<form action="/action_page_binary.asp" method="post">
  <label for="name">姓名:</label>
  <input type="text" id="name" name="name" /><br /><br />

  <input type="submit" value="Submit" />
  <input type="submit" formenctype="multipart/form-data" value="Submit as Multipart/form-data" />
</form>

formmethod 属性

按钮的 formmethod 属性指定发送表单的方法,此属性会覆盖 <form> 元素的 method 属性。

formmethod 属性适用于 submitimage 输入类型。

GET 方法注意事项:

  • 将表单数据以 名称/值 对的形式附加到 URL
  • 切勿使用 GET 发送敏感数据,因为提交的表单数据在 URL 中可见
  • URL 的长度有限制(2048 个字符)
  • GET 对于用户想要为结果添加书签的表单提交很有用
  • GET 适用于非安全数据,例如 Google 中的查询字符串

POST 注意事项:

  • 在 HTTP 请求的正文中附加表单数据(提交的表单数据未显示在 URL 中)
  • POST 没有大小限制,可用于发送大量数据。
  • 使用 POST 提交的表单无法添加书签

第一个按钮使用 GET 发送表单数据,第二个使用 POST 发送表单数据:

<form action="/action_page.php" method="get">
  <label for="name">姓名:</label>
  <input type="text" id="name" name="name" /><br /><br />
  <label for="age">年龄:</label>
  <input type="text" id="age" name="age" /><br /><br />

  <input type="submit" value="使用 GET 提交" />
  <input type="submit" formmethod="post" value="使用 POST 提交" />
</form>

formtarget 属性

按钮的 formtarget 属性指定发送表单的方法,此属性会覆盖 <form> 元素的 target 属性。

formtarget 属性适用于 submitimage 输入类型。

具有两个提交按钮的表单,具有不同的目标窗口:

<form action="/action_page.php">
  <label for="name">姓名:</label>
  <input type="text" id="name" name="name" /><br /><br />
  <label for="age">年龄:</label>
  <input type="text" id="age" name="age" /><br /><br />

  <input type="submit" value="当前窗口提交表单" />
  <input type="submit" formtarget="_blank" value="表单提交到新窗口/新标签" />
</form>

formnovalidate 属性

按钮的 formnovalidate 属性指定发送表单的方法,此属性会覆盖 <form> 元素的 novalidate 属性。

formnovalidate 属性适用于 submit 输入类型。

带有两个提交按钮的表单(带验证和不带验证):

<form action="/action_page.php">
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email" /><br /><br />

  <input type="submit" value="校验后提交" />
  <input type="submit" formnovalidate="formnovalidate" value="不校验提交" />
</form>