HTML - 输入属性

上一页
下一页

HTML input属性用于定义 <input> 元素的特征和行为。

这些属性用于不同类型的输入字段，如文本、电子邮件、密码、日期、数字等。请注意，Input 元素用于为基于 Web 的窗体创建交互式控件，以便它可以接受来自用户的数据。

<input> 元素只需要一个开始标记。在本教程中，我们将探讨用于 <input> 元素的属性。

以下是 <input> 元素的属性

属性 描述
type HTML 输入标记的 HTML 输入类型属性指定要显示的输入元素的类型。
name HTML 输入名称属性用于指定元素的名称。
value HTML 输入值属性用于定义页面加载时输入字段的初始值。
size HTML 输入大小根据字符数来属性输入字段的宽度。
maxlength HTML 输入 maxlength 属性用于指定输入文本的最大字符数限制。
readonly HTML 输入只读属性用于指定具有不可编辑文本的输入字段。
disabled 禁用 HTML 输入是一个布尔属性，用于使表单元素非交互式。
min HTML input min 属性指定输入字段可以接受的最小值。
max HTML input max 属性指定输入字段可以接受的最大值。
accept HTML 输入接受属性用于定义服务器将接受的文件扩展名类型。
multiple HTML 输入多属性是一个布尔属性，它允许表单控件接受多个值。
placeholder HTML 输入占位符属性用于定义帮助用户输入数据的简短提示。
required HTML input required 属性用于指定提交表单前必须填写的输入字段。
autofocus HTML 输入自动对焦属性是一个布尔属性，用于指定元素在加载页面后应自动聚焦。
list HTML 输入列表属性用于指定用户可以从中选择的预定义选项列表。

<input>的属性示例

下面的例子将说明 Input 标签的所有属性，我们应该在哪里以及如何使用这个属性！

<input>标签的类型和值属性

在此示例中，我们演示了不同类型的<input>标签及其在 HTML 表单中的相应值属性。我们在<input>标签中提供的值将是默认值，用户可以根据需要对其进行编辑。


<!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>

<input>标签的 Name 属性

在此示例中，我们将使用带有<input>标签的 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>

<input>标签的 size 和 maxlength 属性

在此示例中，我们将看到<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>
 

<input>标签的禁用和只读属性

以下示例显示了 <input> 元素的“readonly”属性和“disabled”属性用法之间的差异


<!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>

<input>标签的最小和最大属性

在下面的示例中，我们将看到如何在<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 = "qikepu" 
						 readonly/>
			<br><br>
			Working Hrs: 
			<input type = "number" 
						 name = "working_hours" 
						 min="3" 
						 max="8"/>
	 </form>
</body>
</html>

<input>标签的 Accept 和多个属性

在此示例中，我们将了解如何在<input>标签中使用 accept 和多个属性。


<!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>

<input>标签的占位符和必需属性

在以下示例中，我们将 placeholder 属性用于 name 输入字段和 required 属性，用于电子邮件和 DOB 字段中的 required 属性，以表示该字段必须包含一些值才能成功提交表单。


<!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>

<input>标签的自动对焦属性

以下是自动对焦属性的示例。当页面完全加载时，Emp. Name 字段将自动聚焦。


<!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>

<input>标签的 List 属性

在以下示例中，我们将“list”属性与 list 属性的输入 type=text 和 mention value of 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>
打印本页
上一页
下一页