HTML - dirname 属性_HTML 菜鸟教程

HTML dirname 属性用于启用元素方向性的提交。

如果存在，表单控件将提交两个名称/值对。第一个是名称和值，第二个是 dirname 的值，作为浏览器在提交表单时发送的值为 ltr（从左到右）或 rtl（从右到左）。

这对于具有不同文本方向的语言特别有用，例如英语（从左到右）和阿拉伯语（从右到左）。

dirname 属性仅适用于 'text' 和 'search' 类型的输入元素以及 <textarea> 元素。

语法

<tag dirname = "value"></tag>

dirname 的值可以是 ltr、rtl 或捕获方向性的隐藏字段的名称。

适用于

下面列出的元素允许使用 HTML dirname 属性。

元素	描述
<input>	HTML <input> 标签用于指定输入字段。
<textarea>	HTML <textarea> 标记用于表示多行纯文本编辑控件。

HTML dirname 属性示例

下面的示例将说明 HTML dirname 属性，我们应该在哪里以及如何使用此属性！

带有文本输入的 Dirname

在以下示例中，我们将在输入 type=text 元素中使用 dirname 属性。

<!DOCTYPE html>
<html lang="en">
<head>
	 <title>HTML 'dirname' Attribute</title>
	 <style>
			form {
				 width: 200px;
				 padding: 20px;
				 background-color: aquamarine;
				 border-radius: 10px;
			}

			label {
				 margin: 5px 5px;
			}

			input {
				 margin: 5px 5px;
				 padding: 8px;
			}

			button {
				 margin: 5px 5px;
				 padding: 8px;
				 cursor: pointer;
				 background-color: white;
				 border: 1px solid white;
				 width: 100px;
				 border-radius: 5px;
			}
	 </style>
</head>
<body>
	 <!--HTML 'dirname' attribute-->
	 <h3>Example of the HTML 'dirname' attribute</h3>
	 <h1>User form</h1>
	 <form>
			<label for="">Name</label>
			<br>
			<input type="text" dirname="ltr" name='uname'>
			<button>Submit</button>
	 </form>
</body>
</html>

Dirname 作为隐藏字段的名称

考虑到另一种情况，我们将使用带有输入 type=search 的 dirname 属性。这里 dirname=“search.dir” 添加了一个名为 search.dir 的隐藏字段，该字段捕获输入文本的方向性（从左到右或从右到左）并发送到服务器。

<!DOCTYPE html>
<html lang="en">
<head>
	 <title>HTML 'dirname' Attribute</title>
	 <style>
			form {
				 background-color: aliceblue;
				 width: 50%;
				 margin: 50px auto;
				 display: grid;
				 place-items: center;
				 border-radius: 10px;
			}

			input {
				 padding: 15px;
				 width: 500px;
			}

			button {
				 width: 200px;
				 padding: 10px;
				 margin: 15px;
				 background-color: azure;
				 border: 1px solid rgb(81, 76, 76);
				 cursor: pointer;
				 font-size: 18px;
			}
	 </style>
</head>
<body>
	 <!--HTML 'dirname' attribute-->
	 <h3>Example of the HTML 'dirname' attribute</h3>
	 <form>
			<h1>Search Bar</h1>
			<input type="search" 
				 dirname="search.dir" 
				 name='search' 
				 placeholder="Search...">
			<button>Search</button>
	 </form>
</body>
</html>

带有 textarea 的 Dirname 属性

让我们看一下以下示例，我们将在其中将 dirname 属性与 textarea 元素一起使用。

<!DOCTYPE html>
<html lang="en">
<head>
	 <title>HTML 'dirname' Attribute</title>
	 <style>
			form {
				 background-color: rgb(128, 241, 241);
				 padding: 10px;
				 width: 33%;
				 border-radius: 10px;
			}

			textarea {
				 padding: 8px 8px;
				 width: 70%;
			}

			p {
				 font-size: 20px;
			}

			button {
				 padding: 10px;
				 width: 100px;
				 background-color: white;
				 color: rgb(16, 16, 16);
				 border: 2px solid rgb(32, 254, 254);
				 cursor: pointer;
				 font-size: 16px;
			}
	 </style>
</head>
<body>
	 <!--HTML 'dirname' attribute-->
	 <h3>Example of the HTML 'dirname' attribute</h3>
	 <form>
			<p>Feedback form :-</p>
			<textarea name="feedback" 
				 dirname="feedback.dir" 
				 cols="30" 
				 rows="5" 
				 placeholder="Write your feedback...">
				 </textarea>
			<br>
			<button>Submit</button>
	 </form>
</body>
</html>

支持的浏览器

浏览器
是否支持	Yes	No	No	Yes	Yes

<< HTML - defer 属性 HTML - disabled 属性 >>