Cargando



HTML5, Elemento Input – Parte 2

En esta segunda parte del tutorial veremos algunos usos prácticos con ejemplos, de forma que veamos como podemos aplicar lo que ya hemos aprendido hasta el momento.


sep 02 2013 10:36
Intermedio
sep 02 2013 10:39
Ya en la primera parte de este Tutorial definimos los atributos con los que podemos trabajar, vimos que tenemos algunos nuevos para HTML5 y otros que no lo son, sin embargo a la hora de construir campos sólidos que nos ayuden en los procesos esenciales del site, es cuando la combinación de estos y el buen uso de cada uno lo que nos ayudará a recolectar la data de la mejor manera posible.

Estableciendo el tamaño de un campo

Como ya vimos tenemos dos atributos que nos afectan directamente en el tamaño de un campo, estos son size y maxlength, uno nos regula lo amplitud visual del campo y el otro la cantidad de texto que efectivamente puede recibir dicho campo.

Veamos un ejemplo utilizando ambos atributos:

<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<form method="post" action="http://titan:8080/form">
<p>
<label for="name">
Name: <input maxlength="10" id="name" name="name"/>
</label>
</p>
<p>
<label for="city">
City: <input size="10" id="city" name="city"/>
</label>
</p>
<p>
<label for="fave">
Fruit: <input size="10" maxlength="10" id="fave" name="fave"/>
</label>
</p>
<button type="submit">Submit Vote</button>
</form>
</body>
</html>

En este ejemplo vemos como al primer campo se le especifica un maxlength, únicamente con esto le decimos al navegador que solo puede aceptar 10 caracteres sin embargo le puede asignar el ancho por defecto, en el segundo campo le especificamos el size con lo que le decimos de que ancho debe ser, sin embargo no limitamos la entrada de texto y en el tercero aplicamos ambas condiciones, veamos como nos queda en navegador.

HTML5-Input.jpg


Utilización de value y placeholder

Habiendo visto la diferencia entre estos dos campos, en este ejemplo vamos a demostrar efectivamente como aplicarlos a un formulario, veamos en el siguiente código como utilizarlos.

<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<form method="post" action="http://titan:8080/form">
<p>
<label for="name">
Name: <input placeholder="Your name" id="name" name="name"/>
</label>
</p>
<p>
<label for="city">
City: <input placeholder="Where you live" id="city" name="city"/>
</label>
</p>
<p>
<label for="fave">
Fruit: <input value="Apple" id="fave" name="fave"/>
</label>
</p>
<button type="submit">Submit Vote</button>
</form>
</body>
</html>

Como vemos en los dos primeros campos el placeholder nos indica una ayuda de lo que el usuario debe ingresar, este valor que contiene el placeholder no es el valor del campo input por lo que si hacemos submit estos campos llegaran vacíos, en cambio el tercer campo tiene algo ya colocado en el atributo value, esto si llegaría a pasarse al hacer submit a dicho formulario.

Veamos como el navegador nos mostraría esto


HTML5-Input_2.jpg


Crear campos de solo lectura

En algunas ocasiones debemos trabajar con campos de solo lectura, ya sea porque el valor no debe ser modificado por el usuario o es algo meramente informativo. También puede darse el caso que es el resultado de un previo filtrado por él usuario y solo puede verse este valor, para ello tenemos dos opciones que aunque parezcan iguales son totalmente diferentes.

Ya habíamos visto el atributo readonly y conocemos que es para que el campo no pueda ser modificado, también tenemos el atributo disabled, hace la misma función que readonly, sin embargo al hacer submit todos los campos disabled no se envían por lo que es como si no existiera en el formulario.

Veamos lo antes explicado con un ejemplo práctico.

<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
</head>
<body>
<form method="post" action="http://titan:8080/form">
<p>
<label for="name">
Name: <input value="Adam" disabled id="name" name="name"/>
</label>
</p>
<p>
<label for="city">
City: <input value="Boston" readonly id="city" name="city"/>
</label>
</p>
<p>
<label for="fave">
Fruit: <input id="fave" name="fave"/>
</label>
</p>
<button type="submit">Submit Vote</button>
</form>
</body>
</html>

Podemos observar que el primer campo está disabled y el segundo en readonly, al mostrarse en el navegador el disabled nos aparece con una coloración gris, normalmente asociada a la no habilitación, mientras que el readonly se ve como un campo normal, aunque si tratamos de escribir en cualquiera, ninguno nos dejará ingresar texto.


Veamos como nos queda el ejemplo:


HTML5-Input_3.jpg


Con esto terminamos esta segunda parte del tutorial, ya estamos en capacidad de mejorar nuestros formularios utilizando validaciones básicas de tamaño y cantidad de texto y también controlando que puede modificar o no el usuario, además de poderle mostrar ayudas en los campos para que tenga una idea de que debe o no ingresar.

¿Te ayudó este Tutorial?


Sin comentarios, sé el primero!

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!

X