CSS- formulieren
Het uiterlijk van een HTML-formulier kan aanzienlijk worden verbeterd met CSS:
Invoervelden opmaken
Gebruik de widtheigenschap om de breedte van het invoerveld te bepalen:
Voorbeeld
input
{
width: 100%;
}
Het bovenstaande voorbeeld is van toepassing op alle <input>-elementen. Als u alleen een specifiek invoertype wilt opmaken, kunt u kenmerkselectors gebruiken:
input[type=text]- selecteert alleen tekstveldeninput[type=password]- selecteert alleen wachtwoordveldeninput[type=number]- selecteert alleen nummervelden- enzovoort..
Gewatteerde ingangen
Gebruik de paddingeigenschap om ruimte in het tekstveld toe te voegen.
Tip: als je veel invoer na elkaar hebt, wil je misschien ook wat margintoevoegen om meer ruimte daarbuiten toe te voegen:
Voorbeeld
input[type=text]
{
width: 100%;
padding: 12px 20px;
margin: 8px 0;
box-sizing: border-box;
}
Merk op dat we de box-sizingeigenschap hebben ingesteld op
border-box. Dit zorgt ervoor dat de opvulling en eventueel de randen worden meegenomen in de totale breedte en hoogte van de elementen.
Lees meer over de box-sizingeigenschap in ons hoofdstuk CSS Box Sizing .
Begrensde ingangen
Gebruik de bordereigenschap om de grootte en kleur van de rand te wijzigen en gebruik de border-radiuseigenschap om afgeronde hoeken toe te voegen:
Voorbeeld
input[type=text]
{
border: 2px solid red;
border-radius: 4px;
}
Als je alleen een onderrand wilt, gebruik dan de border-bottomeigenschap:
Voorbeeld
input[type=text]
{
border: none;
border-bottom: 2px solid red;
}
Gekleurde ingangen
Gebruik de background-coloreigenschap om een achtergrondkleur aan de invoer toe te voegen en de coloreigenschap om de tekstkleur te wijzigen:
Voorbeeld
input[type=text]
{
background-color: #3CBC8D;
color: white;
}
Gerichte ingangen
Sommige browsers voegen standaard een blauwe omtrek toe rond de invoer wanneer deze wordt gefocust (er wordt op geklikt). U kunt dit gedrag verwijderen door outline: none;aan de invoer toe te voegen.
Gebruik de :focusselector om iets met het invoerveld te doen wanneer het focus krijgt:
Voorbeeld
input[type=text]:focus
{
background-color: lightblue;
}
Voorbeeld
input[type=text]:focus
{
border: 3px solid #555;
}
Invoer met icoon/afbeelding
Als u een pictogram binnen de invoer wilt, gebruikt u de background-imageeigenschap en plaatst u deze bij de background-positioneigenschap. Merk ook op dat we een grote linker opvulling toevoegen om de ruimte van het pictogram te reserveren:
Voorbeeld
input[type=text]
{
background-color: white;
background-image: url('searchicon.png');
background-position: 10px 10px;
background-repeat:
no-repeat;
padding-left: 40px;
}
Geanimeerde zoekinvoer
In dit voorbeeld gebruiken we de CSS transition-eigenschap om de breedte van de zoekinvoer te animeren wanneer deze focus krijgt. U leert later meer over de
transitioneigenschap, in ons hoofdstuk CSS-overgangen .
Voorbeeld
input[type=text] {
transition: width 0.4s ease-in-out;
}
input[type=text]:focus {
width: 100%;
}
Tekstgebieden stylen
Tip: Gebruik de resizeeigenschap om te voorkomen dat de grootte van tekstgebieden wordt gewijzigd (schakel de "grabber" in de rechterbenedenhoek uit):
Voorbeeld
textarea
{
width: 100%;
height: 150px;
padding: 12px 20px;
box-sizing: border-box;
border: 2px solid #ccc;
border-radius: 4px;
background-color: #f8f8f8;
resize: none;
}
Styling Select Menu's
Voorbeeld
select
{
width: 100%;
padding: 16px 20px;
border: none;
border-radius: 4px;
background-color: #f1f1f1;
}
Invoerknoppen styling
Voorbeeld
input[type=button], input[type=submit], input[type=reset]
{
background-color: #4CAF50;
border:
none;
color: white;
padding:
16px 32px;
text-decoration: none;
margin: 4px 2px;
cursor: pointer;
}
/* Tip: use width: 100% for full-width buttons */
Voor meer informatie over het stylen van knoppen met CSS, lees onze CSS Buttons Tutorial .
Responsieve vorm
Verklein het browservenster om het effect te zien. Als het scherm minder dan 600px breed is, laat u de twee kolommen op elkaar stapelen in plaats van naast elkaar.
Geavanceerd: in het volgende voorbeeld worden mediaquery's gebruikt om een responsief formulier te maken. In een later hoofdstuk leest u hier meer over.