Negli ultimi anni, la creazione di pagine web responsive è diventata sempre più importante a causa dell’aumento dell’utilizzo di dispositivi mobili per navigare in Internet. Una delle parti fondamentali di qualsiasi sito web è la pagina di login, che richiede l’accesso a determinate aree riservate del sito. In questo articolo, vedremo come creare una pagina di login responsive utilizzando HTML, CSS e JavaScript.
Prima di iniziare, è importante avere una conoscenza di base di questi tre linguaggi di programmazione. HTML viene utilizzato per la struttura di base della pagina web, mentre CSS viene utilizzato per la formattazione e lo stile della pagina. JavaScript viene utilizzato per aggiungere funzionalità dinamiche alla pagina web.
Creazione della struttura HTML per la pagina di login
Iniziamo creando la struttura HTML di base della nostra pagina di login. In questo caso, creeremo una pagina di login semplice con un campo per l’indirizzo email, un campo per la password e un pulsante di accesso.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Page</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Login</h1>
<form>
<label for="email">Email</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>
<script src="script.js"></script>
</body>
</html>
In questo codice, abbiamo utilizzato il tag per specificare il tipo di documento HTML. Abbiamo quindi creato un tag html con l’attributo lang impostato su “en” per indicare che la lingua della pagina è l’inglese.
Nella sezione head del documento, abbiamo specificato il set di caratteri utilizzato nella pagina web, il viewport e il titolo della pagina. Abbiamo anche aggiunto un collegamento al nostro file CSS esterno.
All’interno del tag body, abbiamo creato un div con la classe “container”, che ci permetterà di centrare la nostra pagina di login nella finestra del browser. All’interno di questo div, abbiamo creato un’intestazione h1 con il testo “Login” e un form che contiene i campi di input per l’indirizzo email e la password.
Abbiamo utilizzato i tag label per associare un’etichetta descrittiva ai campi di input. Questo è utile per migliorare l’accessibilità del nostro sito web. Abbiamo anche utilizzato l’attributo required sui campi di input per garantire che l’utente inserisca i dati richiesti.
Infine, abbiamo aggiunto un pulsante di accesso con il tipo “submit”, che invierà i dati del modulo quando viene premuto.
Styling della pagina di login con CSS
Ora che abbiamo creato la struttura HTML di base della nostra pagina di login, possiamo passare alla formattazione e allo styling utilizzando CSS. In questo caso, creeremo uno stile semplice e pulito per la nostra pagina di login.
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background-color: #f5f5f5;
}
.container {
width: 100%;
max-width: 400px;
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}
h1 {
margin-bottom: 30px;
}
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;
}
button {
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
padding: 10px 20px;
cursor: pointer;
}
button:hover {
background-color: #0069d9;
}
In questo codice, abbiamo utilizzato il selettore universale * per 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.
Abbiamo quindi impostato il margine e il padding del corpo a 0 e impostato il tipo di carattere su sans-serif. Abbiamo anche impostato il colore di sfondo del corpo su un grigio chiaro.
Nel nostro selettore di classe .container, abbiamo impostato la larghezza massima del contenitore su 400px e lo abbiamo centrato nella finestra del browser utilizzando il margin: 0 auto. Abbiamo impostato il display su flex e la direzione del flessibile su colonna per posizionare il contenuto al centro della pagina. Abbiamo anche impostato l’altezza del contenitore su 100vh per coprire l’intera altezza della finestra del browser.
Nel nostro selettore h1, abbiamo impostato il margine inferiore su 30px per creare uno spazio tra l’intestazione e il modulo di login.
Nel nostro selettore form, abbiamo impostato la larghezza su 100% per adattarsi al contenitore genitore. Abbiamo anche utilizzato il selettore label per impostare le etichette come elementi blocco con un margine inferiore di 10px e un carattere in grassetto.
Per i campi di input, abbiamo impostato la larghezza su 100%, il padding su 10px e il bordo su 1px con un colore grigio chiaro. Abbiamo anche impostato il margine inferiore su 20px per creare uno spazio tra i campi di input.
Infine, abbiamo utilizzato il selettore button per impostare lo stile del pulsante di accesso. Abbiamo impostato il colore di sfondo su blu e il colore del testo su bianco. Abbiamo anche impostato il bordo su none e il bordo in rilievo su 5px. Abbiamo utilizzato il selettore :hover per impostare uno stile di sfondo diverso quando il cursore del mouse si posiziona sopra il pulsante.
Ora che abbiamo impostato la struttura e lo stile della nostra pagina di login, dobbiamo aggiungere un po’ di funzionalità utilizzando JavaScript per gestire l’invio del modulo e l’autenticazione dell’utente.
const form = document.querySelector('form');
const username = document.querySelector('#username');
const password = document.querySelector('#password');
form.addEventListener('submit', (event) => {
event.preventDefault();
const usernameValue = username.value.trim();
const passwordValue = password.value.trim();
if (usernameValue === '') {
showError(username, 'Username is required');
} else {
showSuccess(username);
}
if (passwordValue === '') {
showError(password, 'Password is required');
} else {
showSuccess(password);
}
if (usernameValue !== '' && passwordValue !== '') {
alert('Logged in successfully!');
form.reset();
}
});
function showError(input, message) {
const formControl = input.parentElement;
formControl.classList.add('error');
const errorText = formControl.querySelector('.error-text');
errorText.textContent = message;
}
function showSuccess(input) {
const formControl = input.parentElement;
formControl.classList.remove('error');
formControl.classList.add('success');
}
username.addEventListener('focus', () => {
const formControl = username.parentElement;
formControl.classList.remove('error');
});
password.addEventListener('focus', () => {
const formControl = password.parentElement;
formControl.classList.remove('error');
});
In questo codice, abbiamo utilizzato il metodo querySelector per selezionare il modulo di login, il campo dell’username e il campo della password.
Abbiamo quindi utilizzato il metodo addEventListener per ascoltare l’evento di invio del modulo. Nel gestore dell’evento, abbiamo utilizzato il metodo preventDefault per impedire all’evento di essere inviato alla pagina del server.
Abbiamo quindi estratto i valori dei campi dell’username e della password utilizzando il metodo value e trim.
Abbiamo quindi utilizzato una serie di istruzioni if per verificare se i campi dell’username e della password sono vuoti o meno. Se un campo è vuoto, abbiamo utilizzato la funzione showError per mostrare un messaggio di errore sotto il campo corrispondente. Se un campo non è vuoto, abbiamo utilizzato la funzione showSuccess per rimuovere qualsiasi errore precedente e aggiungere uno stile di successo al campo.
Infine, se sia l’username che la password sono stati inseriti correttamente, abbiamo mostrato un messaggio di accesso riuscito utilizzando il metodo alert e resettato il modulo utilizzando il metodo reset.
Abbiamo anche creato le funzioni showError e showSuccess per gestire la visualizzazione degli errori e degli stati di successo per i campi del modulo. Abbiamo utilizzato il selettore parentElement per accedere al contenitore del campo e utilizzato i metodi classList.add e classList.remove per aggiungere o rimuovere le classi di stile necessarie. Abbiamo anche utilizzato il selettore querySelector per accedere all’elemento di testo dell’errore e impostato il testo del contenuto utilizzando la proprietà textContent.
Infine, abbiamo utilizzato gli eventi focus sui campi dell’username e della password per rimuovere eventuali messaggi di errore quando l’utente si concentra su di essi.
Inoltre, potete esplorare altre tecniche di stile e layout per rendere il modulo ancora più accattivante e user-friendly. Ad esempio, potete utilizzare animazioni CSS per rendere la transizione tra gli stati di errore e di successo più fluida e visivamente interessante.
Inoltre, potete integrare questo modulo di login con un database utente e un server back-end per rendere l’autenticazione degli utenti effettiva e sicura. Questo richiederebbe una conoscenza di base di tecnologie web come PHP e SQL, ma esistono molti tutorial online che possono aiutare a guidarvi attraverso questo processo.
Infine, è importante notare che la creazione di una pagina di login sicura è essenziale per proteggere i dati degli utenti e prevenire accessi non autorizzati. Ciò può essere fatto attraverso l’implementazione di tecniche di crittografia e autenticazione come HTTPS e la gestione dei token di autenticazione.
potrebbe essere utile in questo caso è la guida di Mozilla sulla sicurezza web, che fornisce consigli e linee guida per proteggere la propria privacy e sicurezza online: https://developer.mozilla.org/it/docs/Web/Security. Questa guida include informazioni su come proteggere la propria connessione Internet, utilizzare password sicure, gestire i cookie e molto altro ancora.
Conclusioni
In questo tutorial, abbiamo imparato come creare una pagina di login responsive utilizzando HTML, CSS e JavaScript. Abbiamo iniziato definendo la struttura del modulo di login utilizzando gli elementi HTML appropriati, quindi abbiamo utilizzato il CSS per stilizzare il modulo e renderlo reattivo su dispositivi diversi.
Abbiamo poi utilizzato JavaScript per aggiungere un po’ di funzionalità al nostro modulo, come la gestione dell’invio del modulo e l’autenticazione dell’utente. Abbiamo anche utilizzato JavaScript per gestire la visualizzazione degli errori e degli stati di successo per i campi del modulo.
Con questo tutorial, avete imparato come creare una pagina di login responsive utilizzando le tecnologie web di base. Potete utilizzare questo tutorial come base per la creazione di una pagina di login personalizzata per il vostro sito web o applicazione web. Potete anche estendere questo modulo per includere funzionalità aggiuntive, come la registrazione degli utenti o il recupero delle password.
Ti consiglio di leggere anche L’importanza della documentazione del codice: 5 migliori pratiche e strumenti.
