Una lista di esercizi con form HTML5 e CSS3. Gli esercizi contengono CSS esterni e l’uso dei tag DIV per una formattazione più complessa ma una resa grafica più piacevole ed in linea con la realtà che troviamo sul web. Qui una forma di login con input senza bordi e un bordo blu quando si fa focus/clicca dentro la casella stessa.
In questo esempio vediamo una semplice form, in cui in realtà non ci sono label, ma il contenuto dei singoli campi viene intuitivamente suggerito dai placeholder. L’esempio non vanta elementi grafici particolarmente complessi da intuire per lo studente eccetto che per la scelta di eliminare i bordi dalle caselle di input sia email che password. Pratica questa molto attuale nei widget che troviamo nei siti web più recenti.
Il codice HTML è molto semplice. Non abbiamo compilato per il momento il tag form con tutti i doverosi attributi per concentrarci sulla resa stilistica. Troviamo semplicemente un fieldset senza legenda, tre input per i rispettivi campi. Non essendo etichette/labels, non inseriamo tabelle o altri sistemi particolari di disposizione degli oggetti.
<!DOCTYPE html>
<html lang="it">
<head>
<title>Form vs CSS</title>
<meta charset="utf-8" >
<link href=css/style.css rel="stylesheet" type="text/css">
</head>
<body>
<form>
<fieldset>
<h1>TuaMail.com</h1>
<h3>Accedi</h3>
<input type="email" id=email name=email placeholder="Inserisci la tua mail"><br>
<input type="password" id="password" name="password" placeholder="Inserisci la tua password">
<input type='submit' value='ENTRA' id="invia">
</fieldset>
</form>
</body>
</html>Il CSS ora. Tralasciamo il selettore body che mette al centro della pagina la nostra form, il codice del fieldset e dei testi è semplice e non merita particolari considerazioni per il lettore e l’alunno che si trovano a questo livello di competenza. Abbiamo impostato delle dimensioni in pixel e giocato un po’ sui font. Il bordo è stato sovrascritto con una linea grigia tenue più gradevole di quella nera di default.
fieldset{
border: 1px solid #CCCCCC;
width: 300px;
padding: 10px 5px 0 15px;
}
h1{
color:#034a88;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-size: x-large;
width: 280px;
text-align: center;
}
h3{
font-size: large;
font-weight: 300;
width: 280px;
text-align: center;
color: grey;
font-family: Arial, Helvetica, sans-serif;
}
La porzione che gestisce gli input. Abbiamo assegnato ad ogni campo un name, che sappiamo essere comodo per la gestione $_POST/$_GET con PHP ed un ID che è invece fondamentale per CSS, JS e JQuery. La politica che adottiamo è quella di chiamarli uguale ma non è necessariamente una regola. Per prima cosa, usiamo il selettore input per assegnare uno stile a tutti i contenitori: eliminare il bordo, l’ombra interna e impedire il resize.
input {
border: none;
overflow: auto;
outline: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
resize: none;
}Fatto questo possiamo dare uno stile ai soli campi password e mail. Come blocchi, andranno a capo in automatico. In più aggiungiamo un bordino grigio che quando si clicca dentro la casella per compilare diverrà blu col selettore :focus che assomiglia molti ai a:hover e a:visited più noti ai lettori.
#email, #password{
display: block;
border-bottom:2px solid #e8e8e8;
padding:6px 0 3px 5px;
width:280px;
color:#666;
font-size:15px;
}
#email:focus, #password:focus{
border-bottom:2px solid #0070d6
}Infine il bottone che decisamente non assomiglia ai bottoni standard a cui siamo abituati, colorato con i bordi smussati coll’attributo radius ed anche qui l’annullamento del sistema bordo/ombra. L’effetto :hover è semplice ed intuitivo.
#invia{
background-color:#034a88;
color:#fff;
cursor:pointer;
font-size:15px;
font-weight:700;
width:280px;
height:36px;
border-radius:3px;
margin:20px 0 14px 5px;
-webkit-appearance:none
}
#invia:hover{background:#09f}Ultima modifica 14 Gennaio 2022