ingenieradesistemas
499751083497328
Cargando...

Slider, selector de colores y valor numérico en HTML5



En el anterior ejercicio vimos como implementar un selector de fecha en HTML5, en esta oportunidad vamos a adicionar unas cuantas líneas de código para observar un slider que me permita valorar algún aspecto de la  web, un selector de color y otro campo para valorar la web con un valor numérico.

Slider, selector de colores y valor numérico en HTML5

El código fuente es así:
<!DOCTYPE html>
<html>
<head>
<title>Validacion de campos</title>
<style type="text/css">
[required] {
border-color: green;
box-shadow: 0px 0px 5px green;
}

:invalid {
border-color: red;
box-shadow: 0px 0px 5px red;
}
</style>
</head>
<body>
<table>
<tr>
<td>
Nombre
</td>
<td>
<input type="text" required>

</td>
</tr>
<tr>
<td>
Apellido
</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>
Email
</td>
<td>
<input type="email" value="usuario@dominio.com"/>
</td>
</tr>
<tr>
<td>
Fecha
</td>
<td>
<input type="date" value="16/12/2016">
</td>
</tr>
<tr>
<td>
Valoracion
</td>
<td>
<input type="range" max="10" min="0" value="2" step="2">
</td>
</tr>
<tr>
<td>
Color
</td>
<td>
<input type="Color" placeholder="e.g #FF0000">
</tr>
<tr>
<td>
Valora nuestra web
</td>
<td>
<input type="number" step="1" min="0" max="12" value="5">
</td>

</tr>
</table>
</body>
</html>
Y el resultado en pantalla nos muestra así:




HTML5 y CSS3 1359243020850397062

Publicar un comentario Default Comments

emo-but-icon

Página principal item

Los apuntes en tu correo

Síguenos en Facebook

Apuntes aleatorios