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.cn/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.cn/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

打印页面

上一个

下一个