Deze les gaat dieper in op onderdelen van formulieren en de layout.
Het is niet noodzakelijk om met javascript te kunnen werken, maar je kunt wel mooier werk leveren.
<input type="password" name="mijnwachtwoord" size="10" />
Toelichting: zelfde als text, alleen in plaats van tekst worden puntjes getoond
<input type="checkbox" name="mijnvinkvakje" value="koffie" checked /> Ik wil graag koffie <br>
<input type="checkbox" name="mijnvinkvakje" value="thee" unchecked /> Ik wil graag thee
Ik wil graag koffie
Ik wil graag thee
Toelichting: twee 'aanvinkvakjes'. Je ziet dat ze dezelfde naam hebben! Dat is belangrijk als je de ingevoerde gegevens later met javascript gaat verwerken.
<input type="radio" name="mijnkeuzerondje" value="mavo" unchecked /> Ik zit in mavo <br>
<input type="radio" name="mijnkeuzerondje" value="havo" checked /> Ik zit in havo <br>
<input type="radio" name="mijnkeuzerondje" value="vwo" unchecked /> Ik zit in vwo <br>
Ik zit in mavo
Ik zit in havo
Ik zit in vwo
Toelichting: bij radiobuttons is maar één keuze mogelijk (in tegenstelling tot de checkbox). Ook hier hebben ze alle drie dezelfde name, vanwege de verwerking in javascript.
<select name="mijnlijst" id="Select1" size="4" multiple="multiple">
<option value="1">cola</option>
<option value="2">sinas</option>
<option value="3">appelsap</option>
<option value="4">spa rood</option>
<option value="5">ijsthee</option>
<option value="6">water</option>
</select>
Toelichting: als je multiple="multiple" weglaat, kun je maar één keuze maken.
Na afloop zijn de waarden als volgt:
document.mijnform.mijnlijst[t].selected=true indien geselecteerd
document.mijnform.mijnlijst[t].selected=false indien niet geselecteerd
waarbij t de rangorde is (dus bij cola is t=0, sinas t=1, appelsap t=2 ) enz.
Om dit te begrijpen, neem onderstaande code over in HTML-kit en voer het uit.
<html>
<head>
<title>Untitled</title><script language="JavaScript" type="text/javascript">
<!--
function laatzien()
{
var teller, lengte;
lengte = document.mijnform.mijnlijst.length;
alert( "De lijst bevat " + lengte + " elementen." );
for( teller=0; teller<lengte; teller++ )
{
alert( "de " + teller + "e waarde is: "+ document.mijnform.mijnlijst[teller].selected );
}
}
//-->
</script>
</head>
<body>
<form name="mijnform" >
<select name="mijnlijst" size="4" multiple="multiple">
<option value="1">cola</option>
<option value="2">sinas</option>
<option value="3">appelsap</option>
<option value="4">spa rood</option>
<option value="5">ijsthee</option>
<option value="6">water</option>
</select><br><br><input type="button" value="Klik hier" onClick="laatzien();" />
</form>
</body>
Deze lijkt op een listbox, maar je ziet één keuzemogelijkheid, met een uitklapvenster.
Hiertoe moet je de aanduidingen 'size' en 'multiple' weglaten.
Ook kun je direct op een keuze laten reageren (dus zonder knop waar eerst op geklikt moet worden). Hiervoor gebruik je de event 'onChange'.
Vervang in bovenstaande code de form-tags met alles ertussen door het volgende:
<form name="mijnform" >
<select name="mijnlijst" onChange="laatzien();">
<option value="1">cola</option>
<option value="2">sinas</option>
<option value="3">appelsap</option>
<option value="4">spa rood</option>
<option value="5">ijsthee</option>
<option value="6">water</option>
</select>
</form>
Controleer goed of je de werking van deze code begrijpt!
Soms wil je niet dat een gebruiker tekst invoert in een veld. Dat is een veld dat door je programma van tekst wordt voorzien.
Dat kun je bereiken door de optie "readonly" aan de tag toe te voegen.
Bijvoorbeeld:
<input type="text" name="mijntekst" readonly="readonly"/>
Natuurlijk wil je dat je webpagina er mooi uitziet.
Je kunt de plaats van de velden beïnvloeden door ze bijv. in de kolommen van een tabel te plaatsen.
Kijk eerst of je de volgende code begrijpt. Kopieer hem dan naar HTMLkit, en bekijk het resultaat.
Breng er ook veranderingen in aan en bekijk het effect.
<html>
<head>
<title>Page title</title>
</head>
<body><table width="80%" border="0">
<tr>
<td width="11%">aan:</td>
<td width="89%" colspan="2"><input type="text" name="aan" size="80"/></td>
</tr>
<tr>
<td>cc:</td>
<td colspan="2"><input type="text" name="cc" size="80"/></td>
</tr>
<tr>
<td>onderwerp:</td>
<td colspan="2"><input type="text" name="onderwerp" size="80"/></td>
</tr>
<tr>
<td colspan="3">inhoud:<br /> <textarea name="inhoud" cols="80" rows="10"></textarea></td>
</tr>
<tr>
<td ><input type="submit" name="annul" value="Annuleren" /></td>
<td ><input type="submit" name="verzend" value="Verzenden" /></td>
</tr>
</table></body>
</html>