Hoe OM - E-pos nuusbrief
Leer hoe om 'n e-posnuusbrief met CSS te skep.
Teken in op ons nuusbrief
Lorem ipsum teks oor hoekom jy moet inteken op ons nuusbrief blabla. Lorem ipsum teks oor hoekom jy moet inteken op ons nuusbrief blabla. Lorem ipsum teks oor hoekom jy moet inteken op ons nuusbrief blabla.
Hoe om 'n nuusbrief 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 by vir elke veld, saam met 'n "stuur"-knoppie:
Voorbeeld
<form action="action_page.php">
<div class="container">
<h2>Subscribe to our Newsletter</h2>
<p>Lorem ipsum..</p>
</div>
<div class="container" style="background-color:white">
<input type="text" placeholder="Name" name="name" required>
<input type="text" placeholder="Email address" name="mail" required>
<label>
<input type="checkbox" checked="checked"
name="subscribe"> Daily Newsletter
</label>
</div>
<div class="container">
<input type="submit"
value="Subscribe">
</div>
</form>
Stap 2) Voeg CSS by:
Voorbeeld
/* Style the form element with a border
around it */
form {
border: 4px solid #f1f1f1;
}
/* Add some padding and a grey background color to containers */
.container {
padding: 20px;
background-color: #f1f1f1;
}
/* Style the input elements and the
submit button */
input[type=text], input[type=submit] {
width: 100%;
padding: 12px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
/* Add margins to the checkbox */
input[type=checkbox] {
margin-top: 16px;
}
/* Style the submit button */
input[type=submit] {
background-color: #04AA6D;
color: white;
border: none;
}
input[type=submit]:hover {
opacity: 0.8;
}
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.