Form in HTML.

Form in HTML sono dei complessi elementi d'interfaccia d'utente. Essi comprendono diversi elementi funzionali: campo di immissione <input> e <textarea>, liste <select>, sugerimenti, ecc. Tutto il codice di un form viene incluso nel tag <form>.

Form o moduli nel HTML

animatedDude

video prevui

La maggior parte dei dati da una web-forma vengono trasmessi al server dalla pagina del utente tramite tag <input>. Per inserire una riga di testo si utilizza elemento <input type = "text">, per una serie di rige tag <textarea>. Elemento <Select> crea un elenco a discesa.

Elemento <label> crea etichette ( da un nome ad un elemento al interno di una forma per identificarlo) per campi. Ci sono due modi per raggruppare campi ed etichetta. Se il campo è all'interno dell'elemento <label>, l'attributo for non viene specificato.

<label for="lastname">Last Name</label>
<input type="text" id="lastname">
<input type="text" id="lastname">
<label for="lastname">Last Name</label>
<label>Last Name<input type="text" name="lastname"></label>

I campi del form possono essere suddivisi in blocchi logici utilizzando l'elemento <fieldset>. Ad ogni blocco posiamo attribuire un nome con aiuto del elemento <legend>.

<fieldset>
<legend>Dati personali</legend>
<label>Nome<input type="text" required></label>
<label>E-mail<input type="email" required></label>
</fieldset>

Per rendere il modulo più facile da capire per gli utenti nei campi di testo del modulo si aggiunge del testo che specifica con un esempio cosa va inserito in tale imput. Questo testo viene creato tramite l'attributo placeholder.

I campi obbligatori da compilare vanno in qualche modo evidenziati. Prima dell'arrivo di HTML5 si utilizzava il simbolo di asterisco * , collocato accanto al nome del campo. La nuova specifica del html fornisce un nuovo attributo required, che consente di contrassegnare un campo obbligatorio a livello di markup. Questo attributo indica al browser (a condizione che esso suporta HTML5), di non inviare i dati dopo che l'utente preme il bottone invio finché i campi contrassegnati da questo attributo non saranno compilati, cio è impedisse invio della forma con dei campi vuoti.

<input type="text" required placeholder="Il tuo nome">

Per modificare l'aspetto del campo di testo quando esso entra nel focus , si utilizza una pseudoclasse focus. Ad esempio è possibile rendere lo sfondo del campo quando entra in focus piu scuro o aggiungere un bordo colorato per distinguerlo dal resto:

input:focus {
background: #eaeaea;}

Un altro attributo utile di HTML5 è attributo autofocus. Esso consente di impostare automaticamente focus sul campo desiderato per gli elementi <input> e <textarea> (solo un elemento per ogni modulo).

Esempio di creazione modulo HTML5

Markup html

<div class="form-wrap">
<div class="profile"><img src="/images/css/forme/profile-image.png">
<h1>Registrazione</h1>
</div>
<form method="post" action="form.php">
<div>
<label for="name">Nome</label>
<input type="text" name="name" required>
</div>
<div class="radio">
<span>Sesso</span>
<label>
<input type="radio" checked>
maschile
<div class="radio-control male"></div>
</label>
<label>
<input type="radio">
femminile
<div class="radio-control female"></div>
</label>
</div>
<div>
<label for="email">E-mail</label>
<input type="email" name="email" required>
</div>
<div>
<label for="cita">Cita</label>
<select name="cita">
<option value="value1">Seleziona il tuo paese di residenza</option>
<option value="value2">Milano</option>
<option value="value3">Turino</option>
<option value="value3">Bergamo</option>
</select>
<div class="select-arrow"></div>
</div>
<button type="submit">Inviare</button>
</form>
</div>

Registrazione

Sesso

 

Come si può notare dalla forma sopra che ciascun elemento del modulo ha un stile predefinito dal browser. Eliminiamo stili del browser e aggiungeremo proprie.

.form-wrap {
width: 550px;
background: #ffd500;
border-radius: 20px;
}
.form-wrap *{transition: .1s linear}
.profile {
width: 240px;
float: left;
text-align: center;
padding: 30px;
}
form {
background: white;
float: left;
width: calc(100% - 240px);
padding: 30px;
border-radius: 0 20px 20px 0;
color: #7b7b7b;
}
.form-wrap:after, form div:after {
content: "";
display: table;
clear: both;
}
form div {
margin-bottom: 15px;
position: relative;
}
h1 {
font-size: 24px;
font-weight: 400;
position: relative;
margin-top: 50px;
}
h1:after {
content: "\f138";
font-size: 40px;
font-family: FontAwesome;
position: absolute;
top: 50px;
left: 50%;
transform: translateX(-50%);
}
/********************** stilizzazione elementi della forma**********************/
label, span {font-size: 14px;
margin-bottom: 8px;
}
input[type="text"], input[type="email"] {
border-width: 0;
outline: none;
margin: 0;
width: 100%;
padding: 10px 15px;
background: #e6e6e6;
}
input[type="text"]:focus, input[type="email"]:focus {
box-shadow: inset 0 0 0 2px rgba(0,0,0,.2);
}
.radio label {
position: relative;
padding-left: 50px;
cursor: pointer;
width: 50%;
float: left;
line-height: 40px;
}
.radio input {
position: absolute;
opacity: 0;
}
.radio-control {
position: absolute;
top: 0;
left: 0;
height: 40px;
width: 40px;
background: #e6e6e6;
border-radius: 50%;
text-align: center;
}
.male:before {
content: "\f222";
font-family: FontAwesome;
font-weight: bold;
}
.female:before {
content: "\f221";
font-family: FontAwesome;
font-weight: bold;
}
.radio label:hover input ~ .radio-control,
.radiol input:focus ~ .radio-control {
box-shadow: inset 0 0 0 2px rgba(0,0,0,.2);
}
.radio input:checked ~ .radio-control {
color: red;
}
select {
width: 100%;
cursor: pointer;
padding: 10px 15px;
outline: 0;
border: 0;
background: #e6e6e6;
color: #7b7b7b;
-webkit-appearance: none; /*rimuovere il segno di spunta in webkit-браузерах*/
-moz-appearance: none; /*rimuovere il segno di spunta in Mozilla Firefox*/
}
select::-ms-expand {
display: none; /*rimuovere il segno di spunta in IE*/
}
.select-arrow {
position: absolute;
top: 38px;
right: 15px;
width: 0;
height: 0;
pointer-events: none; /*attivare la visualizzazione del elenco facendo clic sulla freccia*/
border-style: solid;
border-width: 8px 5px 0 5px;
border-color: #7b7b7b transparent transparent transparent;
}
button {
padding: 10px 0;
border-width: 0;
display: block;
width: 120px;
margin: 25px auto 0;
background: #60e6c5;
color: white;
font-size: 14px;
outline: none;
text-transform: uppercase;
}
/********************** aggiungiamo alla forma adattabilità **********************/
@media (max-width: 600px) {
.form-wrap {margin: 20px auto; max-width: 550px; width:100%;}
.profile, form {float: none; width: 100%;}
h1 {margin-top: auto; padding-bottom: 50px;}
form {border-radius: 0 0 20px 20px;}

Registrazione

Sesso

Letto 841 volte

corso CSS pratica

Impara HTML e CSS da zero al risulto!

Da piccolo hai imparato leggere leggendo libri. E con aiuto del nostro corso imparerai CSS e HTML costruendo un sito web da un templat in PSD .

Scopri il corso