Los nuevos elementos, atributos, input types & pseudo selectores para los cuestionarios en HTML5 nos permitan mas control e interactividad a la hora de crear formularios, comparando con las posibilidades limitadas de las versiones anteriores de HTML todo este conjunto de cambios es un cambio significativo.

Hasta ahora el navegador que soporta de forma mas completa los nuevos cambios en HTML5 es el Opera, los demas tienen cada unos un nivel de soporte distinto, de todas formas en los navegadores que ofrecen menos soporte usamos otra tecnicas como el Webform2.js o el jquery.

<!DOCTYPE html>
<html>
<head>
<style type=”text/css”>
:invalid {
background-color: #ffdddd;
}
:valid {
background-color: #ddffdd;
}
:required {
border-color: #800000;
border-width: 3px;
}
</style>
<title>Cuestionarios con HTML5 : )</title>
<link rel=”stylesheet” href=”../common.css” type=”text/css”>
<script type=”text/javascript” src=”webforms2-0.5.4/webforms2.js“></script>
<!–<script type=”text/javascript” src=”../modernizr-1.7.js”></script>
<script type=”text/javascript” src=”../jquery-1.5.1.js”></script>
<script type=”text/javascript”>
$(document).ready(function() {
if (!Modernizr.input.autofocus) {
$(“input[autofocus]”).focus(); // give focus to whichever element has the autofocus attribute
}
});
</script>–>
</head>
<body>
<h1>El Atributo Placeholder</h1>
<p>El atributo <code>placeholder</code> presenta texto en la caja del control del cuestionario
sugeriendo al usuario que queremos que rellena en esta caja. Se presenta cuando no esta el focus en ella &
no tiene informacion ya escrita por el usuario, cuando esto ocurre se desaparece el texto del Placeholder</p>
<form method=”get” action=””>
<p><label for=”Text1″>Campo 1: </label><input name=”Text1″ type=”text” id=”Text1″ placeholder=”Placeholder Text 1″/></p>
<p><label for=”Text2″>Campo 2: </label><input name=”Text2″ type=”email” id=”Text2″ placeholder=”Placeholder Text 2″/></p>
<p><label for=”Text3″>Campo 3: </label><input name=”Text3″ type=”url” id=”Text3″ placeholder=”Placeholder Text 3″/></p>
</form>
<h1>El Atributo de Autofocus</h1>
<p>En este cuestionario donde existen varios cajas de control, los navegadores que reconocen el <code>autofocus
</code>,el focus es automaticamente dirigida al primer elemento del form que tiene el atributo de autofocus.</p>
<form method=”get” action=””>
<p><label for=”Text1″>Campo 1: </label><input name=”Text1″ type=”text” id=”Text1″ /></p>
<p><label for=”Text2″>Campo 2: </label><input name=”Text2″ type=”text” id=”Text2″ autofocus/></p>
<p><label for=”Text3″>Campo 3: </label><input name=”Text3″ type=”text” id=”Text3″ /></p>
</form>
<h1>El Atributo Required</h1>
<p>El atributo <code>required</code> indica al cuestionario que esta caja de control debe de llevar datos antes de ser enviada por el submit.</p>
<form action=”” method=”get”>
<p><label for=”Text1″ >Nombre: </label><input name=”Text1″ type=”text” required></p>
<p><label for=”Text2″>Apellido: </label><input name=”Text2″ type=”text”></p>
<p><label for=”Text3″>Color Favorito: </label><input name=”Text3″ type=”text”></p>
<p><input name=”Submit1″ type=”submit” value=”submit”>&nbsp;</p>
</form>
<h1>El Atributo Pattern</h1>
<p>El atributo <code>pattern</code> asegura que el texto que esta en la caja coincide con la
especificacion del (RegEx) pattern. Cuando el cuestionario esta enviado los navegadores que reconocen este
atributo comprueba que el valor entrado es una expresion regular – un conjunto de cadenas</p>
<form method=”get” action=””>
<p>Este campo esta limitado a 5 digitos</p>
<p><label for=”Text1″>Codigo Postal: </label><input name=”Text1″ type=”text” id=”Text1″ pattern=”^[0-9]{5}$”/></p>
<p><input name=”Submit1″ type=”submit” value=”submit”>&nbsp;</p>
</form>
<h1>El Atributo Novalidate</h1>
<p>El <code>novalidate</code> indica al navegador que el cuestionario puede estar guardado sin que se valide</p>
<p>Porque (diria Mahurinio)? A veces podemos ofrecer a los usuarios rellenar parte de sus datos
sin enviarlos – El atributo tiene dos formas – novalidate para todo el form, o
formnovalidate [ara un control particular.</p>
<form action=”” method=”get” novalidate>
<p><label for=”Text1″ >Nombre: </label><input name=”Text1″ type=”text” required></p>
<p><label for=”Text2″>Apellido: </label><input name=”Text2″ type=”text”></p>
<p><label for=”Text3″>Color Favorito: </label><input name=”Text3″ type=”text”></p>
<p><input name=”Submit1″ type=”submit” value=”submit”>&nbsp;</p>
<p><input name=”Save” type=”button” value=”save” formnovalidate>&nbsp;</p>
</form>
<h1>El Autocomplete</h1>
<p>Este atributo permita a los navegadores “recordar” los datos que el usuario ha rellenado en el cuestionario.</p>
<p>El <code>autocomplete</code> indica que campos de datos tiene el navegador que “recordar”.</p>
<form method=”get” action=””>
<p><label for=”Text1″>Campo 1: </label><input name=”Text1″ type=”text” id=”Text1″ autocomplete=”on” /></p>
<p><label for=”Text2″>Campo 2: </label><input name=”Text2″ type=”text” id=”Text2″ autocomplete=”off” /></p>
<p><label for=”Text3″>Campo 3: </label><input name=”Text3″ type=”text” id=”Text3″ autocomplete=”off” /></p>
<p><input type=”submit” value=”Submit” /></p>
</form>
</body>
</html>