HTML -invoertipes
Hierdie hoofstuk beskryf die verskillende tipes vir die HTML- <input>element.
HTML-invoertipes
Hier is die verskillende invoertipes wat jy in HTML kan gebruik:
<input type="button"><input type="checkbox"><input type="color"><input type="date"><input type="datetime-local"><input type="email"><input type="file"><input type="hidden"><input type="image"><input type="month"><input type="number"><input type="password"><input type="radio"><input type="range"><input type="reset"><input type="search"><input type="submit"><input type="tel"><input type="text"><input type="time"><input type="url"><input type="week">
Wenk: Die verstekwaarde van die typekenmerk is "teks".
Voer Tik teks in
<input type="text">definieer 'n
enkellyn teksinvoerveld :
Voorbeeld
<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:
Eerste naam:Van:
Voer Tik wagwoord in
<input type="password">definieer 'n wagwoord veld :
Voorbeeld
<form>
<label for="username">Username:</label><br>
<input type="text"
id="username" name="username"><br>
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd">
</form>
Dit is hoe die HTML-kode hierbo in 'n blaaier vertoon sal word:
Gebruikersnaam:Wagwoord:
Die karakters in 'n wagwoordveld is gemasker (getoon as sterretjies of sirkels).
Invoertipe Dien in
<input type="submit">definieer 'n knoppie vir die
indien van vormdata aan 'n vormhanteerder .
Die vormhanteerder is tipies 'n bedienerbladsy met 'n skrip vir die verwerking van invoerdata.
Die vormhanteerder word in die vorm se action
kenmerk gespesifiseer:
Voorbeeld
<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:
As jy die indien-knoppie se waarde-kenmerk weglaat, sal die knoppie 'n verstekteks kry:
Voorbeeld
<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">
</form>
Invoertipe Herstel
<input type="reset">definieer 'n terugstelknoppie
wat alle vormwaardes na hul verstekwaardes sal terugstel:
Voorbeeld
<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">
<input type="reset">
</form>
Dit is hoe die HTML-kode hierbo in 'n blaaier vertoon sal word:
As jy die invoerwaardes verander en dan op die "Reset"-knoppie klik, sal die vormdata na die verstekwaardes teruggestel word.
Invoer tipe radio
<input type="radio">definieer 'n radioknoppie .
Radioknoppies laat 'n gebruiker SLEGS EEN van 'n beperkte aantal keuses kies:
Voorbeeld
<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:
Invoertipe Merkblokkie
<input type="checkbox">definieer 'n merkblokkie .
Merkblokkies laat 'n gebruiker NUL of MEER opsies van 'n beperkte aantal keuses kies.
Voorbeeld
<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:
Invoertipe-knoppie
<input type="button">definieer 'n knoppie :
Voorbeeld
<input type="button" onclick="alert('Hello World!')" value="Click Me!">
Dit is hoe die HTML-kode hierbo in 'n blaaier vertoon sal word:
Invoertipe kleur
Die <input type="color">word gebruik vir invoervelde wat 'n kleur moet bevat.
Afhangende van blaaierondersteuning, kan 'n kleurkieser in die invoerveld verskyn.
Voorbeeld
<form>
<label for="favcolor">Select your favorite
color:</label>
<input type="color" id="favcolor" name="favcolor">
</form>
Invoertipe datum
Die <input type="date">word gebruik vir invoervelde wat 'n datum moet bevat.
Afhangende van blaaierondersteuning, kan 'n datumkieser in die invoerveld verskyn.
Voorbeeld
<form>
<label for="birthday">Birthday:</label>
<input
type="date" id="birthday" name="birthday">
</form>
Jy kan ook die minen maxkenmerke gebruik om beperkings op datums by te voeg:
Voorbeeld
<form>
<label for="datemax">Enter a date before
1980-01-01:</label>
<input type="date" id="datemax" name="datemax"
max="1979-12-31"><br><br>
<label for="datemin">Enter a date after
2000-01-01:</label>
<input type="date" id="datemin" name="datemin"
min="2000-01-02">
</form>
Invoertipe Datumtyd-plaaslik
Die <input type="datetime-local">spesifiseer 'n datum- en tydinvoerveld, met geen tydsone nie.
Afhangende van blaaierondersteuning, kan 'n datumkieser in die invoerveld verskyn.
Voorbeeld
<form>
<label for="birthdaytime">Birthday (date and
time):</label>
<input type="datetime-local" id="birthdaytime" name="birthdaytime">
</form>
Invoer tipe e-pos
Die <input type="email">word gebruik vir invoervelde wat 'n e-posadres moet bevat.
Afhangende van blaaierondersteuning, kan die e-posadres outomaties bekragtig word wanneer dit ingedien word.
Sommige slimfone herken die e-postipe en voeg ".com" by die sleutelbord om by e-posinvoer te pas.
Voorbeeld
<form>
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email">
</form>
Invoer tipe lêer
Die <input type="file">
definieer 'n lêer-kies veld en 'n "Blaai" knoppie vir lêer oplaai.
Voorbeeld
<form>
<label for="myfile">Select a file:</label>
<input type="file" id="myfile" name="myfile">
</form>
Invoertipe versteek
Die <input type="hidden">
definieer 'n versteekte invoerveld (nie sigbaar vir 'n gebruiker nie).
'n Versteekte veld laat webontwikkelaars data insluit wat nie deur gebruikers gesien of gewysig kan word wanneer 'n vorm ingedien word nie.
'n Versteekte veld stoor dikwels watter databasisrekord bygewerk moet word wanneer die vorm ingedien word.
Let wel: Alhoewel die waarde nie aan die gebruiker in die bladsy se inhoud vertoon word nie, is dit sigbaar (en kan geredigeer word) deur enige blaaier se ontwikkelaarnutsgoed of "Bekyk Bron"-funksionaliteit te gebruik. Moenie verborge insette as 'n vorm van sekuriteit gebruik nie!
Voorbeeld
<form>
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input
type="hidden" id="custId" name="custId" value="3487">
<input
type="submit" value="Submit">
</form>
Invoertipe maand
Dit <input type="month">laat die gebruiker toe om 'n maand en jaar te kies.
Afhangende van blaaierondersteuning, kan 'n datumkieser in die invoerveld verskyn.
Voorbeeld
<form>
<label for="bdaymonth">Birthday (month and
year):</label>
<input type="month" id="bdaymonth" name="bdaymonth">
</form>
Invoer tipe nommer
Die <input type="number">definieer 'n
numeriese invoerveld.
You can also set restrictions on what numbers are accepted.
The following example displays a numeric input field, where you can enter a value from 1 to 5:
Example
<form>
<label for="quantity">Quantity (between 1 and
5):</label>
<input type="number" id="quantity" name="quantity"
min="1" max="5">
</form>
Input Restrictions
Here is a list of some common input restrictions:
| Attribute | Description |
|---|---|
| checked | Specifies that an input field should be pre-selected when the page loads (for type="checkbox" or type="radio") |
| disabled | Specifies that an input field should be disabled |
| max | Specifies the maximum value for an input field |
| maxlength | Specifies the maximum number of character for an input field |
| min | Specifies the minimum value for an input field |
| pattern | Specifies a regular expression to check the input value against |
| readonly | Specifies that an input field is read only (cannot be changed) |
| required | Specifies that an input field is required (must be filled out) |
| size | Specifies the width (in characters) of an input field |
| step | Specifies the legal number intervals for an input field |
| value | Specifies the default value for an input field |
You will learn more about input restrictions in the next chapter.
The following example displays a numeric input field, where you can enter a value from 0 to 100, in steps of 10. The default value is 30:
Example
<form>
<label for="quantity">Quantity:</label>
<input
type="number" id="quantity" name="quantity" min="0" max="100" step="10"
value="30">
</form>
Input Type Range
The <input type="range"> defines a control for entering a number whose exact value is not important (like a slider control). Default
range is 0 to 100. However, you can set restrictions on what
numbers are accepted with the min, max, and step attributes:
Example
<form>
<label for="vol">Volume (between 0 and 50):</label>
<input type="range" id="vol" name="vol" min="0" max="50">
</form>
Input Type Search
The <input type="search"> is used for search fields (a search field behaves like a regular text field).
Example
<form>
<label for="gsearch">Search Google:</label>
<input type="search" id="gsearch" name="gsearch">
</form>
Input Type Tel
The <input type="tel"> is used for input fields that should contain a telephone number.
Example
<form>
<label for="phone">Enter your phone number:</label>
<input type="tel" id="phone" name="phone"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
Input Type Time
The <input type="time"> allows the user to select a time (no time zone).
Depending on browser support, a time picker can show up in the input field.
Example
<form>
<label for="appt">Select a time:</label>
<input type="time" id="appt" name="appt">
</form>
Input Type Url
The <input type="url"> is used for input fields that should contain a URL address.
Depending on browser support, the url field can be automatically validated when submitted.
Some smartphones recognize the url type, and adds ".com" to the keyboard to match url input.
Example
<form>
<label for="homepage">Add your homepage:</label>
<input type="url" id="homepage" name="homepage">
</form>
Input Type Week
The <input type="week"> allows the user to select a week and year.
Depending on browser support, a date picker can show up in the input field.
Example
<form>
<label for="week">Select a week:</label>
<input type="week" id="week" name="week">
</form>
HTML Exercises
HTML Input Type Attribute
| Tag | Description |
|---|---|
| <input type=""> | Specifies the input type to display |