Html 简明教程
HTML - Input Attributes
HTML input attributes 用于定义 * <input>* 元素的特征和行为。
这些属性与不同类型的输入字段结合使用，如文本、电子邮件、密码、日期、数字等等。注意，Input 元素用于创建基于 Web 的表单的交互式控件，以便它可以接受用户的数据。
<input> 元素只需要一个起始标签。在本教程中，我们将探讨与 <input> 元素结合使用的属性。
以下是 <input> 元素的属性
Attribute |
Description |
HTML input type 属性的 HTML input 标签指定要显示的输入元素的类型。 |
|
HTML input name 属性用于指定元素的名称。 |
|
HTML input value 属性用于在页面加载时定义输入字段的初始值。 |
|
HTML input size 属性指定输入字段的宽度，以字符数为单位。 |
|
HTML input maxlength 属性用于指定输入文本的最大字符数限制。 |
|
HTML input readonly 属性用于指定具有不可编辑文本的输入字段。 |
|
HTML input disabled 是一个布尔属性，用于使表单元素不可交互。 |
|
HTML input min 属性指定输入字段可以接受的最小值。 |
|
HTML input max 属性指定输入字段可以接受的最大值。 |
|
HTML input accept 属性用于定义服务器将接受的文件扩展名类型。 |
|
HTML input multiple 属性是一个布尔属性，它允许表单控件接受多个值。 |
|
HTML input placeholder 属性用于定义一个简短提示，帮助用户输入数据。 |
|
HTML input required 属性用于指定在提交表单之前必须填写的输入字段。 |
|
HTML input autofocus 属性是一个布尔属性，用于指定页面加载后应自动聚焦元素。 |
|
HTML input list 属性用于指定用户可从中选择的预定义选项列表。 |
Examples of Attributes of Input Tag
以下示例将说明 Input 标签的所有属性，以及我们应该在哪里和如何使用该属性！
Type and Value Attributes of Input Tag
在此示例中，我们在 HTML 表单中使用对应的 value 属性演示了不同类型的输入字段。我们提供个输入字段的值将是默认值，用户如果希望可以编辑它。
<!DOCTYPE html>
<html>
<head>
<title>Input Type Attribute Examples</title>
</head>
<body>
<h1>HTML Input Type Attribute Examples</h1>
<form>
<!-- Text Input -->
<label for="text">Text:</label>
<input type="text"
id="text"
name="text"
value="Default Text">
<br><br>
<!-- Password Input -->
<label for="password">Password:</label>
<input type="password"
id="password"
name="password"
value="password123">
<br><br>
<!-- Range Input -->
<label for="range">Range:</label>
<input type="range"
id="range"
name="range"
min="0"
max="100"
value="50">
<br><br>
<!-- Datetime-local Input -->
<label for="datetime">Datetime-local:</label>
<input type="datetime-local"
id="datetime"
name="datetime"
value="2023-06-01T12:00">
<br><br>
<!-- Submit Button -->
<input type="submit" value="Submit">
</form>
</body>
</html>Name attribute for input Tag
在此示例中，我们将 name 属性与输入标签一起使用，以说明用户名和电子邮件的名称。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Form Example with Name Attribute</title>
<script>
function showAlert() {
var name = document.getElementById('name').value;
var email = document.getElementById('email').value;
alert('Name: ' + name + '\nEmail: ' + email);
}
</script>
</head>
<body>
<h1>Contact Us</h1>
<form onsubmit="return false;">
<label for="name">Name:</label>
<input type="text"
id="name"
name="user_name">
<br><br>
<label for="email">Email:</label>
<input type="email"
id="email"
name="user_email">
<br><br>
<button type="button" onclick="showAlert()">
Submit
</button>
</form>
</body>
</html>Size and maxlength attributes of input Tag
在此示例中，我们将了解 input 元素的 size 和 maxlength 属性之间的区别。
<!DOCTYPE html>
<html>
<head>
<title>Size and Maxlength Attribute</title>
</head>
<body>
<h1>HTML Size and Maxlength Attribute</h1>
<h2>Size Attribute</h2>
<p>
The <code>size</code> attribute specifies
the visible width of the input field in characters.
</p>
Size 10:
<input type="text"
name="size-example"
size="10"
value="1234567890">
<h2>Maxlength Attribute</h2>
<p>
The <code>maxlength</code> attribute specifies
the maximum number of characters that can be entered in
the input field.
</p>
Maxlength 10:
<input type="text"
maxlength="10"
value="1234567890">
<h2>Combined Size and Maxlength</h2>
<p>
Here is an example combining both <code>size</code>
and <code>maxlength</code> attributes.
</p>
Size 10, Maxlength 5:
<input type="text"
size="10"
maxlength="5"
value="12345">
</body>
</html>Disabled and readonly attributes of input Tag
下面的示例显示了 "readonly" 元素的 "disabled" 属性和 <input> 属性之间的区别
<!DOCTYPE html>
<html>
<head>
<title>Readonly and Disabled Attributes </title>
</head>
<body>
<h1>HTML Readonly and Disabled Attributes </h1>
<h2>Readonly Attribute</h2>
<p>
The <code>readonly</code> attribute allows
the user to view the content but not modify it.
</p>
Readonly:
<input type="text" value="Readonly Text" readonly>
<h2>Disabled Attribute</h2>
<p>
The <code>disabled</code> attribute makes the
input field unmodifiable and prevents user interaction.
</p>
Disabled:
<input type="text" value="Disabled Text" disabled>
</body>
</html>Min and max attributes of input Tag
在下面的示例中，我们将看到如何在 input 标签中使用 min 和 max 属性。我们正通过使用 min 和 max 属性将最少工作时间指定为 3，并将最长时间指定为 8。
<!DOCTYPE html>
<html>
<head>
<title>The min and max Attribute</title>
</head>
<body>
<form >
Emp. Name:
<input type = "text"
name = "your_name"
placeholder = "your name..."/>
<br><br>
Organization:
<input type = "text"
name = "organization"
value = "Tutorialspoint"
readonly/>
<br><br>
Working Hrs:
<input type = "number"
name = "working_hours"
min="3"
max="8"/>
</form>
</body>
</html>Accept and Multiple Attributes of Input Tag
在此示例中，我们将看到如何使用 input 标签内部的 accept 和 multiple 属性。
<!DOCTYPE html>
<html>
<head>
<title>Multiple and Accept Attributes</title>
</head>
<body>
<h1>HTML Multiple and Accept Attributes</h1>
<h2>Multiple Attribute</h2>
<p>
The <code>multiple</code> attribute allows the
user to select multiple files.
</p>
Select multiple files:
<input type="file"
id="multiple-example"
name="files"
multiple>
<h2>Accept Attribute</h2>
<p>
The <code>accept</code> attribute specifies the
types of files that the server accepts (that can
be submitted through file upload).
</p>
Select image files only:
<input type="file"
id="accept-example"
name="images"
accept="image/*">
</body>
</html>Placeholder and required attributes of input Tag
在以下示例中，我们在 name 输入字段中使用占位符属性，而在电子邮件和 DOB 字段中使用必需属性以表示字段必须包含某些值以便成功提交表单。
<!DOCTYPE html>
<html>
<head>
<title>Placeholder and Required Attributes</title>
</head>
<body>
<h3>Placeholder and Required Attributes</h3>
<form onsubmit="return false;" >
<p>The * Star represents mandatory field</p>
<!-- Placeholder for name entry -->
Emp. Name:
<input type="text"
id="emp-name"
name="emp-name"
placeholder="Your Name">
<br><br>
<!-- Email and DOB are mandatory -->
Emp. Email:
<input type="email"
id="emp-email"
name="emp-email"
placeholder="example@email.com"
required>*
<br><br>
Date of Birth:
<input type="date" required>*
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>Autofocus attribute of input Tag
以下是对焦自动属性的示例。在页面完全加载时，会自动聚焦“雇员姓名”字段。
<!DOCTYPE html>
<html>
<head>
<title>The autofocus Attribute</title>
</head>
<body>
<form onsubmit="return false;">
Emp. Name:
<input type = "text"
name = "your_name"
autofocus/>
<br><br>
Emp. Email:
<input type = "email"
name = "mail"
placeholder = "example@email.com" />
<br><br>
<input type = "submit">
</form>
</body>
</html>List attribute of input Tag
在下面的示例中，我们对 input type=text 使用了“list”属性，并提及列表属性的值为 datalist 的 id 名称。
<!DOCTYPE html>
<html lang="en">
<body>
<p>
Click on input field and select
from dropdown:
</p>
<input type="text" list="fruits">
<datalist id='fruits'>
<option value="Apple"></option>
<option value="Banana"></option>
<option value="Orange"></option>
<option value="Grapes"></option>
<option value="Pears"></option>
</datalist>
</body>
</html>