HTML handleiding

HTML TUIS HTML Inleiding HTML-redakteurs HTML Basies HTML elemente HTML-kenmerke HTML-opskrifte HTML paragrawe HTML-style HTML-formatering HTML-aanhalings HTML-kommentaar HTML kleure HTML CSS HTML skakels HTML beelde HTML Favicon HTML-tabelle HTML-lyste HTML-blok en inlyn HTML-klasse HTML ID HTML iframes HTML JavaScript HTML-lêerpaaie HTML kop HTML-uitleg HTML reageer HTML Rekenaarkode HTML semantiek HTML-stylgids HTML-entiteite HTML Simbole HTML Emoji's HTML-tekenset HTML URL enkodeer HTML vs. XHTML

HTML -vorms

HTML-vorms HTML-vorm eienskappe HTML-vormelemente HTML-invoertipes HTML-invoerkenmerke HTML-invoervorm-kenmerke

HTML -grafika

HTML-doek HTML SVG

HTML Media

HTML Media HTML video HTML oudio HTML-inproppe HTML YouTube

HTML API's

HTML geoligging HTML Sleep/Drop HTML-webberging HTML Web Werkers HTML SSE

HTML voorbeelde

HTML voorbeelde HTML vasvra HTML-oefeninge HTML-sertifikaat HTML Opsomming HTML-toeganklikheid

HTML- verwysings

HTML-merkerlys HTML-kenmerke HTML globale kenmerke HTML-blaaierondersteuning HTML-gebeurtenisse HTML kleure HTML-doek HTML oudio/video HTML Doktipes HTML-karakterstelle HTML URL enkodeer HTML-langkodes HTTP-boodskappe HTTP metodes PX na EM-omskakelaar Sleutelbord kortpaaie

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 forkenmerk van die <label>merker moet gelyk wees aan die idkenmerk 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 selectedkenmerk by die opsie:

Voorbeeld

<option value="fiat" selected>Fiat</option>

Sigbare waardes:

Gebruik die sizekenmerk 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 multiplekenmerk 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 rowskenmerk spesifiseer die sigbare aantal reëls in 'n teksarea.

Die colskenmerk 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 typekenmerk 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:

Persoonlikheid: Eerste naam:

Van:



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 listkenmerk van die <input>element, moet verwys na die idkenmerk 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

Toets jouself met oefeninge

Oefening:

Voeg in die vorm hieronder 'n leë aftreklys by met die naam "motors".

<form action="/action_page.php">
<>
</>
</vorm>


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 .