HTML - dirname 属性

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

在下面的例子中，我们将 input 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

考虑另一种情况，我们将使用 input 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 属性

让我们看一下下面的例子，我们将在这个例子中使用 textarea 元素的 dirname 属性。

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

支持的浏览器

属性
dirname	是	否	否	是	是

html_attributes_reference.htm

打印页面