Ejemplos practicos.Formulario fieldse,placeholde ,invalid ,required,date,slider.
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!.
Puede que te interese .
.
Comentarios
Publicar un comentario