Formulieren ()

HTML / CSS / JavaScript
Formulieren
St. Michaël College |
Programmeren kun je leren! | 2014-2015
Vorige les
● Lijsten
● Tabel headers
● Speciale karakters
St. Michaël College |
Programmeren kun je leren! | 2014-2015
Deze les
● Titel
● Formulieren
St. Michaël College |
Programmeren kun je leren! | 2014-2015
Titel
● De pagina’s hebben nu wel steeds koppen, maar
geen titel.
● De titel is wat je ziet in het tabblad van je browser:
● Om dit voor je eigen webpagina toe te voegen,
gebruik je een <title>...</title> tag in de head
van je pagina.
St. Michaël College |
Programmeren kun je leren! | 2014-2015
Titel
● Voorbeeld:
<html>
<head>
<title>Mijn pagina!</title>
</head>
<body>
<h1>Welkom!</h1>
</body>
</html>
St. Michaël College |
Programmeren kun je leren! | 2014-2015
Formulieren
● Formulieren zie je veel op het Internet:
○ Contactformulieren
○ Inlogformulieren
○ Enquêtes
● Het is leuker dan enkel tekst en lijstjes!
St. Michaël College |
Programmeren kun je leren! | 2014-2015
Formulieren
● Formulieren hebben een aantal tags:
○
○
○
<form> - Om het formulier in te maken
<input> - Voor tekstinvoer en een verzendknop
<select> en <option> - Voor dropdown keuzemenuutjes
● Er zijn meer tags beschikbaar, maar we gebruiken
voor nu enkel deze tags.
St. Michaël College |
Programmeren kun je leren! | 2014-2015
Formulieren
● Zoals bij tabellen, omsluit je je werk met <form>
● De <input> tag gebruik je voor tekstinvoer en de
verzendknop. Deze heeft een naam nodig.
● In het vakje kun je vervolgens typen wat je wilt.
● Voorbeeld:
<form>
<input type="text" name="invoer1"><br>
<input type="submit">
</form>
St. Michaël College |
Programmeren kun je leren! | 2014-2015
Formulieren
● Om het formulier functioneel te maken heeft het
een actie nodig
● De actie is wat er moet gebeuren wanneer je het
formulier verzendt
● Voorbeeld:
<form action="http://smcaccent.nl/verwerk.php">
<input type="text" name="invoer1"><br>
<input type="submit">
</form>
St. Michaël College |
Programmeren kun je leren! | 2014-2015
Formulieren
● Het formulier wordt naar verwerk.php verzonden
en hier ‘verwerkt’.
● Bij ons geeft dit enkel terug wat je verzonden hebt.
● Voorbeeld:
<form action="http://smcaccent.nl/verwerk.php">
<input type="text" name="invoer1"><br>
<input type="submit">
</form>
St. Michaël College |
Programmeren kun je leren! | 2014-2015
Formulieren
● De <select> invoer is vergelijkbaar met lijsten.
● Je gebruikt <select> om aan te geven dat je een
keuzelijstje gaat maken.
● Met <option> geeft je de keuzeopties aan.
St. Michaël College |
Programmeren kun je leren! | 2014-2015
Formulieren
● Voorbeeld:
<form>
<select>
<option>Ham</option>
<option>Kaas</option>
<option>Tosti</option>
</select>
</form>
St. Michaël College |
Programmeren kun je leren! | 2014-2015
Formulieren
● Om het formulier functioneel te krijgen, hebben we
weer een aantal attributen nodig
● Deze worden door de computer gebruikt.
● De <select> heeft een naam nodig en iedere
<option> een waarde:
<form>
<select name="eten">
<option value="ham">Ham</option>
<option value="kaas">Kaas</option>
<option value="tosti">Tosti</option>
</select>
</form>
St. Michaël College |
Programmeren kun je leren! | 2014-2015
Formulieren
● Ook hebben we weer een action nodig
● En een verzendknop
● Voorbeeld:
<form action="http://smcaccent.nl/verwerk.php">
<select name="eten">
<option value="ham">Ham</option>
<option value="kaas">Kaas</option>
<option value="tosti">Tosti</option>
</select>
<input type="submit">
</form>
St. Michaël College |
Programmeren kun je leren! | 2014-2015

Download Report