Text Inputs

优质

小牛编辑

128浏览

2023-12-01

描述 (Description)

Foundation支持输入类型，如text, password, time, email, date, datetime-local, month, number, search, tel, url和week 。 Text area元素用于创建多行文本输入。

在大多数浏览器中， number输入类型元素将显示向上/向下控件，这些控件称为spin buttons 。数字可以在字段内递增和递减。您可以通过将SASS变量$input-number-spinners为false来禁用旋转按钮。

例子 (Example)

以下示例演示了在Foundation中使用input types 。

<html>
   <head>
      <title>Form Text Inputs</title>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/css/foundation.css">
   </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 src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
      <script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.min.js"></script>
      <script>
         $(document).ready(function() {
            $(document).foundation();
         })
      </script>
   </body>
</html>