miércoles, 17 de julio de 2013

Implementando campos de texto con Jquery Mobile y HTML5

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>


Jquery Mobile


Básico textarea ...

<h3>Textarea básico</h3>
<form>
<textarea name="texto" placeHolder="Textarea"></textarea>
</form>

Jquery Mobile


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>


Jquery Mobile


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>

Jquery Mobile