How TO - Registrierungsformular
Erfahren Sie, wie Sie mit CSS ein Registrierungsformular erstellen.
Registrieren
Bitte füllen Sie dieses Formular aus, um ein Konto zu erstellen.
Indem Sie ein Konto erstellen, stimmen Sie unseren Nutzungsbedingungen und Datenschutz zu .
Sie haben bereits ein Konto? Anmelden
So erstellen Sie ein Registrierungsformular
Schritt 1) HTML hinzufügen:
Verwenden Sie ein <form>-Element, um die Eingabe zu verarbeiten. Mehr dazu erfahren Sie in unserem PHP -Tutorial. Fügen Sie dann Eingaben (mit einem passenden Label) für jedes Feld hinzu:
Beispiel
<form action="action_page.php">
<div
class="container">
<h1>Register</h1>
<p>Please fill in this form to create an account.</p>
<hr>
<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email"
id="email" required>
<label for="psw"><b>Password</b></label>
<input type="password"
placeholder="Enter Password" name="psw" id="psw" required>
<label for="psw-repeat"><b>Repeat Password</b></label>
<input
type="password" placeholder="Repeat Password" name="psw-repeat"
id="psw-repeat" required>
<hr>
<p>By creating an account you agree to
our <a href="#">Terms & Privacy</a>.</p>
<button type="submit" class="registerbtn">Register</button>
</div>
<div class="container signin">
<p>Already
have an account? <a href="#">Sign in</a>.</p>
</div>
</form>
Schritt 2) CSS hinzufügen:
Beispiel
* {box-sizing: border-box}
/* Add padding to containers */
.container {
padding: 16px;
}
/* Full-width input fields */
input[type=text],
input[type=password] {
width: 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;
}
/* Overwrite default styles of hr */
hr
{
border: 1px solid #f1f1f1;
margin-bottom: 25px;
}
/* Set a
style for the submit/register button */
.registerbtn {
background-color:
#04AA6D;
color: white;
padding: 16px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.9;
}
.registerbtn:hover
{
opacity:1;
}
/* Add a blue text color to links */
a {
color: dodgerblue;
}
/* Set a grey background color and center the
text of the "sign in" section */
.signin {
background-color:
#f1f1f1;
text-align: center;
}
Tipp: Besuchen Sie unser HTML-Formular-Tutorial , um mehr über HTML-Formulare zu erfahren.
Tipp: Besuchen Sie unser CSS-Formular-Tutorial , um mehr darüber zu erfahren, wie Sie Formularelemente formatieren.