Hoe OM - Registreer Vorm
Leer hoe om 'n registervorm met CSS te skep.
Registreer
Vul asseblief hierdie vorm in om 'n rekening te skep.
Deur 'n rekening te skep, stem jy in tot ons bepalings en privaatheid .
Reeds 'n rekening? Meld aan
Hoe om 'n registrasievorm te skep
Stap 1) Voeg HTML by:
Gebruik 'n <form>-element om die invoer te verwerk. U kan meer hieroor leer in ons PHP- tutoriaal. Voeg dan insette (met 'n bypassende etiket) by vir elke veld:
Voorbeeld
<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>
Stap 2) Voeg CSS by:
Voorbeeld
* {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;
}
Wenk: Gaan na ons HTML-vormhandleiding om meer oor HTML-vorms te wete te kom.
Wenk: Gaan na ons CSS-vormhandleiding om meer te wete te kom oor hoe om vormelemente te stileer.