Nette formulieren maken met css
Leestijd: 6 min
In deze post ga ik verder vanaf waar we in deel 1 zijn gebleven: Nette formulieren maken met css deel 1
Vorige keer heb ik laten zien hoe je een invoerveld netjes kunt maken met CSS en hoe je het met behulp van JAVA interactief kunt maken.
Verder met de invoervelden.
Hiervoor hoeven we alleen maar de code van het eerste invoerveld te kopieëren en te plakken. Dat doe ik 2 keer zodat ik straks de velden: NAAM, EMAIL en ONDERWERP heb. Daarna ga ik aan de slag met een TEXTAREA, dat is het veld waar het hele bericht in komt.
<!-- input email -->
<div class="contact-form-input-box validate-input" data-validate="E-mail vereist">
<input class="contact-form-input" type="text" name="email">
<span class="contact-form-input-focus" data-placeholder="E-MAIL"></span>
</div><!-- einde input email -->
<!-- input onderwerp -->
<div class="contact-form-input-box validate-input" data-validate="Onderwerp vereist">
<input class="contact-form-input" type="text" name="onderwerp">
<span class="contact-form-input-focus" data-placeholder="ONDERWERP"></span>
</div><!-- einde input onderwerp -->
Na het kopieëren verander ik de benaming van de velden zodat ik straks drie verschillende velden heb. Aan het JAVASCRIPT hoeft niets aangepast te worden aangezien die zoekt naar alle .contact-form-input elementen.
Het tekstveld
Het tekstveld is niet veel lastiger dan de invoervelden maar vereist wel wat extra regels in het css bestand. Als eerste maak je het tekstveld in html zodat je kunt zien hoe het er zonder syling uitziet. Zo kun je ook goed zien wat er veranderd en hoe css werkt.
<!-- textarea bericht -->
<div class="contact-form-input-box validate-input" data-validate="Bericht vereist">
<textarea class="contact-form-input" name="Bericht"></textarea>
<span class="contact-form-input-focus" data-placeholder="BERICHT"></span>
</div>
<!-- einde textarea Bericht -->
Dan volgt hier de CSS code:
textarea.contact-form-input {
resize: vertical; /* alleen in hoogte te verstellen */
min-height: 115px;
padding-top: 13px;
padding-bottom: 13px;
}
textarea.contact-form-input+.contact-form-input-focus::after {
top: 16px;
left: 0;
}
Ik wil dat de breedte van het tekstveld niet kan veranderen zodat het gelijk blijft met de andere velden. Daarvoor gebruik ik resize: vertical; dat zorgt ervoor dat het tekstvak alleen in hoogte is te verschuiven. Omdat we dezelfde class gebruiken als bij de invoervelden hoef ik aan de java code niets te veranderen. Dan hebben we nu alleen nog een knop nodig om het formulier te verzenden. Als er op de knop gedrukt wordt wil ik wel eerst met java controleren of de velden wel zijn ingevoerd.
De verzendknop
Voor de verzenknop maak ik eerst een container waar hij in komt, daar specificeer ik de grootte van de knop. Daarna maak ik een vak wat de achtergrond wordt en als laatste komt de knop zelf. Bij deze knop wil ik de achtergrond laten bewegen als we met de muis over de knop gaan, daarom maak ik da achtergrond in een appart element. Weer begin ik met de HTML elementen zodat ik snel verandering kan zien als ik met de CSS opmaak begin.
<!-- verzenknop -->
<div class="contact-form-button-container">
<div class="contact-form-button-background"></div>
<button class="contact-form-button" type="submit">
VERZENDEN
</button>
</div>
<!-- einde verzendknop -->
Als je de nu de html code zou openen in een browser ziet het er nog niet uit, maar dat gaan we nu met de CSS opmaak doen. Eerst specificeer je de grootte van de knop. In dit geval wil ik een beetje een groot vak vergelijkbaar met maar iets groter dan de invoervelden, een hoogte van 45px en een breedte van 70%. Laat ik daar maar eens mee beginnen en dan maar zien of dat wat wordt. De CSS:
.contact-form-button-container {
display: block;
position: relative; /* relatief t.o.v. .contact-form */
z-index: 1; /* moet boven de achtergrond staan anders schuift
de achtergrond over de knop */
min-width: 300px; /* minimale breedte bij smaller scherm */
width: 70%; /* 70 % t.o.v. .contact-form */
overflow: hidden; /* overflow onzichtbaar maken de achtergrond wordt namelijk breder
en we willen een schuivend effect */
margin: 0 auto; /* centreren */
}
.contact-form-button-background {
position: absolute; /* absoluut t.o.v. .contact-form-button-container */
z-index: -1; /* naar de achtergrond zodat knoptekst leesbaar is */
width: 300%; /* breedte 3* de breedte van de knop */
height: 100%; /* hoogte vullen */
background: #a7dbd8; /* achtergrondkleur */
background: linear-gradient(-90deg,#23a7c0,#a7dbd8,#23a7c0,#a7dbd8); /* lineair verloop */
top: 0; /* gelijk houden aan bovenkant */
left: -150%; /* links de helft laten verdwijnen */
transition: all .5s; /* overgangtijd animatie */
}
.contact-form-button {
display: flex;
justify-content: center; /* horizontaal */
align-items: center; /* verticaal */
height: 45px; /* hoogte van de knop */
width: 100%; /* alle ruimte vullen */
font-size: 16px; /* zelfde als de invoer velden */
color: #fa6900; /* tekstkleur */
margin: 0 auto; /* centreren t.o.v. .contact-form-button-container */
}
Nu begint het er al aardig vorm te krijgen, alleen nog een :hover event zodat de achtergrond verschuift. Dat doen we door een hover event op de contact-form-button-container te zetten die op zijn beurt de contact-form-button-background laat bewegen.
Dit is de CSS opmaak:
.contact-form-button-container:hover .contact-form-button-background {
left: -50%; /* met deze waarde kun je spelen en zien wat er gebeurt. */
}
Nu is de opmaak van het formulier klaar en kunnen we met java controleren of de velden wel zijn ingevoerd voordat we het versturen.
invoervelden controleren met JAVA
Tijd voor wat jquery, er zijn 2 functies nodig 1 om te controleren of het veld leeg is en 1 om een class aan het element .contact-form-input-box te hangen die we daarna in CSS opmaken. Deze class noem ik .contact-form-alert. Om te testen neem ik eerst 1 invoerveld en als dat goed gaat kopieer ik de code en verander de namen voor de overige velden.
De code komt na de eerste functie maar nog voor })(jQuery);
de JAVA code:
// hier komt het gedeelte om de invoer te controleren
// voordat het formulier verzonden wordt
// eerst moeten de variabele bekend zijn
var name=$('.validate-input input[name="naam"]');
// functie om te controleren of het veld niet leeg is
$('.form-isvalid').on('submit',function(){
var controle=true;
if($(name).val().trim() == ''){
showAlert(name);
controle=false; // veld is leeg return false
}
return controle;
});
// laat alert zien (invoer 1 variabele namelijk de input name welke fout is)
function showAlert(item){
var itemAlert=$(item).parent();
$(itemAlert).addClass('contact-form-alert');
// deze class wordt toegekend aan .contact-form-input-box
// in css position absolute en plaatsen t.o.v. .contact-form-input-box
}
Met var maak je een variabele aan in dit geval wilt het script weten of het invoerveld "naam" tekst bevat. Daarna voert hij een functie uit als het formulier wordt opgestuurd. Hiervoor zoekt hij .on('submit') in het formulier waar de class .form-isvalid bekend is. Daarna trim je de variabele name (hierdoor verijdert het script alle witruimte voor en na de tekst in de variabele. Als dat gedaan is controleert het script of de waarde gelijk is aan "" ( ofwel niks). Is dat waar dan voert hij de functie showAlert() uit en zet hij de controle op false zodat het formulier niet verzonden wordt.
Het werkt namelijk zo: na on submit voert het script de functie uit, als de return (in dit gevale de controle) true is wordt het formulier verzonden en anders niet.
Meer hierover op:
stackoverflow.com Een duidelijke uitleg over hoe het openen van een jquery functie werkt.
tutorialdeep.com meer over hoe je classes toevoegd.
De functie showAlert($item) gaat de class contact-form-alert toevoegen aan het element .contact-form-input-box. Zodat dit element in CSS opgemaakt kan worden en in de browser zichtbaar is. Als een veld niet is ingevoerd wil ik aan het eind van het veld een uitroepteken zien en als ik daar met de muis op ga staan wil ik de tekst van "data-validate" zien. Dit kan door in CSS de class .contact-form-alert een ::before en een ::after te geven waarbij de ::before aleen zichtbaar is bij :hover. Dit is de CSS:
/* Formulier alert */
.validate-input {
position: relative;
}
.contact-form-alert::before { /* hier komt de data-validat tekst */
content: attr(data-validate); /* deze tekst wil ik weergeven */
position: absolute; /* positie t.o.v. .validate-input */
max-width: 70%; /* maximale breedte van het vak */
background-color: #ffffff;
border: 1px solid #c80000; /* ik maak er een rode rand omheen */
border-radius: 2px; /* met afgeronde hoeken */
padding: 4px 25px 4px 10px; /* de padding gebruik ik om de tekst mooi te belijnen */
top: 50%; /* om hem verticaal te centreren */
transform: translateY(-50%); /* om hem verticaal te centreren */
right: 0; /* begin helemaal rechts */
pointer-events: none;
color: #c80000;
font-size: 13px;
text-align: left;
visibility: hidden; /* onzichtbaar en pas zichtbaar bij hover */
opacity: 0; /* doorzichtig */
transition: opacity 1s; /* duur van onzichtbaar tot zichtbaar soort fade in */
}
.contact-form-alert::after {
content: "!"; /* deze tekst wil ik weergeven */
font-weight: bold; /* ik wil een dikke tekst */
display: block;
position: absolute;
color: #c80000;
font-size: 16px;
top: 50%;
transform: translateY(-50%);
right: 8px; /* begin 8px vanaf rechts */
}
.contact-form-alert:hover:before {
visibility: visible; /* wordt zichtbaar als de muis erover beweegt */
opacity: 1; /* ondoorzichtig */
}
De .contact-form-alert::before bevat de tekst die in html in het gedeelte data-validate staat. Deze tekst is onzichtbaar totdat we met de muis over het uitroepteken bewegen. Om de hoogte te centreren doe je 50% van de top, maar omdat CSS berekend vanaf punt 0,0 dus links boven klopt dit niet helemaal vandaar de translateY(-50%). Meer informatie hierover op: coreyscorner.medium.com.
Conclusie
Tot nu toe kun je een formulier maken en opmaken met CSS ook kun je nu JQUERY gebruiken om het formulier interactief te maken. Volgende keer leg ik uit hoe je met JAVA een email adres controleert en hoe je het formulier verzend met PHP.
Tot nu is dit de volledige code:
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 -->
<!-- input email -->
<div class="contact-form-input-box validate-input" data-validate="E-mail vereist">
<input class="contact-form-input" type="text" name="email">
<span class="contact-form-input-focus" data-placeholder="E-MAIL"></span>
</div><!-- einde input email -->
<!-- input onderwerp -->
<div class="contact-form-input-box validate-input" data-validate="Onderwerp vereist">
<input class="contact-form-input" type="text" name="onderwerp">
<span class="contact-form-input-focus" data-placeholder="ONDERWERP"></span>
</div><!-- einde input onderwerp -->
<!-- textarea bericht -->
<div class="contact-form-input-box validate-input" data-validate="Bericht vereist">
<textarea class="contact-form-input" name="Bericht"></textarea>
<span class="contact-form-input-focus" data-placeholder="BERICHT"></span>
</div>
<!-- einde textarea Bericht -->
<!-- verzenknop -->
<div class="contact-form-button-container">
<div class="contact-form-button-background"></div>
<button class="contact-form-button" type="submit">
VERZENDEN
</button>
</div>
<!-- einde verzendknop -->
</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 auto; /* margin top en bottom 50px links en rechts auto */
}
.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%;
}
/* textarea */
textarea.contact-form-input {
resize: vertical;
min-height: 115px;
padding-top: 13px;
padding-bottom: 13px;
}
textarea.contact-form-input+.contact-form-input-focus::after {
top: 16px;
left: 0;
}
/* verzendknop */
.contact-form-button-container {
display: block;
position: relative; /* relatief t.o.v. .contact-form */
z-index: 1; /* moet boven de achtergrond staan anders schuift
de achtergrond over de knop */
min-width: 300px; /* minimale breedte bij smaller scherm */
width: 70%; /* 70 % t.o.v. .contact-form */
overflow: hidden; /* overflow onzichtbaar maken de achtergrond wordt namelijk breder
en we willen een schuivend effect */
margin: 0 auto; /* centreren */
}
.contact-form-button-background {
position: absolute; /* absoluut t.o.v. .contact-form-button-container */
z-index: -1; /* naar de achtergrond zodat knoptekst leesbaar is */
width: 300%; /* breedte 3* de breedte van de knop */
height: 100%; /* hoogte vullen */
background: #a7dbd8; /* achtergrondkleur */
background: linear-gradient(-90deg,#23a7c0,#a7dbd8,#23a7c0,#a7dbd8); /* lineair verloop */
top: 0; /* gelijk houden aan bovenkant */
left: -150%; /* links de helft laten verdwijnen */
transition: all .5s; /* overgangtijd animatie */
}
.contact-form-button {
display: flex;
justify-content: center; /* horizontaal */
align-items: center; /* verticaal */
width: 100%;
height: 45px; /* hoogte van de knop */
font-size: 16px; /* zelfde als de invoer velden */
color: #fa6900; /* tekstkleur */
margin: 0 auto; /* centreren t.o.v. .contact-form-button-container */
}
.contact-form-button-container:hover .contact-form-button-background {
left: -50%; /* met deze waarde kun je spelen en zien wat er gebeurt. */
}
/* Formulier alert */
.validate-input {
position: relative;
}
.contact-form-alert::before { /* hier komt de data-validat tekst */
content: attr(data-validate); /* deze tekst wil ik weergeven */
position: absolute; /* positie t.o.v. .validate-input */
max-width: 70%; /* maximale breedte van het vak */
background-color: #ffffff;
border: 1px solid #c80000; /* ik maak er een rode rand omheen */
border-radius: 2px; /* met afgeronde hoeken */
padding: 4px 25px 4px 10px; /* de padding gebruik ik om de tekst mooi te belijnen */
top: 50%; /* om hem verticaal te centreren */
transform: translateY(-50%); /* om hem verticaal te centreren */
right: 0; /* begin helemaal rechts */
pointer-events: none;
color: #c80000;
font-size: 13px;
text-align: left;
visibility: hidden; /* onzichtbaar en pas zichtbaar bij hover */
opacity: 0; /* doorzichtig */
transition: opacity 1s; /* duur van onzichtbaar tot zichtbaar soort fade in */
}
.contact-form-alert::after {
content: "!"; /* deze tekst wil ik weergeven */
font-weight: bold; /* ik wil een dikke tekst */
display: block;
position: absolute;
color: #c80000;
font-size: 16px;
top: 50%;
transform: translateY(-50%);
right: 8px; /* begin 8px vanaf rechts */
}
.contact-form-alert:hover:before {
visibility: visible; /* wordt zichtbaar als de muis erover beweegt */
opacity: 1; /* ondoorzichtig */
}
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
// eerst moeten de variabele bekend zijn
var name=$('.validate-input input[name="naam"]');
// functie om te controleren of het veld niet leeg is
$('.form-isvalid').on('submit',function(){
var controle=true;
if($(name).val().trim() == ''){
showAlert(name);
controle=false; // veld is leeg return false
}
return controle;
});
// laat alert zien (invoer 1 variabele namelijk de input name welke fout is)
function showAlert(item){
var itemAlert=$(item).parent();
$(itemAlert).addClass('contact-form-alert');
// deze class wordt toegekend aan .contact-form-input-box
// in css position absolute en plaatsen t.o.v. .contact-form-input-box
}
})(jQuery);