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
, email
和 password
的输入字段。
设置输入字段的宽度:
<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>
min
和 max
属性
min
和 max
属性设置输入字段的最小值和最大值,适用于输入类型为 number
, range
, date
, datetime-local
, month
, time
和 week
的输入字段。
设置最大日期、最小日期和合法值范围:
<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
属性适用于 email
和 file
输入类型。
接受多个值的文件上传字段:
<form>
<label for="files">请至少选择一个文件:</label>
<input type="file" id="files" name="files" multiple />
</form>
模式属性 pattern
<input>
元素的 pattern
属性设置一个正则表达式,当提交表单时,会根据正则表达式检查输入字段的值。
pattern
属性适用于 text
, date
, search
, url
, tel
, email
和 password
输入类型。
只能包含三个字母(无数字或特殊字符)的输入字段:
<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
属性可与 max
和 min
属性一起使用来创建一系列合法值。
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>
width
和 height
属性
<input type="image">
元素使用 width
和 height
属性设置宽度和高度。
**提示:**始终设置图像的高度和宽度属性。如果设置了高度和宽度,则在加载页面时会保留图像所需的空间。没有这些属性,浏览器不知道图像的大小,也无法为其预留合适的空间,则网页可能在加载过程中闪烁。
定义一个图像作为提交按钮,具有高度和宽度属性:
<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
属性适用于 submit
和 image
输入类型。
带有两个不同的操作提交按钮的 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
属性适用于 submit
和 image
输入类型。
第一个按钮使用默认编码发送数据,第二个使用“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
属性适用于 submit
和 image
输入类型。
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
属性适用于 submit
和 image
输入类型。
具有两个提交按钮的表单,具有不同的目标窗口:
<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>