Un form di login ben progettato è un elemento cruciale per qualsiasi sito web. Questa guida fornirà le informazioni e i passaggi per la creazione di un form di login utilizzando HTML e CSS. Con l'obbiettivo di costruire un'interfaccia utente semplice e funzionale. Un form efficace non solo protegge i dati sensibili, offre anche un'esperienza utente fluida e intuitiva. Inoltre, un design professionale può migliorare la percezione generale del sito web, infondendo fiducia negli utenti.
Obiettivi e prerequisiti del progetto
I due principali scopi di questa guida sono fornire una struttura di base del form utilizzando HTML e migliorarne l'aspetto con CSS, per renderlo più attraente e user-friendly. Per seguire questo tutorial, quindi, è utile avere una conoscenza di base di questi due linguaggi. Tuttavia, anche i principianti possono trarre beneficio dalle istruzioni e dagli esempi pratici forniti che includono porzioni di codice.
Struttura HTML per la pagina di login
Il primo passaggio di questa guida consiste nel creare una pagina HTML. Per fare ciò si è scelto di utilizzare Visual Studio Code, un ambiente di sviluppo integrato potente e versatile, ideale per la creazione di pagine Web. Per prima cosa bisognerà inizializzare un nuovo progetto, in particolare servirà creare una pagina che, per comodità, verrà rinomata index.html, quella in cui sarà sviluppato il form di login.
Nella pagina index.html, che inizialmente sarà vuota, bisogna inserire il tag head, fondamentale perché conterrà le informazioni principali della pagina.
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form di Login</title>
<link rel="stylesheet" href="index.css">
</head>In questa prima parte di codice viene utilizzato il tag per specificare il tipo di documento HTML. Quindi viene creato un tag con l'attributo lang impostato su it per indicare che la lingua della pagina è l'Italiano. Inoltre, nella sezione head del documento viene specificato il set di caratteri utilizzato nella pagina, il viewport e il titolo della pagina che verrà visualizzato in alto (in questo caso "Form di Login"). Infine, è stato aggiunto un collegamento al file CSS esterno da cui verranno ereditate le istruzioni di stile.
Proseguendo con il tag body, verrà implementato il corpo della pagina contenente il form:
<body>
<div class="container">
<h1>Login</h1>
<form>
<label for="email">E-mail</label>
<input type="email" id="email" name="email" required>
<label for="password">Password</label>
<input type="password" id="password" name="password" required>
<button type="submit">Login</button>
</form>
</div>
</body>Al suo interno è stato inserito un div che assume il ruolo di contenitore principale della pagina. Esso conterrà innanzitutto il tag <h1> ovvero il titolo che fornisce una spiegazione sul tipo di pagina (Login). Successivamente è presente l'elemento fondamentale di questa guida che serve ad inviare i dati per effettuare correttamente il login.
Il form di login
In questa guida si è scelto di implementare un form di login basilare che contiene 2 campi di inserimento dati: "E-mail" e "Password". Una volta acquisite le informazioni di questi campi sarà possibile implementare nuovi elementi e rendere il form più popolato.
Sono stati utilizzati i tag label per associare un'etichetta descrittiva ai campi di input. Questo è utile per migliorare l'accessibilità del sito. Inoltre si è utilizzato l'attributo required sui campi di input per garantire che l'utente inserisca i dati richiesti. Infine, è stato aggiunto un pulsante di accesso, submit, che darà il via all'invio dei dati quando si cliccherà su di esso.
Personalizzazione con stile CSS
Dopo aver creato la struttura HTML di base della pagina di login, si può passare alla formattazione e allo styling utilizzando CSS. In questo caso verrà creato uno stile semplice e pulito per ottimizzare il form di accesso. Per prima cosa bisognerà creare un file nella stessa cartella in cui è presente index.html, questo verrà chiamato per comodità index.css e verrà collegato alla pagina principale tramite il seguente tag:
<link rel="stylesheet" href="index.css">Una volta creato il foglio di stile si potrà procedere con l'assegnazione delle istruzioni principali in modo universale. Ovvero tramite il selettore * con cui impostare il box-sizing su border-box, il che significa che l'ampiezza e l'altezza di un elemento includono il padding e il bordo. Successivamente è stato impostato il margine e il padding del corpo a 0, scelto il font sans-serif; e settato colore di sfondo in grigio chiaro.
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background-color: #f5f5f5;
}Formattazione degli elementi del form
Una volta completata la configurazione primaria degli elementi di base della pagina, si può passare alle parti più dettagliate che compongono il form. Innanzitutto il container generale un div.
.container {
width: 100%;
max-width: 400px;
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}Il selettore di classe .container imposta la larghezza massima del contenitore su 400px e lo centra nella finestra del browser utilizzando il margin: 0 auto. Vengono impostati il display su flex e la direzione del flessibile su colonna per posizionare il contenuto al centro della pagina. Infine, l'altezza del contenitore sarà 100vh per coprire l'intera altezza della finestra del browser.
Personalizzazione del form di login
Si procede poi con la personalizzazione del form. A questo verrà assegnata la larghezza massima con l'istruzione width: 100%;. Le etichette del form (le diciture e-mail e password) saranno gestite invece tramite l'istruzione display: block che le imposta come elementi blocco con un margine inferiore di 10px e un carattere in grassetto.
form {
width: 100%;
}
label {
display: block;
margin-bottom: 10px;
font-weight: bold;
}
input {
width: 100%;
padding: 10px;
border-radius: 5px;
border: 1px solid #ccc;
margin-bottom: 20px;
}Per i campi di input è consigliabile assegnare una larghezza del 100%, un padding generale di 10px e un bordo di 1px e colore grigio chiaro. Inoltre il margine inferiore di 20px permette di creare uno spazio tra i campi di input.
Il pulsante di invio
Infine, rimane da personalizzare il pulsante di invio dei dati inseriti:
button {
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
padding: 10px 20px;
cursor: pointer;
}
button:hover {
background-color: #0069d9;
}Le istruzioni sopra mostrate permettono di mettere in risalto il pulsante di submit affinché possa semplificare la navigazione dell'utente. In particolare si è scelto di impostare il colore di sfondo del pulsante sul blu con il colore del testo bianco. Il bordo verrà arrotondato con un valore di 5px e il suo colore verrà disattivato tramite l'opzione border: none;. Il pulsante avrà poi un padding di 10px per i lati superiore e inferiore e di 20px a destra e sinistra.
Per concludere è stato utilizzato il selettore :hover per impostare uno stile di sfondo diverso quando il cursore del mouse si posiziona sopra il pulsante. In particolare quando avviene ciò il colore di sfondo del pulsante cambia.
Risultato finale e considerazioni
Il gioco è fatto! Il form di login è stato realizzato ed è pronto per l'utilizzo… o quasi! Grazie a questa guida, infatti, avete ottenuto le informazioni necessarie per la realizzazione di un form di login dal punto di vista strutturale ed estetico grazie ad HTML e CSS. Per poter proseguire con l'utilizzo del form e con il trattamento dei dati inseriti è opportuno integrare il codice appena realizzato con gli opportuni framework o linguaggi (es. PHP). Per visualizzare il risultato finale basterà aprire il file index.html appena creato:
Nell'immagine viene mostrato il form di login che è stato realizzato tramite HTML e CSS. Ora siete in grado di sviluppare e personalizzare a vostro piacimento un form di login. Sbizzarritevi per poter creare delle pagine di accesso smart, intuitive e moderne!
