Cursusinhoud
Ultimate HTML
Ultimate HTML
2. HTML-Tags en Attributen
HTML-Tags BegrijpenWerken met HTML-AttributenBegrijpen van Gepaarde en Enkele Tags in HTMLTekstmarkering en Opmaak in HTMLUitdaging: Maak Je Eerste Webpagina ParagraafUitdaging: Bouw een Persoonlijke Introductie WebpaginaUitdaging: Ontwerp een Filmshowcase-WebpaginaLinks en Knoppen Gebruiken in HTMLUitdaging: Maak Links Naar Populaire WebsitesJe HTML-Code Valideren Voor Best Practices
4. Werken met Media en Tabellen
Afbeeldingen Toevoegen in HTMLUitdaging: Werk Met AfbeeldingenWerken met Klikbare Afbeeldingen, Bijschriften en OptimalisatieBegrijpen van Vector- en RasterafbeeldingenAudio en Video Insluiten voor Rijke Media-InhoudUitdaging: Audio en Video Insluiten in HTMLTabellen Maken en Structureren in HTMLUitdaging: Ontwerp een Functionele HTML-Tabel
5. HTML-Formulieren en Gebruikersinvoer
Inleiding tot HTML-FormulierenBasisprincipes van Formuliercreatie in HTMLHet Gebruik van Labels voor Betere Formulier ToegankelijkheidFormulieren Verbeteren met InputattributenVerschillende Invoertypen in HTML VerkennenUitdaging: Maak een Formulier met Invoervelden en LabelsWerken met het Textarea-Element voor Invoer over Meerdere RegelsHet Select-Element Gebruiken Voor Dropdownmenu'sHet Gebruik van het Datalist-Element voor Vooraf Gedefinieerde InvoersuggestiesGroeperen van Formelementen voor Betere Structuur
Uitdaging: Maak een Formulier met Invoervelden en Labels
Doel
Verhoog de gebruikerservaring van de website door een interactief formulier te maken dat invoer vereist voor naam, e-mail en wachtwoord, compleet met bijbehorende labels.
Taak
Integreer een gebruiksvriendelijk formulier in je website, waardoor gebruikersbetrokkenheid en interactie worden verbeterd. Je taak is om:
- Voor de naam invoer: maak een tekstinvoer die de namen van gebruikers verzamelt. Gebruik de juiste attributen om een naadloze ervaring te garanderen.
- Definieer het juiste
type
voor de tekstinvoer; - Stel de
placeholder
in opJohn
; - Zorg ervoor dat de invoer standaard is gefocust.
- Definieer het juiste
- Voor de e-mail invoer: maak een e-mailinvoer die de e-mailadressen van gebruikers verzamelt. Zorg voor gegevensnauwkeurigheid door de juiste attributen te gebruiken.
- Definieer het juiste
type
voor de e-mailinvoer; - Stel de
placeholder
in opexample@gmail.com
; - Markeer het veld als verplicht.
- Definieer het juiste
- Voor de wachtwoord invoer: maak een veilige wachtwoordinvoer die gebruikersgegevens beschermt. Gebruik de juiste attributen om gegevensbescherming te verbeteren.
- Definieer het juiste
type
voor de wachtwoordinvoer; - Maak het veld verplicht.
- Definieer het juiste
index.html
index.css
autofocus
: richt automatisch de focus op het invoerveld wanneer de pagina wordt geladen.required
: markeert het invoerveld als verplicht, waardoor het formulier niet kan worden verzonden als het leeg is.placeholder
: biedt een hint of voorbeeldtekst voor het invoerveld.for
enid
: koppelt een label aan een invoerveld voor verbeterde toegankelijkheid.type
: specificeert het type gegevens dat in het invoerveld wordt verwacht (bijv. text, email, password).
index.html
index.css
Was alles duidelijk?
Bedankt voor je feedback!
Sectie 5. Hoofdstuk 6