Nette formulieren maken met css
Leestijd: 6 min
In deze post wil ik uitleggen hoe je een netjes formulier maakt dat op verschillende apparaten werkt en er strak uitziet. Zo ga ik van het begin tot het einde uitleggen hoe je het formulier maakt in HTML en CSS. Ook leg ik wat basis elementen uit die nodig zijn om het geheel af te maken. Alles wat ik uitleg kan gemaakt worden met enkel het kladblok, toch raad ik aan om een editor als bijvoorbeeld bluefish te gebruiken. Zo een editor vult namelijk automatisch aan en kan laten zien waar fouten staan. Bluefish is open-source en kun je op www.bluefish.openoffice.nl downloaden.
Om te beginnen
Als eerste maken we 2 bestanden één .css bestand en één .html bestand voor het gemak index.html en stijl.css. Dan openen wij het html bestand en beginnen met het openen van de HTML code en de HEAD code. Dat zie er als volgt uit:
<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>netjes formulier HTML CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="content-language" content="nl">
<meta name="author" content="Reinout">
<link rel="icon" href="icon.jpg" type="image/x-icon" />
</head>
<body>
Eerst geef je het DOCTYPE mee hierdoor weet de browser wat voor een bestand hij kan verwachten. De doctype declaratie is niet hoofdletter gevoelig. Daarna open je de html tag binnen deze tag staat de hele pagina. Na de html tag komt de HEAD tag, hierin komt de link naar het stylesheet en evt javascripts, ook komen hier de metatags die informatie geven over de content van de website aan bijv. de zoekmachine. De titel komt ook in de HEAD tag na de TITLE tag. De LINK tag gebruik je om bepaalde documenten aan de website te linken REL staat voor relatie die het document heeft t.o.v. de wesite zoals rel="stylesheet". Zo kunnen wij de locatie naar het stylesheet aangeven na de href=" wat staat voor hypertext reference. Viewport scale 1 dit zorgt ervoor dat de pagina op elk apparaat juist gezoomd is. Meer informatie over metatags kun je vinden op: www.w3schools.com of nog uitgebreider op: www.metatags.nl. Als laatste stellen wij een icoon in wat wordt weergegeven in de adresbalk, daarna sluit je het HEAD element en open je het body element
Het kleurenschema
Nu gaan we beginnen met het zichtbare gedeelte na de BODY tag, daarvoor moeten we wel eerst weten hoe we de website eruit willen laten zien. Om te beginnen open je het stylesheet en gaan we op zoek naar een kleuren schema voor de pagina. Google even wat kleurenschema's om ideeën op te doen of kijk even op www.paletton.com deze gebruik ik zelf ook als ik geen inspiratie heb. Voor dit voorbeeld heb ik gekozen voor blauw en oranje tinten.
Het stylesheet:
@charset "UTF-8";
/*
kleuren schema #69d2e7 #a7dbd8 #e0e4cc #f38630 #fa6900
#23a7c0 #44c0d7 #ffb981 #ffa258
#bbc29d #9ba371
h1,h2,h3 #fa6900
p #f38630
background #69d2e7 #a7dbd8
box #e0e4cc
*/
body {
padding:0; /* buitenmarge */
margin:0; /* binnenmarge */
background-color: #a7dbd8; /* achtergrondkleur oude browsers */
background: linear-gradient(#69d2e7,#a7dbd8); /* kleurverloop achtergrond */
font-family: Verdana; /* lettertype */
}
Eerst geef je aan welk charset er gebruikt moet worden, vanaf html5 is UTF-8 erbij gekomen dus die gebruiken wij ook. Meer informatie hierover op www.w3schools.com. Met /* open je een commentaar regel hier kun je opmerkingen en uitleg geven over de code die er staat zodat het overzichtelijk en begrijpelijk blijft met */ sluit je hem weer. Meestal zet ik bovenaan de sheet het kleurenschema dat ik wil gebruiken zodat je het makkelijk terugvindt.
De body, in dit gedeelte beheer je de achtergrond en het lettertype wat je wilt gebruiken. Je kunt deze waardes altijd per item overrulen. De margin en padding zet ik hier op 0 zodat ik geen marges heb, de padding is de marge aan de binnenkant van het item en de margin is de marge aan de buitenkant. Dan is het tijd voor de achtergrond van de pagina, hier kies ik voor een lineair kleurverloop. De bovenste regel is voor browsers die geen kleurverloop ondersteunen, vroeger moest je per browser een prefix gebruiken zoals -webkit of -moz maar dat is sinds ongeveer 2010 overbodig geworden. Backward compatibility is natuurlijk fijn maar je hoeft het niet te overdrijven.
/* reset border-box */
* {
box-sizing: border-box; /* www.w3schools.com/CSSref/css3_pr_box-sizing.asp */
margin: 0;
padding: 0;
}
/* dit zorgt ervoor dat het er in elke browser hetzelfde uitziet */
input,
textarea,
select,
button {
font-size: 15px; /* tekstgrootte formulierelementen */
}
a:hover {
text-decoration: none; /* geen decoratie bij links */
}
:focus {
outline: none; /* geen omranding bij anklikken */
}
*, ::after, ::before { /* voor en na focussen op een element */
box-sizing: inherit; /* www.w3schools.com/CSSref/css3_pr_box-sizing.asp */
}
textarea,
input {
outline: none; /* extra rand buiten border */
border: none; /* geen omranding */
/* www.w3schools.com/css/css_outline.asp */
}
textarea,
input:focus {
border-color: transparent!important; /* !important zodat andere regels worden genegeerd */
}
button {
outline: none!important;
border: none;
background: 0 0;
}
button:hover {
cursor: pointer; /* muis aanwijzer wordt een handje */
/* alle mogelijkheden hier:
www.w3schools.com/csSref/pr_class_cursor.asp */
}
h1,
h2,
h3 {
color: #fa6900; /* koptekst kleur */
}
p {
color: #f38630; /* paragraaf kleur */
}
In dit gedeelte stel ik de beginwaarden in zodat het alle elementen er in elke browser hetzelfde uitzien. Bij dit formulier willen wij de invoer velden helemaal zelf stijlen daarom verwijder ik hier de omranding en de achtergrond. Ook stel ik alvast de kleuren in voor de tekst de kopteksten H1 H2 H3.
#pagewrapper {
max-width: 1280px; /* breedte */
min-width: 512px; /* min-breedte bij kleiner scherm */
min-height: 100vh; /* schermvullend */
margin:0 auto; /* marge boven en onder 0 links en rechts auto */
}
#formbox {
display: flex; /* weergave als flex element zie flexbox.help */
width: 75%; /* breedte 75% t.o.v. #pagewrapper */
min-width: 350px; /* min breedte bij kleiner scherm */
margin-top: 50px; /* marge boven */
margin-left: auto; /* marge links */
margin-right: auto; /* marge rechts */
justify-content: center; /* centreren */
align-items: center; /* centreer items */
background-color: #e0e4cc; /* achtergrond kleur */
}
Nu is het tijd voor de opmaak van de pagina, ik wil dat de website schaalbaar is en dat de achtergrond helemaal doorloopt tot onder. Daarna maak ik een vak waar het formulier in komt.
In CSS is display: flex; een handige manier om content te ordenen, samen met justify-content en align-items bepaalt dit hoe de div's(de items) worden uitgelijnd. Meer informatie en een handige test layout kun je vinden op https://flexbox.help. Nu kan de pagina opgemaakt worden zodat er iets te zien is in de browser.
<div id="pagewrapper">
<div id="header"></div>
<!-- begin form -->
<div id="formbox">
<!-- hier komt het formulier -->
<form class="contact-form form-isvalid" method="post" action="check">
<span class="contact-form-title">Contactformulier</span>
<!-- eerste input -->
</form><!-- einde formulier -->
</div><!-- einde formbox -->
</div><!-- eide pagewrapper hierna komt </body> -->
</body>
</html>
Omdat je al snel heel veel elementen kan hebben is het handig om bij het sluiten van een element een opmerking te paatsen voor welk element het was. Ook maak ik een header element, hier kun je bijvorbeeld een menu maken. Dan is het tijd om het formulier aan te maken, ik probeer zoveel mogelijk duidelijke benamingen te geven aan elke class en elk onderdeel. Het formulier noem ik contact-form, alle elementen in het formulier laat ik daarmee beginnen. Dan kan de titel nu opgemaakt worden.
/* contact form */
.contact-form {
width: 80%; /* breedte van het formulier t.o.v. #formbox */
justify-content: center; /* centreer elementen horizontaal */
align-items: center; /* centreer verticaal */
margin: 50px; /* margin top */
}
.contact-form-title {
font-size: 24px; /* tekstgrootte */
color: #fa6900; /* kleur tekst */
text-align: center; /* gecentreerd */
width: 100%; /* breedte */
display: block; /* weergave als block element */
padding-bottom: 35px; /* binnenmarge onder 54px; */
}
Nu begint het formulier al aardig vorm te krijgen en kunnen we beginnen met de invoervelden.
Het eerste invoerveld
Voor een contact formulier heb je een aantal velden nodig namelijk: Naam, Emailadres, onderwerp en een tekstvak voor het bericht. Eventueel is er ook een vak nodig om te testen of het veld niet door een spambot is ingevuld. In dit voorbeeld doen we de opmaak van de velden helemaal zelf met HTML en CSS, dit is de code:
<!-- eerste input -->
<div class="contact-form-input-box" data-validate="Naam vereist">
<input class="contact-form-input" type="text" name="naam">
<span class="contact-form-input-focus" data-placeholder="NAAM"></span>
</div>
Het eerste element is een container waar het invoerveld in komt, daarna komt het invoerveld zelf en als laatste een span waar de placeholder tekst komt. Het is de bedoeling dat als er wat ingevuld wordt de tekst NAAM omhoog schuift. Dat doen we met behulp van css. Ook geef ik alvast het atribuut data-validate, dat gebruiken we later voor de validatie van de velden.
/* input container input field and placeholder focus */
.contact-form-input-box {
width: 100%; /* breedte t.o.v. .contact-form */
position: relative; /* positie t.o.v. .contact-form */
border-bottom: 2px solid #a7dbd8; /* onderrand 2px kleur volgens schema */
margin-bottom: 20px; /* onder margin voordat het volgende veld begint */
}
.contact-form-input {
display: block; /* display als block element */
width: 100%;
font-size: 15px;
color: #554c4c;
height: 35px;
}
.contact-form-input-focus {
position: absolute; /* positie t.o.v. contact-form-input-box */
display: block;
width: 100%; /* breedte vullen */
height: 100%; /* hoogte vullen */
top: 0;
left: 0;
pointer-events: none;
}
input.contact-form-input+.contact-form-input-focus::after { /* centreer placeholder tekst */
top: 10px; /* 10 px vanaf boven */
left: 0;
}
/* nu het stuk om ervoor te zorgen dat de placeholder tekst naar boven shuift
als we op het veld klikken en dat de onderrand van kleur verandered */
.contact-form-input-focus::before { /* het gedeelte voor de onder rand */
content: "";
display: block;
position: absolute;
height: 2px; /* maak een blok van 2px hoog */
bottom: -2px; /* start -2 px van onder zodat de onderrand gevuld wordt */
left: 0;
width: 0;
transition: all 1s; /* duur van animatie bij verandering */
background: #fa6900;
background: linear-gradient(#fa6900,#f38630);
}
.contact-form-input-focus::after { /* het gedeelte voor de place holder tekst */
content: attr(data-placeholder); /* tekst bij data-placeholder in span */
display: block;
width: 100%;
position: absolute; /* positie t.o.v. contact-form-input-box */
top: 0;
left: 0;
font-size: 13px;
color: #f38630;
transition: all .5s; /* animatie mag sneller als bij onderrand */
}
.contact-form-input:focus+.contact-form-input-focus::after {
top: -13px; /* vershuif tekst naar boven */
}
.contact-form-input:focus+.contact-form-input-focus::before {
width: 100%; /* onderrand van 0 naar 100% breedte */
}
Als je nu kijkt schuift de tekst naar boven en wordt de onderrand een andere kleur. Alleen als je wat invult in het veld en je verlaat het schuift de placeholder tekst weer naar beneden. Dit gaan wij met behulp van JAVA en CSS voorkomen. Met behulp van een script testen wij of er data staat in een invoerveld, zo ja blijft de placeholder tekst boven zo nee dan zakt de tekst weer. Eerst maken wij het gedeelte klaar in CSS.
/* maak een extra regel met prefix .has-value voor de placeholder tekst en onderrand */
.has-value.contact-form-input+.contact-form-input-focus::after {
top: -13px;
}
.has-value.contact-form-input+.contact-form-input-focus::before {
width: 100%;
}
Nu kunnen we met behulp van JAVA testen of het vak is ingevuld en de prefix .has-value voor de class zetten zodat de tekst boven blijft staan. Maak hiervoor een nieuw bestand bijvoorbeeld: validate.js
(function($){
"use strict";
$('.contact-form-input').each(function(){
$(this).on('blur',function(){
if($(this).val().trim()!=""){
$(this).addClass('has-value');
}
else{
$(this).removeClass('has-value');
}
})
})
// hier komt het gedeelte om de invoer te controleren
// voordat het formulier verzonden wordt
})(jQuery);
Om deze functie uit te voeren heb je wel JQUERY nodig. Deze kun je vinden op: jquery.com. Voer in het HEAD gedeelte van de HTML de volgende regel in:
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!-- let op dit is op het moment van schrijven de nieuwste versie, zorg er altijd
voor dat je de nieuwste versie gebruikt. kijk daarvoor op jquery.com -->
Nu moet alleen het eigen script nog worden gelinkt, dit moet niet in de head regel maar aan het einde van het document.
</div><!-- einde formbox -->
</div><!-- eide pagewrapper hierna komt </body> -->
<script src="validate.js"></script>
</body>
</html>
Conclussie
Als alles is gelukt heb je nu een formulier met 1 invoerveld dat reageert op input. Volgende week komt de rest van de uitleg, dan leer je hoe je met javascript een email adres kunt controleren en hoe je een tekstveld maakt. Daarna gaan we met php aan de slag om het formulier ook daadwerkelijk te verzenden.
Ga gelijk door met lezen deel 2 is uit op: www.houtpc.nl
Voor nu is dit de volledige code:
HTML:
<!doctype html>
<html>
<head>
<title>netjes formulier HTML CSS</title>
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="content-language" content="nl">
<meta name="author" content="Reinout">
<link rel="icon" href="icon.jpg" type="image/x-icon" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>
<body>
<div id="pagewrapper">
<div id="header"></div>
<!-- begin form -->
<div id="formbox">
<form class="contact-form form-isvalid" method="post" action="check">
<span class="contact-form-title">Contactformulier</span>
<!-- input name -->
<div class="contact-form-input-box validate-input" data-validate="Naam vereist">
<input class="contact-form-input" type="text" name="naam">
<span class="contact-form-input-focus" data-placeholder="NAAM"></span>
</div><!-- einde input naam -->
</form><!-- einde formulier -->
</div><!-- einde formbox -->
</div><!-- eide pagewrapper hierna komt </body> -->
<script src="validate.js"></script>
</body>
</html>
CSS:
@charset "UTF-8";
/*
kleuren schema #69d2e7 #a7dbd8 #e0e4cc #f38630 #fa6900
#23a7c0 #44c0d7 #ffb981 #ffa258
#bbc29d #9ba371
h1,h2,h3 #fa6900
p #f38630
background #69d2e7 #a7dbd8
box #e0e4cc
*/
body {
padding:0; /* buitenmarge */
margin:0; /* binnenmarge */
background-color: #a7dbd8; /* achtergrondkleur oude browsers */
background: linear-gradient(#69d2e7,#a7dbd8); /* kleurverloop achtergrond */
font-family: Verdana; /* lettertype */
}
/* reset border-box */
* {
box-sizing: border-box; /* www.w3schools.com/CSSref/css3_pr_box-sizing.asp */
margin: 0;
padding: 0;
}
/* dit zorgt ervoor dat het er in elke browser hetzelfde uitziet */
input,
textarea,
select,
button {
font-size: 15px; /* tekstgrootte formulierelementen */
}
a:hover {
text-decoration: none; /* geen decoratie bij links */
}
:focus {
outline: none; /* geen omranding bij anklikken */
}
*, ::after, ::before { /* voor en na focussen op een element */
box-sizing: inherit; /* www.w3schools.com/CSSref/css3_pr_box-sizing.asp */
}
textarea,
input {
outline: none; /* extra rand buiten border */
border: none; /* geen omranding */
/* www.w3schools.com/css/css_outline.asp */
}
textarea,
input:focus {
border-color: transparent!important; /* !important zodat andere regels worden genegeerd */
}
button {
outline: none!important;
border: none;
background: 0 0;
}
button:hover {
cursor: pointer; /* muis aanwijzer wordt een handje */
/* alle mogelijkheden hier:
www.w3schools.com/csSref/pr_class_cursor.asp */
}
h1,
h2,
h3 {
color: #fa6900; /* koptekst kleur */
}
p {
color: #f38630; /* paragraaf kleur */
}
#pagewrapper {
max-width: 1280px; /* breedte */
min-width: 512px; /* min-breedte bij kleiner scherm */
min-height: 100vh; /* schermvullend */
margin:0 auto; /* marge boven en onder 0 links en rechts auto */
}
#formbox {
display: flex; /* weergave als flex element zie flexbox.help */
width: 75%; /* breedte 75% t.o.v. #pagewrapper */
min-width: 350px; /* min breedte bij kleiner scherm */
margin-top: 50px; /* marge boven */
margin-left: auto; /* marge links */
margin-right: auto; /* marge rechts */
justify-content: center; /* centreren */
align-items: center; /* centreer items */
background-color: #e0e4cc; /* achtergrond kleur */
}
/* contact form */
.contact-form {
width: 80%; /* breedte van het formulier t.o.v. #formbox */
justify-content: center; /* centreer elementen horizontaal */
align-items: center; /* centreer verticaal */
margin: 50px; /* margin top 50px */
}
.contact-form-title {
font-size: 24px; /* tekstgrootte */
color: #fa6900; /* kleur tekst */
text-align: center; /* gecentreerd */
width: 100%; /* breedte */
display: block; /* weergave als block element */
padding-bottom: 35px; /* binnenmarge onder 54px; */
}
/* input container input field and placeholder focus */
.contact-form-input-box {
width: 100%; /* breedte t.o.v. .contact-form */
position: relative; /* positie t.o.v. .contact-form */
border-bottom: 2px solid #a7dbd8; /* onderrand 2px kleur volgens schema */
margin-bottom: 20px; /* onder margin voordat het volgende veld begint */
}
.contact-form-input {
display: block; /* display als block element */
width: 100%;
font-size: 15px;
color: #554c4c;
height: 35px;
}
.contact-form-input-focus {
position: absolute; /* positie t.o.v. contact-form-input-box */
display: block;
width: 100%; /* breedte vullen */
height: 100%; /* hoogte vullen */
top: 0;
left: 0;
pointer-events: none;
}
input.contact-form-input+.contact-form-input-focus::after { /* centreer placeholder tekst */
top: 10px; /* 10 px vanaf boven */
left: 0;
}
/* nu het stuk om ervoor te zorgen dat de placeholder tekst naar boven shuift
als we op het veld klikken en dat de onderrand van kleur verandered */
.contact-form-input-focus::before { /* het gedeelte voor de onder rand */
content: "";
display: block;
position: absolute;
height: 2px; /* maak een blok van 2px hoog */
bottom: -2px; /* start -2 px van onder zodat de onderrand gevuld wordt */
left: 0;
width: 0;
transition: all 1s; /* duur van animatie bij verandering */
background: #fa6900;
background: linear-gradient(#fa6900,#f38630);
}
.contact-form-input-focus::after { /* het gedeelte voor de place holder tekst */
content: attr(data-placeholder); /* tekst bij data-placeholder in span */
display: block;
width: 100%;
position: absolute; /* positie t.o.v. contact-form-input-box */
top: 0;
left: 0;
font-size: 13px;
color: #f38630;
transition: all .5s; /* animatie mag sneller als bij onderrand */
}
.contact-form-input:focus+.contact-form-input-focus::after {
top: -13px; /* vershuif tekst naar boven */
}
.contact-form-input:focus+.contact-form-input-focus::before {
width: 100%; /* onderrand van 0 naar 100% breedte */
}
/* maak een extra regel met prefix .has-value voor de placeholder tekst en onderrand */
.has-value.contact-form-input+.contact-form-input-focus::after {
top: -13px;
}
.has-value.contact-form-input+.contact-form-input-focus::before {
width: 100%;
}
JAVA:
(function($){
"use strict";
$('.contact-form-input').each(function(){
$(this).on('blur',function(){
if($(this).val().trim()!=""){
$(this).addClass('has-value');
}
else{
$(this).removeClass('has-value');
}
})
})
// hier komt het gedeelte om de invoer te controleren
// voordat het formulier verzonden wordt
})(jQuery);