terug naar lessenoverzicht

Formulieren en styling

In deze zelfstudie serie:
checkmark simple
formulieren Javascript
checkmark simple
formulieren CSS
checkmark simple
formulieren Opdracht
checkmark simple
checkmark simple
checkmark simple
checkmark simple
checkmark simple

Alle lessen in deze reeks bekeken?

Je hebt alle lessen in deze reeks afgerond!

checkmark simple
Oops! Something went wrong while submitting the form.

Je hebt alle lessen afgerond!

checkmark simple

formulieren HTML

Form

Een formulier begint met de <form> tag. Deze kan een action hebben die na het invullen de bezoeker naar een andere pagina brengt, bijvoorbeeld de bedankt/succes pagina. Ook kan een formulier een onsubmit hebben die vuurt zodra de submit button wordt geklikt. De onsubmit kan een javascript functie oproepen.

Input

Een formulier heeft velden die een gebruiker kan invullen of keuzes die hij kan selecteren. Dit wordt gedaan met input en select elementen. Bekijk de verschillende types in de pdf presentatie en via de handige links.

formulieren Javascript

Ophalen waardes via Javascript

Vaak wil je wat doen met de waardes die ingevuld zijn in de inputvelden. Denk aan een prijs calculatie tool waarbij je een formulier hebt waar de klant keuzes kan maken in bijvoorbeeld type wielen, type motor, type geluidsboxen en meer. Aan de hand van de keuzes in het formulier wordt de prijs berekend. Een waarde ophalen doe je met .value. Bekijk de pdf presentatie.

formulieren CSS

Boxshadow

Veel websites en apps maken gebruik van boxshadow om de website minder vlakjes te laten lijken. Ook wordt dit veel gebruikt in combinatie met een hover, waardoor het bijvoorbeeld lijkt alsof de button naar je muis toe komt.

Pseudo class

Hiermee kan je een status van een element selecteren in CSS. Dit kan een hover status of een visited status zijn. Het selecteren doe je door een :hover of :visited te plaatsen achter een tag, class of id naam.

formulieren Opdracht

Opdracht

Voer de opdracht uit.

Vind jij programmeren leuk en wil jij een baan in de IT?

Bekijk dan de traineeships van ons ander bedrijf Qien!
*Er zijn geen links bij deze video reeks.

Project files

icon: files
Project files
* De link hierboven download een bestand via dropbox dit kan een zip of rar bestand zijn. Weet je niet hoe je dit type bestand kan gebruiken? Volg deze instructie voor zip bestanden. Of download WinRar voor rar bestanden.
* Er zijn geen project files om te downloaden voor deze zelfstudie.

Stel vragen en help medestudenten

Tijdens de live lessen zijn er opdrachten waarbij je zult samenwerken met jouw studiegenoten. Hiervoor gebruiken wij Discord. Daarnaast kun je ook jouw vragen stellen, de docenten zullen je vervolgens verder helpen.

Het kanaal voor deze cursus op onze Discord:

portfolio-cursus

logo - discord

#code-cafe

200+ leden