Html 简明教程
HTML - Input Attributes
HTML input attributes 用于定义 * <input>* 元素的特征和行为。
HTML input attributes are used to define the characteristics and behavior of the <input> element.
这些属性与不同类型的输入字段结合使用，如文本、电子邮件、密码、日期、数字等等。注意，Input 元素用于创建基于 Web 的表单的交互式控件，以便它可以接受用户的数据。
These attributes are used with the different types of input fields such as text, email, password, date, number and so forth. Note that the Input element is used to create interactive controls for the web-based forms so that it can accept data from the user.
<input> 元素只需要一个起始标签。在本教程中，我们将探讨与 <input> 元素结合使用的属性。
The <input> element requires only an opening tag. In this tutorial, we are going to explore the attributes that are used with <input> element.
以下是 <input> 元素的属性
Following are the attributes of the <input> element
Attribute |
Description |
HTML input type attribute of the HTML input tag specifies the type of input element to display. |
|
HTML input name attribute is used to specify the name of an element. |
|
HTML input value attribute is used to define the initial value of the input field when the page loads. |
|
HTML input size attribute the width of the input field in terms of the number of characters. |
|
HTML input maxlength attribute is used to specify maximum characters limit for input text. |
|
HTML input readonly attribute is used to specify input fields with uneditable texts. |
|
HTML input disabled is a boolean attribute that is used to make form elements non-interactive. |
|
HTML input min attribute specifies the minimum value that an input field can accept. |
|
HTML input max attribute specifies the maximum value that an input field can accept. |
|
HTML input accept attribute is used to define what file extension type the server will accept. |
|
HTML input multiple attribute is a Boolean attribute, that allows form controls to accept more than one value. |
|
HTML input placeholder attribute is used to define a short hint that helps the user with data entry. |
|
HTML input required attribute is used to specify input field must be filled before submitting form. |
|
HTML input autofocus attribute is a boolean attribute that is used to specify that an element should be autofocused after the page has loaded. |
|
HTML input list attribute is used to specify a list of predefined options that the user can select from.. |
Examples of Attributes of Input Tag
以下示例将说明 Input 标签的所有属性，以及我们应该在哪里和如何使用该属性！
Below examples will illustrate the all the attributes of Input tag, where and how we should use this attribute!
Type and Value Attributes of Input Tag
在此示例中，我们在 HTML 表单中使用对应的 value 属性演示了不同类型的输入字段。我们提供个输入字段的值将是默认值，用户如果希望可以编辑它。
In this example we demonstrate different types of input fields with their corresponding value attributes in an HTML form. The value we provided at input field will be default value, and user can edit it if wanted.
<!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 属性与输入标签一起使用，以说明用户名和电子邮件的名称。
In this example,we are going to use the name attribute with the input tag to mention name for username and email.
<!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 属性之间的区别。
In this example we will see the difference between size and maxlength attributes of input element.
<!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> 属性之间的区别
Following example shows the difference between usage of "readonly" attribute and "disabled" attribute of <input> element
<!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。
In the following example, we will see how to use min and max attributes in input tag. We are mentioning the minimum working hours as 3 and maximum as 8 by using the min and max attributes.
<!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 属性。
In this example we will see how to use accept and multiple attributes inside input tag.
<!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 字段中使用必需属性以表示字段必须包含某些值以便成功提交表单。
In the following example, we are using the placeholder attribute for the name input field and required attribute in email and DOB field to signifies that the field must contain some values for the form to be successfully submitted.
<!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
以下是对焦自动属性的示例。在页面完全加载时，会自动聚焦“雇员姓名”字段。
Following is the example of autofocus attribute. When the page loaded completely the Emp. Name field will be automatically focused.
<!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 名称。
In the following example, we are using the ‘list’ attribute with the input type=text and mention value of list attribute as id name of datalist.
<!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>