martes, 20 de noviembre de 2012

Ejemplos practicos.Formulario fieldse,placeholde ,invalid ,required,date,slider.







En html 5 existen tipos de campos para un formulario bastante interesantes de implementar  que cumplen con las necesidades de una web con  css3 y las propiedades que  nos permiten recolectar debidamente información de nuestros usuarios .

En entradas anteriores publique tipos de input donde se muestra el código y la visualización en los distintos  navegadores también  los  atributos y aplicaciones  de un formulario .

Un formulario combinado con algo de css3  en la misma pagina sabiendo que no es todos los casos es recomendable hacerlo ya que  seria mas sencillo implementar un css para todas la paginas en general pero para este caso vale  .


El formulario es este .



<html>

<head>
<style type="text/css">
[required]{
borde-color:green;
box-shadow 0px,0px,5px blue;

:invalid
border-color:green;
box-shandow 0px 0px 5px grey;

}
</style
</head>


<form action=""method="post">
<fieldset>
<legend>Formulario</legend>
<p>
<label>Nombre:  <input type="text" required name="username"  placeholder="First name" ></label>
<label>Apellido:  <input type="text" required name="username"   placeholder="Last name"  ></label>
</p>
<p><label>Email:  <input type="email"  name="email" required value="@Email.com"/></label>
<p><label>Fecha : <input type="date" name="date"></label>
</p>
<p><label>Encuesta<input type="range" max="10" min="0" value ="5" step="2"></label></p>

<p><label>Color preferido <input type="color" name="color"></label></p>
<p><label>Que valor le daria a esta web : <input type="number" name="number" step="1" min"1" max="10" value="10">
</fieldset>

</html>



Con    la propiedad  required   marcare los campos que deben ser rellenados obligatoria-mente .

y con css3 se  le  dará un poco de estilo.



<style type="text/css">
[required]{                                                                 define el  campo obligatorio
borde-color:blue;                                                        borde azul para los campos obligatorios
box-shadow 0px,0px,5px grey;                                   y una sombra




Campo invalido



:invalid                                                                               este sera usado para el email  alertando
border-color:green;                                                             una invalidad  al no en contar  el  @
box-shandow 0px 0px 5px grey;                                         con un borde y una sombra.

}


con un value="@Email.com"/> que  indica  la introducción correcta
placeholde que describe el valor esperado del campo y
 fieldset que enmarca el formulario .


También el slider atractivo y moderno como nuevo atributo de html5 podemos usarlo para realizar encuesta 

</p><label>Encuesta<input type="range" max="10" min="0" value ="5"></label>
Su valor sera desde el 0 hasta el 10  consiguiendo modificar-lo con el max o min .

 Añadiendo un  step  poder indicar  que se moverá de 2 en 2 


<p><label>Encuesta<input type="range" max="10" min="0" value ="5" step="2"></label></p>


 o esta  otra forma.  Valor numérico 


<p><label>Que valor le daría a esta web : <input type="number" name="number" step="1" min"1" max="10" value="10">


rodara del 1 al 10  ni menos ni mas .


y hasta aquí , un saludo!.




.