jueves, 8 de enero de 2015

Curso de jQuery Mobile 7 - Campos de texto y algunos elementos HTML5




En esta parte del tutorial veremos como trabajar con los inputText y algunos ejemplos con elementos y atributos HTML5.

Código del capítulo. inputtext.php ...


<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <title>InputText</title>
 <link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.4.5.css">
 <script src="jquery.mobile/jquery.js"></script>
 <script src="jquery.mobile/jquery.mobile-1.4.5.js"></script>
</head>
<body>
 <div data-role="page" data-theme="a">
 
  <div data-role="header">
   <h1>InputText</h1>
  </div>
 
  <div data-role="main">
   <div class="ui-content">
    <form method="POST">
    
     <label for="text1">Campo de texto básico</label>
     <input type="text" name="text1" placeholder="Campo de texto básico">
     
     <label for="text2">Campo de texto con botón para eliminar contenido</label>
     <input type="text" name="text2" placeholder="Escribe algo" data-clear-btn="true">
     
     <label for="text3">Campo de búsqueda</label>
     <input type="search" name="text3" placelholder="Buscar" data-clear-btn="true">
     
     <label for="text4">Campo de texto desactivado</label>
     <input type="text" name="text4" placeholder="Desactivado" disabled="disabled">
     
     <label for="text5">Textarea</label>
     <textarea name="text5" placeholder="Introduce algo"></textarea>
     
     <label for="text6">Input file</label>
     <input type="file" name="text6">
     
     <label for="text7">Tema b</label>
     <input type="text" data-theme="b" placeholder="Tema b" data-mini="true">
     
     <label for="text8">Input type number</label>
     <input type="number" pattern="[0-9]*" value="0" data-clear-btn="true">
     
    </form>
   </div>
  </div>
 
  <div data-role="footer">
   <div class="ui-content">
    <small>© Tutorial jQuery Mobile</small>
      </div>
     </div>
  
   </div>
</body>
</html>


Tutorial completo de jQuery Mobile en Youtube


No hay comentarios: