In de vorige module heb je kennis gemaakt met Formulieren maken met behulp van basis-html.
In HTML5 zijn formulieren sterk verbeterd. Er zijn vooral een hoop nieuwe input types bij gekomen welke het invoeren van formulieren makkelijker en duidelijker maken.
Er is echter wel een groot nadeel. Nog lang niet alle browsers ondersteunen alle onderdelen.
Op het moment dat een browser het precieze element niet ondersteund, wordt het input veld als een normaal tekst-veld beschouwd.
Het voorbeeld hierboven is een voorbeeld van een standaard formulier. Met een formulier kan de gebruiker gegevens invullen. Deze worden dan naar een opgegeven pagina gestuurd.
Dat versturen gaat via de webserver. Om dit te laten werken moet je de bestanden dus testen op een webserver. Dat gaan we tijdens deze workshop niet doen, maar komt later. Het gaat er in deze workshop enkel om welke nieuwe types invoervelden er zijn.
In deze opdracht ga je werken met de overige type input-velden welke html-5 te bieden heeft. Hiermee leer je dat HTML-5 veel mogelijkheden biedt.
Stap 1
Maak een nieuw mapje aan en noem deze workshop_1
Maak hierbinnen een nieuw bestand aan, en noem deze index.html
Stap 2
Plaats in de index.html de basis html-5 code:
Stap 3
Neem deze voorbeeldcode over binnen je <div id=”container”>en </div>:
Stap 4