HTML -vorms
'n HTML-vorm word gebruik om gebruikersinvoer in te samel. Die gebruikerinvoer word meestal na 'n bediener gestuur vir verwerking.
Voorbeeld
Die <form> Element
Die HTML <form>-element word gebruik om 'n HTML-vorm vir gebruikersinvoer te skep:
<form>
.
form elements
.
</form>
Die <form>element is 'n houer vir verskillende tipes invoerelemente, soos: teksvelde, merkblokkies, radioknoppies, indienknoppies, ens.
Al die verskillende vormelemente word in hierdie hoofstuk behandel: HTML-vormelemente .
Die <invoer> Element
Die HTML- <input>element is die mees gebruikte vormelement.
'n <input>Element kan op baie maniere vertoon word, afhangende van die type
kenmerk.
Hier is 'n paar voorbeelde:
| Tik | Beskrywing |
|---|---|
| <input type="text"> | Vertoon 'n enkelreël teksinvoerveld |
| <input type="radio"> | Vertoon 'n radioknoppie (vir die keuse van een van baie keuses) |
| <input type="checkbox"> | Vertoon 'n merkblokkie (vir die keuse van nul of meer van baie keuses) |
| <input type="submit"> | Vertoon 'n indien-knoppie (vir die indiening van die vorm) |
| <input type="button"> | Vertoon 'n klikbare knoppie |
Al die verskillende invoertipes word in hierdie hoofstuk gedek: HTML-invoertipes .
Teksvelde
Die <input type="text">definieer 'n enkellyn-invoerveld vir teksinvoer.
Voorbeeld
'n Vorm met invoervelde vir teks:
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname"><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname">
</form>
Dit is hoe die HTML-kode hierbo in 'n blaaier vertoon sal word:
Let wel: Die vorm self is nie sigbaar nie. Let ook daarop dat die verstekwydte van 'n invoerveld 20 karakters is.
Die <label> Element
Let op die gebruik van die <label>element in die voorbeeld hierbo.
Die <label>merker definieer 'n etiket vir baie 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 forkenmerk van die <label>merker moet gelyk wees aan die idkenmerk van die <input>
element om hulle saam te bind.
Radio knoppies
Die <input type="radio">definieer 'n radioknoppie.
Radioknoppies laat 'n gebruiker EEN van 'n beperkte aantal keuses kies.
Voorbeeld
'n Vorm met radioknoppies:
<p>Choose your favorite Web language:</p>
<form>
<input type="radio" id="html" name="fav_language"
value="HTML">
<label for="html">HTML</label><br>
<input
type="radio" id="css" name="fav_language" value="CSS">
<label
for="css">CSS</label><br>
<input type="radio" id="javascript"
name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
Dit is hoe die HTML-kode hierbo in 'n blaaier vertoon sal word:
Kies jou gunsteling webtaal:
Merkblokkies
Die <input type="checkbox">definieer 'n merkblokkie .
Merkblokkies laat 'n gebruiker NUL of MEER opsies van 'n beperkte aantal keuses kies.
Voorbeeld
'n Vorm met merkblokkies:
<form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input
type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2">
I have a car</label><br>
<input type="checkbox"
id="vehicle3" name="vehicle3"
value="Boat">
<label for="vehicle3"> I have a boat</label>
</form>
Dit is hoe die HTML-kode hierbo in 'n blaaier vertoon sal word:
Die Submit-knoppie
Die <input type="submit">definieer 'n knoppie om die vormdata aan 'n vormhanteerder in te dien.
Die vormhanteerder is tipies 'n lêer op die bediener met 'n skrip vir die verwerking van invoerdata.
Die vormhanteerder word in die vorm se action
kenmerk gespesifiseer.
Voorbeeld
'n Vorm met 'n indien-knoppie:
<form action="/action_page.php">
<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">
</form>
Dit is hoe die HTML-kode hierbo in 'n blaaier vertoon sal word:
Die naamkenmerk vir <invoer>
Let daarop dat elke invoerveld 'n namekenmerk moet hê om ingedien te word.
As die namekenmerk weggelaat word, sal die waarde van die invoerveld glad nie gestuur word nie.
Voorbeeld
Hierdie voorbeeld sal nie die waarde van die "Voornaam"-invoerveld indien nie:
<form action="/action_page.php">
<label for="fname">First
name:</label><br>
<input type="text" id="fname" value="John"><br><br>
<input type="submit" value="Submit">
</form>