Come creare: Modulo di registrazione
- Pagina precedente Modulo di accesso
- Pagina successiva Modulo di checkout
Impara come creare moduli di registrazione responsive utilizzando CSS.
Clicca sul pulsante per aprire il modulo di registrazione:
×
Come creare un modulo di iscrizione
Passo 1 - Aggiungi HTML:
Usa l'elemento <form> per gestire l'input. Puoi trovare ulteriori informazioni nei nostri tutorial PHP.
Aggiungi un controllo di input per ogni campo (e con un etichetta corrispondente):
<form action="action_page.php" style="border:1px solid #ccc">
<div class="container">
<h1>Iscriviti</h1>
<p>Compila questo modulo per creare un account.</p>
<hr>
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Inserisci Email" name="email" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Inserisci Password" name="psw" required>
<label for="psw-repeat"><b>Ripeti Password</b></label>
<input type="password" placeholder="Ripeti Password" name="psw-repeat" required>
<label>
<input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px">Ricordami
</label>
<p>Creando un account, accetti i nostri <a href="#" style="color:dodgerblue">Termini e Privacy</a>.</p>
<div class="clearfix">
<button type="button" class="cancelbtn">Annulla</button>
<button type="submit" class="signupbtn">Iscriviti</button>
</div>
</div>
</form>
Secondo passo - Aggiungi CSS:
* {box-sizing: border-box}
/* Campi di input a larghezza piena */
input[type=text], input[type=password] {
larghezza: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
input[type=text]:focus, input[type=password]:focus {
background-color: #ddd;
outline: none;
}
hr {
bordo: 1px solido #f1f1f1;
margine inferiore: 25px;
}
/* Imposta stili per tutti i pulsanti */
button {
background-color: #04AA6D;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursore: puntatore;
larghezza: 100%;
opacity: 0.9;
}
button:hover {
opacity:1;
}
/* Imposta stili aggiuntivi per il pulsante di annullamento */
.cancelbtn {
padding: 14px 20px;
background-color: #f44336;
}
/* Fai fluttuare i pulsanti di annullamento e registrazione e aggiungi larghezze uguali */
.annulla, .iscriviti {
float: left;
width: 50%;
}
/* Aggiungi un bordo interno all'elemento contenitore */
.container {
padding: 16px;
}
/* Pulisci il浮动 */
.clearfix::after {
contenuto: "";
clear: both;
display: table;
}
/* Modifica lo stile dei pulsanti di annullamento e di iscrizione per gli schermi extra piccoli */
@media schermo and (larghezza massima: 300px) {
.annulla, .iscriviti {
larghezza: 100%;
}
}
Come creare un modulo di registrazione modale
Passo 1 - Aggiungi HTML:
Usa l'elemento <form> per gestire l'input. Puoi trovare ulteriori informazioni nei nostri tutorial PHP.
Aggiungi un controllo di input per ogni campo (e con un etichetta corrispondente):
<!-- Bottone per aprire il modale -->
<button onclick="document.getElementById('id01').style.display='block'">Iscriviti</button>
<!-- Il Modale (contiene il modulo di iscrizione) -->
<div id="id01" class="modal">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Chiudi Modale">times;</span>
<form class="modal-content" action="/action_page.php">
<div class="container">
<h1>Iscriviti</h1>
<p>Compila questo modulo per creare un account.</p>
<hr>
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Inserisci Email" name="email" required>
<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Inserisci Password" name="psw" required>
<label for="psw-repeat"><b>Ripeti Password</b></label>
<input type="password" placeholder="Ripeti Password" name="psw-repeat" required>
<label>
<input type="checkbox" checked="checked" name="remember" style="margin-bottom:15px"> Ricordami
</label>
<p>Creando un account, accetti i nostri <a href="#" style="color:dodgerblue">Termini e Privacy</a>.</p>
<div class="clearfix">
<button type="button" onclick="document.getElementById('id01').style.display='none'" class="cancelbtn">Annulla</button>
<button type="submit" class="signup">Iscriviti</button>
</div>
</div>
</form>
</div>
Secondo passo - Aggiungi CSS:
* {box-sizing: border-box}
/* Campi di input a larghezza completa */
input[type=text], input[type=password] {
larghezza: 100%;
padding: 15px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
background: #f1f1f1;
}
/* Aggiungi colore di sfondo quando l'input riceve il focus */
input[type=text]:focus, input[type=password]:focus {
background-color: #ddd;
outline: none;
}
/* Imposta stili per tutti i pulsanti */
button {
background-color: #04AA6D;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursore: puntatore;
larghezza: 100%;
opacity: 0.9;
}
button:hover {
opacity:1;
}
/* Imposta stili aggiuntivi per il pulsante di annullamento */
.cancelbtn {
padding: 14px 20px;
background-color: #f44336;
}
/* Fai fluttuare i pulsanti di annullamento e registrazione e imposta larghezze uguali */
.annulla, .iscriviti {
float: left;
width: 50%;
}
/* Aggiungi spazi interni al contenitore degli elementi */
.container {
padding: 16px;
}
/* Modale (sfondo) */
.modal {
display: none; /* Nascosto per default */
position: fixed; /* Rimane al suo posto */
z-index: 1; /* Situato in alto */
left: 0;
top: 0;
width: 100%; /* Larghezza completa */
height: 100%; /* Altezza completa */
overflow: auto; /* Abilita lo scorrimento se necessario */
colore di sfondo: #474e5d;
margine superiore: 50px;
}
/* Contenuto / casella modale */
.modal-content {
colore di sfondo: #fefefe;
margine: 5% auto 15% auto; /* A 5% di altezza superiore, a 15% di altezza inferiore e centrato */
bordo: 1px solido #888;
larghezza: 80%; /* Potrebbe essere più o meno, a seconda delle dimensioni dello schermo */
}
/* Imposta lo stile della linea orizzontale */
hr {
bordo: 1px solido #f1f1f1;
margine inferiore: 25px;
}
/* Bottone di chiusura (x) */
.close {
posizione: assoluto;
destra: 35px;
top: 15px;
dimensione del carattere: 40px;
peso della lettera: bold;
colore: #f1f1f1;
}
.close:hover,
.close:focus {
colore: #f44336;
cursore: puntatore;
}
/* Pulisci fluttuazioni */
.clearfix::after {
contenuto: "";
clear: both;
display: table;
}
/* Modifica lo stile dei pulsanti di annullamento e di iscrizione per gli schermi extra piccoli */
@media schermo and (larghezza massima: 300px) {
.annulla, .iscriviti {
larghezza: 100%;
}
}
Suggerimento:Puoi anche utilizzare il seguente codice JavaScript per chiudere la finestra modale facendo clic su qualsiasi area al di fuori del contenuto della modale (e non solo utilizzando il pulsante "×" o "annulla" per chiudere):
<script>
// Ottieni la modalità
var modal = document.getElementById('id01');
// Quando l'utente clicca su qualsiasi posizione al di fuori del modello, chiudilo
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
Pagine correlate
Tutorial:Modulo HTML
Tutorial:Modulo CSS
- Pagina precedente Modulo di accesso
- Pagina successiva Modulo di checkout
