Inhoudsopgave
Wanneer je een website maakt is het belangrijk dat hier geen fouten in staan. Een manier om dit te voorkomen is door handmatig op zoek te gaan naar fouten. Hoewel dit altijd onderdeel van het werk zal zijn, bestaan er ook tools die voor jou geautomatiseerd op zoek gaan naar fouten. Vandaag ga je kijken naar de W3C validator.
De W3C validator controleert of jouw HTML voldoet aan alle regels die er zijn voor HTML. Het gebruik ervan is heel simpel: je geeft het de HTML-code en je drukt op Check. Vervolgens krijg je een lijst met errors en warnings over jouw code, die je vervolgens kan oplossen.
Voer de volgende stappen uit:
- Ga naar de W3C validator;
- Standaard vraagt hij om een URL, maar als jouw website nog niet online staat kan je klikken op Validate by Direct Input, waarna je de HTML-code kan kopiëren en plakken;
- Klik op de knop Check;
- Je krijgt nu een lijst met errors en warnings en info (zie screenshot hieronder). Errors moet je altijd oplossen, warnings zijn vaak een goed idee om op te lossen en info is over het algemeen puur ter informatie.
- Lees de meldingen aandachtig door en probeer ze op te lossen in de code. Begrijp je een melding niet? Kopieer de melding dan en plak deze in Google. De kans is zeer groot dat je dan het antwoord zult vinden. Ga door tot alle meldingen zijn opgelost.
Het is met HTML mogelijk om een formulier te maken die de gebruiker kan invoeren. Met CSS is dit formulier vervolgens volledig naar wens te vormgeven. In deze les zal je leren hoe je zo'n formulier maakt, welke opties er zijn en hoe je deze vormgeeft.
Hieronder vind je een voorbeeld van een standaard formulier:
<form>
<label for="first-name">Voornaam</label>
<input type="text" name="first-name" id="first-name">
<label for="last-name">Achternaam</label>
<input type="text" name="last-name" id="last-name">
<button type="submit">Verzenden</button>
</form>In een formulier plaats je de gewenste invoervelden. De meeste invoervelden maak je met de HTML-tag <input>, maar er zijn ook een aantal andere HTML-tags. In de tabellen hieronder staan de meestgebruikte HTML-tags voor invoervelden en de meestgebruikte input-types.
HTML-tags voor invoervelden
| HTML-tag | Omschrijving |
|---|---|
| input | Meestgebruikte HTML-tag voor invoervelden. Door het attribuut type in te voeren bepaal je het type invoerveld. Zie de tabel hieronder met de meestgebruikte input-types. |
| textarea | Een tekstveld met meerdere regels. Hierin kan je dus ook enters invoeren. |
| select | Een dropdown om een lijst met opties weer te geven. Iedere optie voer je in de <select> in als <option>. De gebruiker kan maximaal 1 optie kiezen. |
| label | Dit is geen invoerveld, maar de label die aangeeft wat de inhoud van het bijbehorende invoerveld moet zijn. Ieder invoerveld moet een label hebben. Wanneer je op de label klikt, wordt het bijbehorende invoerveld geselecteerd (mits je de koppeling juist hebt gemaakt). |
Input-types
De tag <input> kan je gebruiken voor meerdere type invoervelden. De keuze maak je door het attribuut type in te voeren. Dus bijvoorbeeld <input type="email">. In de tabel hieronder vind je de types die we voor deze les nodig hebben. Hier vind je alle mogelijke input-types: https://www.w3schools.com/html/html_form_input_types.asp
| Input-type | Omschrijving |
|---|---|
| text | Invoerveld voor tekst |
| Invoerveld voor een emailadres. | |
| checkbox | Invoeren van een checkbox |
| radio | Invoeren van een radio-button |
| date | Invoeren van een datepicker |
<label for="first-name">Naam:</label>
<input type="text" id="first-name" name="first-name">
<label for="birthdate">Datum</label>
<input type="date" id="birthdate" name="birthdate">
<label for="email">Email</label>
<input type="email" id="email" name="email">
Met het attribuut placeholder kan je de gebruiker een voorbeeld geven van wat er in het veld ingevuld moet worden:
<input type="email" id="email" name="email" placeholder="studentnummer@hr.nl"><label for="cars">Kies een auto</label>
<select id="cars" name="cars">
<option value="" disabled selected>Kies een auto</option>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select><input type="checkbox" id="cat" name="cat" value="Cat">
<label for="cat">Ik heb een kat</label>
<input type="checkbox" id="dog" name="dog" value="Dog">
<label for="dog">Ik heb een hond</label>
<input type="checkbox" id="capibara" name="capibara" value="Capibara">
<label for="capibara">Ik heb een capibara</label>Let op dat je hier het attribuut name voor iedere input hetzelfde moet invoeren. De gebruiker kan hierdoor maar één van de opties selecteren.
<input type="radio" id="pizza" name="menu" value="pizza">
<label for="pizza">Pizza</label>
<input type="radio" id="sushi" name="menu" value="sushi">
<label for="sushi">Sushi</label>
<input type="radio" id="kaas" name="menu" value="kaas">
<label for="kaas">Kaassoufflé</label>Het label is niet alleen voor de leesbaarheid maar helpt ook om de "click area" van het element groter te maken
Op W3Schools vind je nog meer voorbeelden voor Forms en Form Elements
Je kan velden verplicht maken met het attribuut required. Wanneer de gebruiker dan het formulier submit, terwijl het verplichte veld nog leeg is, dan wordt hier een melding van getoond en wordt het formulier niet verzonden. Dit attribuut verwacht geen waarde. Je zet dus niet required="" neer, maar slechts required.
Let op dat dit niet gebruikt kan worden voor security (het
requiredfield is te omzeilen via de browser inspector), maar daarover volgende periode meer bij Programmeren 2.
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>Om de data van je formulier te kunnen versturen moet je alle invulvelden binnen een <form> staan. Die moet weer het attribuut action bevatten, waarin bepaald naar welke URL het formulier verzonden moet worden.
Om het formulier te kunnen verzenden heb je wel een submit button nodig! Zie hieronder een voorbeeld van een formulier met submit button.
<form action="contact-bedankt.html">
<!-- Hier komen ALLE form elementen -->
<!-- De submit button verstuurt het formulier -->
<button type="submit">Versturen</button>
</form>In kwartaal 2 en 3 gaan we leren hoe we de ingevulde data uit het formulier kunnen gebruiken in onze applicatie.
- Kwartaal 2: Gebruik PHP om de data op te slaan in een database.
- Kwartaal 3: Gebruik Javascript om de data te gebruiken in een front-end applicatie.
De default styling van veel form-elementen is niet erg mooi en niet optimaal leesbaar. Gelukkig kan je form-elementen volledig naar wens vormgeven met CSS. Een aantal tips om het leesbaarder te maken:
- stel de
font-sizevan de inputs in op de standaard font-size door deze op1remin te stellen; - voeg
paddingtoe om de leesbaarheid te verbeteren. - gebruik
accent-colorom al je input elementen een default kleur te geven die past bij je website.
/* voorbeeld: alle input elementen */
input {
font-size:1rem;
accent-color:red;
}
/* voorbeeld: alleen text input */
input[type=text] {
padding:2px;
font-size:1rem;
}
select {
padding: 6px;
font-size: 1rem;
border: 0;
}
Ook de submit button is geheel naar wens vorm te geven. Dit werkt nagenoeg hetzelfde zoals je een <a> zou vormgeven, met als uitzondering dat op een button de muisaanwijzer niet automatisch een handje wordt wanneer die op de button staat. Dit kan je oplossen door de CSS-optie cursor op pointer in te stellen. Je kan all:unset; gebruiken om alle default styling van een button te verwijderen.
button {
all:unset;
padding: 6px;
font-size: 1rem;
border-radius: 8px;
border: 0;
background-color: darkblue;
color: white;
cursor: pointer;
}
button:hover {
background-color: lightblue;
color:darkblue;
}
button:active {
background-color: red;
}Behalve accent color zijn er niet veel mogelijkheden om checkboxes en radio buttons te stylen. Je kan echter wel je eigen checkbox / radio button bouwen. Bekijk hier een voorbeeld..
Op desktop zet je de labels meestal naast je form-element. Dit kan je doen door het label en form-element in een div te plaatsen die je vervolgens als Flexbox instelt.
<div class="formfield">
<label for="name">Naam</label>
<input type="text" name="name" id="name">
</div>
<div class="formfield">
<label for="email">Email</label>
<input type="email" name="email" id="email">
</div>.formfield {
display: flex;
justify-content: space-between;
flex-direction:row;
}Op mobile veranderen we de flex-direction in column zodat de items onder elkaar komen te staan.
@media (max-width: 480px) {
.formfield {
flex-direction:column;
}
}Je kan via CSS de stijl aanpassen van een form element dat niet goed is ingevuld.
<input type="email" required placeholder="piet@henk.nl">input:user-invalid {
background-color:pink;
border: 2px solid red;
} In de komende opdrachten werk je toe naar een compleet formulier met alle opties die hierboven zijn besproken. Dit formulier ga je op een andere pagina maken dan de homepage. Dus je hebt de index.html, waar je tot nu toe in het hebt gewerkt, wat de homepage is. In onderstaande opdracht ga je ook een contact.html maken, waarin jouw formulier komt te staan. Dit bestand bekijk je via een andere URL dan de homepage, waardoor je dus twee verschillende pagina's kan bezoeken.
Voor de lesopdracht van vandaag moet je een nieuw project opzetten, anders kan je opdracht 6 namelijk niet uitvoeren. Voer de volgende stappen uit:
- Maak een nieuw project aan en noem die
forms, zoals omschreven in opdracht 1c van les 1. Zet daarin de bestandsstructuur neer, zoals omschreven in opdracht 1d uit les 1. - Maak vervolgens in de nieuwe map
formsnog een bestand aan met de naamcontact.html. Kopieer de volledige inhoud vanindex.htmlen plak deze incontact.html. Dubbelcheck of je nu in beide bestanden dezelfde link hebt naar destyle.css, zodat je dezelfde stijl op beide pagina's kan gebruiken. - Kopieer vervolgens onderstaande startcode. Pas nog wel in beide HTML-bestanden de
hrefvan alle linkjes aan in de<nav>, zodat deze linken naar de juiste pagina. Voor meer info over hoe je dit correct instelt, lees dit dan hier terug bij les 3. - Open de
index.htmlmet Live Server en controleer of de navigatie werkt. Wanneer je naar de andere pagina navigeert zou de<h1>moeten veranderen, want die is anders per pagina, maar de vormgeving zou wel hetzelfde moeten blijven.
⚠️ Zorg ervoor dat je de HTML-code in de<body>plakt!
index.html
<nav>
<a href="">Home</a>
<a href="">Contact</a>
</nav>
<main>
<div class="center-container">
<section>
<h1>Homepage</h1>
</section>
</div>
</main>contact.html
<nav>
<a href="">Home</a>
<a href="">Contact</a>
</nav>
<main>
<div class="center-container">
<section>
<h1>Contactformulier</h1>
</section>
</div>
</main>style.css
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background-color: #EDF0F7;
}
h1 {
font-size: 2.5rem;
margin-top: 0;
}
.center-container {
margin: 0 auto;
width: 90vw;
max-width: 650px;
}
nav {
background-color: #FFFFFF;
padding: 15px 30px;
display: flex;
justify-content: flex-end;
gap: 25px;
border-bottom: 2px solid #1A202C;
}
nav a {
color: #717D96;
text-decoration: none;
}
nav a:hover {
text-decoration: underline;
}
main {
padding: 50px 0;
}In deze opdracht ga je de HTML van het formulier schrijven. Bouw hiervoor het formulier in onderstaand ontwerp na. Zorg ervoor dat het er inhoudelijk echt hetzelfde uitziet. Dus voer ook de placeholders in, maak alle velden required en kies de juiste type per veld.
Het enige wat je voor deze opdracht in de CSS moet doen is ervoor zorgen dat de inhoud van <form> als een column wordt weergegeven, zodat alles onder elkaar komt te staan.
Bij de <select> onder Verstuur naar* moet je kunnen kiezen uit de volgende docenten: Antwan, Bas, Erik en Martijn.
Wil je het formulier ook echt versturen? Kijk dan naar opdracht 6.
Op dit moment is alle HTML geschreven, maar het ziet er nog niet zo mooi uit. Schrijf daarom de CSS, zodat het eruit ziet als onderstaand ontwerp. Bedenk hoe je Flexbox hiervoor kan inzetten.
Je formulier ziet er nu mooi uit! Maar op mobile wordt het erg krap. Zorg er daarom voor dat jouw formulier eruit ziet zoals in onderstaand ontwerp.
Jouw formulier ziet er nu mooi uit én is goed leesbaar op mobile. De laatste stap is om validatie toe te passen. Dat betekent dat je aangeeft welke velden correct zijn ingevoerd en welke nog niet. Dus wanneer er bijvoorbeeld geen naam is ingevoerd moet dat veld een rode rand krijgen. Zo wordt het voor de gebruiker duidelijk welke velden er nog ingevoerd moeten worden. Zorg er daarom voor dat jouw formulier er hetzelfde uitziet als in onderstaand ontwerp.
Tijdens dit vak ga je niet leren hoe je dit formulier kan verzenden, dat komt in de volgende periode. Om je toch te laten zien dat je dit formulier nu daadwerkelijk kan verzenden hebben we een testfunctie gemaakt waardoor jouw formulier wordt gemaild. Voer daarvoor de volgende stappen uit:
-
In de
<select>kies je een docent en naar diegene wordt jouw vraag gemaild. Om dit werkend te maken moet je bij ieder formulier-element de juistenameinvoeren. De volgende names zijn nodig: 'name', 'city', 'email', 'birthdate', 'category', 'question' en 'send-to'. Iedere docent heeft trouwens een eigen nummer die je alsvaluein moet stellen: 0 = Antwan, 1 = Bas, 2 = Erik en 3 = Martijn. -
Vervang de openings
<form>tag voor onderstaande. De betekenis van deze attributen leer je bij Programmeren 2.
<form action="https://docent.cmi.hr.nl/moora/frontend/send-mail.php" method="POST">- Maak in de map van deze opdracht (dus
forms) een nieuw bestand aan met de naamcontact-bedankt.html. Nadat je het formulier hebt verzonden word je automatisch doorgestuurd naar deze pagina. Zet hierop een tekst als "Bedankt voor je vraag, de gekozen docent zal er zo snel mogelijk op reageren.". Test of het werkt door op desubmitbutton te klikken.