Foundation - 表單文字輸入

描述

Foundation 支援輸入型別，如text、password、time、email、date、datetime-local、month、number、search、tel、url 和 week。文字區域元素用於建立多行文字輸入。

在大多數瀏覽器中，number 輸入型別元素將顯示上/下控制元件，稱為旋轉按鈕。可以在該欄位內對數字進行遞增和遞減。可透過將 SASS 變數 $input-number-spinners 設定為 false，來停用旋轉按鈕。

示例

以下示例演示瞭如何在 Foundation 中使用輸入型別。

現場演示

<html>
   <head>
      <title>Form Text Inputs</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 = "row">
            <div class = "medium-6 columns">
               <label>Input Text <input type = "text"></label>
            </div>

            <div class = "medium-6 columns">
               <label>Input search <input type = "search"></label>
            </div>
         </div>

         <div class = "row">
            <div class = "medium-4 columns">
               <label>Input time <input type = "time"></label>
            </div>

            <div class = "medium-4 columns">
               <label>Input Date <input type = "date"></label>
            </div>

            <div class = "medium-4 columns">
               <label>Datetime <input type = "datetime-local"></label>
            </div>
         </div>

         <div class = "row">
            <div class = "medium-4 columns">
               <label>Number <input type = "number"></label>
            </div>

            <div class = "medium-4 columns">
               <label>Telephone <input type = "tel"></label>
            </div>

            <div class = "medium-4 columns">
               <label>Month <input type = "month"></label>
            </div>
         </div>

         <div class = "row">
            <div class = "medium-6 columns">
               <label>Input url <input type = "url"></label>
            </div>

            <div class = "medium-6 columns">
               <label>Input week <input type = "week"></label>
            </div>
         </div>

         <div class = "row">
            <div class = "medium-6 columns">
               <label>Email<input type = "email"></label>
            </div>

            <div class = "medium-6 columns">
               <label>Password <input type = "password"></label>
            </div>
         </div>

         <div class = "row">
            <div class = "medium-12 columns">
               <label>Textarea
                  <textarea>Hi .. This is from textarea.....</textarea>
               </label>
            </div>
         </div>
      </form>

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

   </body>
</html>

輸出

讓我們執行以下步驟，檢視給定的上述程式碼如何運作 -

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

foundation_forms.htm

列印頁面

上一個

下一個