Foundation - Entradas de texto de formularios

Descripción

Foundation admite tipos de entrada como texto, contraseña, hora, correo electrónico, fecha, fecha y hora local, mes, número, búsqueda, teléfono, url y semana . Los elementos del área de texto se utilizan para crear una entrada de texto de varias líneas.

En la mayoría de los navegadores, los elementos de tipo de entrada numérica mostrarán controles arriba / abajo, que se denominan botones giratorios . Los números se pueden incrementar y disminuir dentro del campo. Puede deshabilitar los botones de giro configurando la variable $ input-number-spinners de SASS en falso.

Ejemplo

El siguiente ejemplo demuestra el uso de tipos de entrada en Foundation.

<html>
   <head>
      <title>Form Text Inputs</title>
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/foundation.min.css" integrity="sha256-1mcRjtAxlSjp6XJBgrBeeCORfBp/ppyX4tsvpQVCcpA= sha384-b5S5X654rX3Wo6z5/hnQ4GBmKuIJKMPwrJXn52ypjztlnDK2w9+9hSMBz/asy9Gw sha512-M1VveR2JGzpgWHb0elGqPTltHK3xbvu3Brgjfg4cg5ZNtyyApxw/45yHYsZ/rCVbfoO5MSZxB241wWq642jLtA==" 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/[email protected]/dist/js/foundation.min.js" integrity="sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs= sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw==" 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>

Salida

Realicemos los siguientes pasos para ver cómo funciona el código anterior:

Guarde el código html dado anteriormente forms_text_input.html archivo.
Abra este archivo HTML en un navegador, se muestra una salida como se muestra a continuación.

↰ Previous page