HTML -vormelemente
Hierdie hoofstuk beskryf al die verskillende HTML-vormelemente.
Die HTML <form> Elemente
Die HTML- <form>
element kan een of meer van die volgende vormelemente bevat:
-
<input>
-
<label>
-
<select>
-
<textarea>
-
<button>
-
<fieldset>
-
<legend>
-
<datalist>
-
<output>
-
<option>
-
<optgroup>
Die <invoer> Element
Een van die mees gebruikte vormelemente is die <input>
element.
Die <input>
element kan op verskeie maniere vertoon word, afhangende van die type
kenmerk.
Voorbeeld
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname">
Al die verskillende waardes van die type
kenmerk word in die volgende hoofstuk behandel:
HTML-invoertipes .
Die <label> Element
Die <label>
element definieer 'n etiket vir verskeie vormelemente.
Die <label>
element is nuttig vir skermlesergebruikers, want die skermleser sal die etiket hardop lees wanneer die gebruiker op die invoerelement fokus.
Die <label>
element help ook gebruikers wat sukkel om op baie klein streke te klik (soos radioknoppies of merkblokkies) - want wanneer die gebruiker die teks binne die <label>
element klik, wissel dit die radioknoppie/merkblokkie.
Die for
kenmerk van die <label>
merker moet gelyk wees aan die id
kenmerk van die <input>
element om hulle saam te bind.
Die <kies> Element
Die <select>
element definieer 'n aftreklys:
Voorbeeld
<label for="cars">Choose a car:</label>
<select id="cars" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
Die <option>
elemente definieer 'n opsie wat gekies kan word.
By verstek word die eerste item in die aftreklys gekies.
Om 'n voorafgeselekteerde opsie te definieer, voeg die selected
kenmerk by die opsie:
Voorbeeld
<option value="fiat" selected>Fiat</option>
Sigbare waardes:
Gebruik die size
kenmerk om die aantal sigbare waardes te spesifiseer:
Voorbeeld
<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="3">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
Laat veelvuldige keuses toe:
Gebruik die multiple
kenmerk om die gebruiker toe te laat om meer as een waarde te kies:
Voorbeeld
<label for="cars">Choose a car:</label>
<select id="cars" name="cars" size="4" multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
Die <textarea> Element
Die <textarea>
element definieer 'n multi-lyn invoerveld ('n teks area):
Voorbeeld
<textarea name="message" rows="10" cols="30">
The cat was playing in the garden.
</textarea>
Die rows
kenmerk spesifiseer die sigbare aantal reëls in 'n teksarea.
Die cols
kenmerk spesifiseer die sigbare breedte van 'n teksarea.
Dit is hoe die HTML-kode hierbo in 'n blaaier vertoon sal word:
U kan ook die grootte van die teksarea definieer deur CSS te gebruik:
Voorbeeld
<textarea name="message"
style="width:200px; height:600px;">
The cat was playing in the garden.
</textarea>
Die <knoppie> Element
Die <button>
element definieer 'n klikbare knoppie:
Voorbeeld
<button type="button"
onclick="alert('Hello World!')">Click Me!</button>
Dit is hoe die HTML-kode hierbo in 'n blaaier vertoon sal word:
Let wel: Spesifiseer altyd die type
kenmerk vir die knoppie-element. Verskillende blaaiers kan verskillende verstektipes vir die knoppie-element gebruik.
Die <fieldset> en <legend> Elemente
Die <fieldset>
element word gebruik om verwante data in 'n vorm te groepeer.
Die <legend>
element definieer 'n byskrif vir die
<fieldset>
element.
Voorbeeld
<form action="/action_page.php">
<fieldset>
<legend>Personalia:</legend>
<label for="fname">First
name:</label><br>
<input type="text" id="fname" name="fname"
value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
Dit is hoe die HTML-kode hierbo in 'n blaaier vertoon sal word:
Die <datalist> Element
Die <datalist>
element spesifiseer 'n lys van vooraf gedefinieerde opsies vir 'n <input>
element.
Gebruikers sal 'n aftreklys van die vooraf gedefinieerde opsies sien terwyl hulle data invoer.
Die list
kenmerk van die <input>
element, moet verwys na die
id
kenmerk van die <datalist>
element.
Voorbeeld
<form action="/action_page.php">
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</form>
Die <afvoer> Element
Die <output>
element verteenwoordig die resultaat van 'n berekening (soos een wat deur 'n skrif uitgevoer word).
Voorbeeld
Voer 'n berekening uit en wys die resultaat in 'n <output>
element:
<form action="/action_page.php"
oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
<input type="submit">
</form>
HTML-oefeninge
HTML-vormelemente
Tag | Description |
---|---|
<form> | Defines an HTML form for user input |
<input> | Defines an input control |
<textarea> | Defines a multiline input control (text area) |
<label> | Defines a label for an <input> element |
<fieldset> | Groups related elements in a form |
<legend> | Defines a caption for a <fieldset> element |
<select> | Defines a drop-down list |
<optgroup> | Defines a group of related options in a drop-down list |
<option> | Defines an option in a drop-down list |
<button> | Defines a clickable button |
<datalist> | Specifies a list of pre-defined options for input controls |
<output> | Defines the result of a calculation |
Vir 'n volledige lys van alle beskikbare HTML-merkers, besoek ons HTML-merkerverwysing .