jQuery Mobile - Entradas de formulario

Descripción

los <input>La etiqueta es un control que permite al usuario ingresar datos. Hay diferentes tipos de entrada presentes, es decir, texto, búsqueda, correo electrónico, fecha, casilla de verificación, radio, etc.

Ejemplo

El siguiente ejemplo demuestra el uso de entradas de formulario en jQuery Mobile.

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>
   
   <body>
      <div data-role = "page">
         <div data-role = "header">
            <h2>Form Inputs</h2>
            <input type = "search" name = "src">
         </div>
         
         <div data-role = "main" class = "ui-content">
            <form method = "post" action = "jquery_mobile/demo1.php">
               <label for = "fname">First Name</label>
               <input type = "text" name = "fname">

               <label for = "email">Email Address</label>
               <input type = "email" name = "email">

               <label for = "date">Birth Date</label>
               <input type = "date" name = "date">

               <label for = "file">Upload File</label>
               <input type = "file" name = "file">

               Select Car
               <fieldset data-role = "controlgroup" name = "checkbox">
                  <input type = "checkbox" name = "checkbox" id = "checkbox">
                  <label for = "checkbox">BMW</label>

                  <input type = "checkbox" name = "checkbox" id = "checkbox1">
                  <label for = "checkbox1">Audi</label>

                  <input type = "checkbox" name = "checkbox" id = "checkbox2">
                  <label for = "checkbox2">Skoda</label>
               </fieldset>

               Gender
               <fieldset data-role = "controlgroup">
                  <input type = "radio" name = "radio" id = "radio">
                  <label for = "radio">Male</label>

                  <input type = "radio" name = "radio" id = "radio1">
                  <label for = "radio1">Female</label>
               </fieldset>

               <label for = "slider">Range</label>
               <input type = "range" name = "slider" id = "slider" 
                  value = "20" min = "0" max = "100" data-highlight = "true">

               <input type = "submit" value = "Submit" data-inline = "true">
            </form>
         </div>
      </div>
      
   </body>
</html>

Salida

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

Guarde el código html anterior como form_inputs.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/form_inputs.html y se mostrará el siguiente resultado.

↰ Previous page