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

列印頁面