En esta ocasión vamos a ver como implementar campos de texto con Jquery Mobile, veremos su uso básico y mezclado con lo nuevo de
HTML5 para obtener campos de texto perfectamente adaptables a cualquier dispositivo móvil.
Básico input text. Tener en cuenta el atributo HTML5 placeHolder, sirve para incluir una leve introducción al campo de texto ...
<h3>Input text básico</h3> <form> <input type="text" name="texto" placeHolder="Campo de texto ..."> </form>
Básico textarea ...
<h3>Textarea básico</h3> <form> <textarea name="texto" placeHolder="Textarea"></textarea> </form>
Campo de texto de búsqueda. Atención al uso del nuevo input search de HTML5. Jquery Mobile lo que hace es estilizar este elemento ...
<h3>Campo de búsqueda</h3> <form> <input type="search" name="texto" placeHolder="Buscar"> </form>
Campo de texto para validación. En este caso se hace uso del atributo pattern de HTML5, este atributo permite introducir expresiones regulares,
para el ejemplo sólo se permitirán letras para el alfabeto español y espacios -> pattern="[a-zA-ZáéíóúñÁÉÍÓÚÑ\s]*", para el caso he utilizado un campo input text, aunque podría utilizarse en un input password.
<h3>Campo de validación para caracteres en español</h3> <form> <input type="text" name="texto" pattern="[a-zA-ZáéíóúñÁÉÍÓÚÑs]*" placeHolder="Campo de validación para caracteres en español"> </form>
No hay comentarios:
Publicar un comentario