基礎 - 內聯標籤和按鈕

上一個

下一個

描述

額外的文字或控制元件可以附加到輸入欄位的左側/右側。將元素包含在容器 .input-group 中，然後向其中的元素新增以下類 −

input-group-field − 新增到文字欄位中。
input-group-label − 新增到文字標籤中。
input-group-button − 新增到按鈕中。

示例

以下示例演示瞭如何在 Foundation 中使用標籤定位。

即時演示

<html>
   <head>
      <title>Form Inline Labels and Buttons</title>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/css/foundation.min.css" crossorigin="anonymous">

      <!-- Compressed JavaScript -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js" crossorigin="anonymous"></script>

   </head>

   <body>
      <form>
         <div class = "input-group">
            <span class = "input-group-label">$</span>
            <input class = "input-group-field" type = "number">
            <a class = "input-group-button button">Submit</a>
         </div>
      </form>

      <script>
         $(document).ready(function() {
            $(document).foundation();
         })
      </script>
   </body>
</html>

輸出

讓我們執行以下步驟，瞭解上面給出的程式碼是如何工作的 −

儲存上面給出的 html 程式碼 form_inline_labels_buttons.html 檔案。
在瀏覽器中開啟此 HTML 檔案，輸出如下所示。

foundation_forms.htm

列印頁面

上一個

下一個