<!DOCTYPE html> <html lang="es"> <head> <title>Formulario de alta</title> <meta charset="utf-8"> <style type="text/css"> </style> </head> <body> <form> <fieldset> <legend>Alta en el servicio</legend> <label for="nombre">Nombre</label> <input type="text" id="nombre" /> <label for="apellidos">Apellidos</label> <input type="text" id="apellidos" size="50" /> <label for="dni">DNI</label> <input type="text" id="dni" size="10" maxlength="9" /> <label for="contrasena">Contraseña</label> <input type="password" id="contrasena" /> <input class="btn" type="submit" value="Darme de alta" /> </fieldset> </form> </body> </html>
Els "label" són etiquetes en línia, si volem que es mostrin en bloc , canviem la propietat display
label { display: block; margin: .5em 0 0 0; } .btn { display: block; margin: 1em 0; }
Supossem que ara volem mostrar cada una de les etiquetes a l'esquerra i el camp a la dreta i tots ben alineats
Hem de fer un div per cadascuna de les etiquetes i per cadascun dels camps. Abans haurem de pensar les mides de les etiquetes:
Supossem ara que volem resaltar el camp on tenim el ratolí en aquell moment. Usarem la classe :focus sobre el camp que volem resaltar:
Supossem que volem augmentar el padding dels camps :
Hem de fer un div per cadascuna de les etiquetes i per cadascun dels camps. Abans haurem de pensar les mides de les etiquetes:
<form> <fieldset> <legend>Alta en el servicio</legend> <div> <label for="nombre">Nombre</label> <input type="text" id="nombre" /> </div> <div> <label for="apellidos">Apellidos</label> <input type="text" id="apellidos" size="35" /> </div> ... </fieldset> </form>
div { margin: .4em 0; } div label { width: 25%; float: left; }
Supossem ara que volem resaltar el camp on tenim el ratolí en aquell moment. Usarem la classe :focus sobre el camp que volem resaltar:
input:focus { border: 2px solid #000; background: #F3F3F3; }
Supossem que volem augmentar el padding dels camps :
input { padding: .2em; }
Cap comentari:
Publica un comentari a l'entrada