jQuery Mobile - Estructura del formulario

Descripción

Se utiliza para crear un diseño de formulario para recopilar la entrada del usuario. los<form>El elemento debe contener el atributo de acción y método que se envía a través de HTTP POST o GET. Se pueden utilizar los siguientes controles de formulario para crear la estructura.

Entrada de texto
Seleccionar entrada
Entrada de casilla de verificación
Entrada de radio
Entrada deslizante
Entrada de búsqueda

Ejemplo

El siguiente ejemplo demuestra el uso de la estructura 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 Structure</h2>
         </div>
      
         <div data-role = "main" class = "ui-content">
            <form method = "post" action="demo.php">
               <label for = "fname">Name</label>
                  <input type = "text" name = "fname" id = "fname" 
                     placeholder = "Full Name">

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

               <label for = "select">Select City</label>
               <select name = "select" id = "select">
                  <option value = "1">Belgaum</option>
                  <option value = "2">Pune</option>
                  <option value = "3">Chennai</option>
                  <option value = "4">Bangalore</option>
                  <option value = "5">Mumbai</option>
               </select>

               Flipswitch
               <input type = "checkbox" data-role = "flipswitch"><br/>

               Gender
               <label for = "radio1">
                  <input type = "radio" name = "radio-choice-0" id = "radio1">Male</input>
               </label>
               
               <label for = "radio2">
                  <input type = "radio" name = "radio-choice-0" id = "radio2">Female</input>
               </label>
               
               <label for = "radio3">
                  <input type = "radio" name = "radio-choice-0" id = "radio3">Other</input   >
               </label>

               Education Qualification
               <label for = "checkbox1">
                  <input type = "checkbox" id = "checkbox1">BE
               </label>
               
               <label for = "checkbox2">
                  <input type = "checkbox" id = "checkbox2">BCA
               </label>
               
               <label for = "checkbox3">
                  <input type = "checkbox" id = "checkbox3">BBA
               </label>
               
               <label for = "checkbox4">
                  <input type = "checkbox" id = "checkbox4">MBA
               </label>
               
               <label for = "checkbox5">
                  <input type = "checkbox" id = "checkbox5">MCA
               </label>
            </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_structure.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/form_structure.html y se mostrará el siguiente resultado.

↰ Previous page