HTML -invoerkenmerke
Hierdie hoofstuk beskryf die verskillende eienskappe vir die HTML- <input>element.
Die waarde-kenmerk
Die invoerkenmerk valuespesifiseer 'n aanvanklike waarde vir 'n invoerveld:
Voorbeeld
Invoervelde met aanvanklike (verstek) waardes:
<form>
<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">
</form>
Die leesalleen-kenmerk
Die invoerkenmerk readonlyspesifiseer dat 'n invoerveld leesalleen is.
'n Leesalleen-invoerveld kan nie gewysig word nie ('n gebruiker kan egter na dit oorslaan, dit uitlig en die teks daarvan kopieer).
Die waarde van 'n leesalleen-invoerveld sal gestuur word wanneer die vorm ingedien word!
Voorbeeld
'n Leesalleen-invoerveld:
<form>
<label for="fname">First name:</label><br>
<input type="text"
id="fname" name="fname" value="John" readonly><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname"
value="Doe">
</form>
Die gestremde kenmerk
Die invoerkenmerk disabledspesifiseer dat 'n invoerveld gedeaktiveer moet word.
'n Gedeaktiveerde invoerveld is onbruikbaar en onklikbaar.
Die waarde van 'n gedeaktiveerde invoerveld sal nie gestuur word wanneer die vorm ingedien word nie!
Voorbeeld
'n Gedeaktiveerde invoerveld:
<form>
<label for="fname">First name:</label><br>
<input type="text"
id="fname" name="fname" value="John" disabled><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname"
value="Doe">
</form>
Die grootte kenmerk
Die invoerkenmerk sizespesifiseer die sigbare breedte, in karakters, van 'n invoerveld.
Die verstekwaarde vir sizeis 20.
Let wel: Die sizekenmerk werk met die volgende invoertipes: teks, soektog, tel, URL, e-pos en wagwoord.
Voorbeeld
Stel 'n breedte vir 'n invoerveld:
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname" size="50"><br>
<label
for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin"
size="4">
</form>
Die maksimumlengte-kenmerk
Die invoerkenmerk maxlengthspesifiseer die maksimum aantal karakters wat in 'n invoerveld toegelaat word.
Let wel: Wanneer a maxlengthgestel is, sal die invoerveld nie meer as die gespesifiseerde aantal karakters aanvaar nie. Hierdie kenmerk gee egter geen terugvoer nie. Dus, as jy die gebruiker wil waarsku, moet jy JavaScript-kode skryf.
Voorbeeld
Stel 'n maksimum lengte vir 'n invoerveld:
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname" size="50"><br>
<label
for="pin">PIN:</label><br>
<input type="text" id="pin" name="pin"
maxlength="4" size="4">
</form>
Die min en maksimum eienskappe
Die invoer minen maxkenmerke spesifiseer die minimum en maksimum waardes vir 'n invoerveld.
Die minen maxkenmerke werk met die volgende invoertipes: nommer, reeks, datum, datum-tyd-plaaslik, maand, tyd en week.
Wenk: Gebruik die maksimum- en min-kenmerke saam om 'n reeks wetlike waardes te skep.
Voorbeeld
Stel 'n maksimum datum, 'n minimum datum en 'n reeks wettige waardes:
<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"><br><br>
<label for="quantity">Quantity
(between 1 and 5):</label>
<input type="number" id="quantity"
name="quantity" min="1" max="5">
</form>
Die veelvuldige kenmerk
Die invoerkenmerk multiplespesifiseer dat die gebruiker toegelaat word om meer as een waarde in 'n invoerveld in te voer.
Die multiplekenmerk werk met die volgende invoertipes: e-pos en lêer.
Voorbeeld
'n Lêeroplaaiveld wat veelvuldige waardes aanvaar:
<form>
<label for="files">Select files:</label>
<input
type="file" id="files" name="files" multiple>
</form>
Die patroonkenmerk
Die invoerkenmerk patternspesifiseer 'n gereelde uitdrukking waarteen die invoerveld se waarde gekontroleer word wanneer die vorm ingedien word.
Die patternkenmerk werk met die volgende invoertipes: teks, datum, soektog, url, tel, e-pos en wagwoord.
Wenk: Gebruik die globale titel- kenmerk om die patroon te beskryf om die gebruiker te help.
Wenk: Kom meer te wete oor gereelde uitdrukkings in ons JavaScript-tutoriaal.
Voorbeeld
'n Invoerveld wat slegs drie letters (geen syfers of spesiale karakters) kan bevat nie:
<form>
<label for="country_code">Country code:</label>
<input type="text" id="country_code" name="country_code"
pattern="[A-Za-z]{3}" title="Three letter country code">
</form>
Die plekhouer-kenmerk
Die invoer- placeholderkenmerk spesifiseer 'n kort wenk wat die verwagte waarde van 'n invoerveld beskryf ('n voorbeeldwaarde of 'n kort beskrywing van die verwagte formaat).
Die kort wenk word in die invoerveld vertoon voordat die gebruiker 'n waarde invoer.
Die placeholderkenmerk werk met die volgende invoertipes: teks, soektog, url, tel, e-pos en wagwoord.
Voorbeeld
'n Invoerveld met 'n plekhouer teks:
<form>
<label for="phone">Enter a phone number:</label>
<input type="tel" id="phone" name="phone"
placeholder="123-45-678"
pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
</form>
Die vereiste kenmerk
Die invoer- requiredkenmerk spesifiseer dat 'n invoerveld ingevul moet word voordat die vorm ingedien word.
Die requiredkenmerk werk met die volgende invoertipes: teks, soektog, url, tel, e-pos, wagwoord, datumkiesers, nommer, merkblokkie, radio en lêer.
Voorbeeld
'n Vereiste invoerveld:
<form>
<label for="username">Username:</label>
<input
type="text" id="username" name="username" required>
</form>
Die stap Eienskap
Die invoerkenmerk stepspesifiseer die wettige getalintervalle vir 'n invoerveld.
Voorbeeld: as stap="3", kan wettige getalle -3, 0, 3, 6, ens.
Wenk: Hierdie kenmerk kan saam met die maksimum- en min-kenmerke gebruik word om 'n reeks wetlike waardes te skep.
Die stepkenmerk werk met die volgende invoertipes: nommer, reeks, datum, datum-tyd-plaaslik, maand, tyd en week.
Voorbeeld
'n Invoerveld met 'n gespesifiseerde wettige getalintervalle:
<form>
<label for="points">Points:</label>
<input
type="number" id="points" name="points" step="3">
</form>
Let wel: Invoerbeperkings is nie onfeilbaar nie, en JavaScript bied baie maniere om onwettige invoer by te voeg. Om insette veilig te beperk, moet dit ook deur die ontvanger (die bediener) nagegaan word!
Die outofokus-kenmerk
Die invoer- autofocuskenmerk spesifiseer dat 'n invoerveld outomaties fokus moet kry wanneer die bladsy laai.
Voorbeeld
Laat die "Voornaam"-invoerveld outomaties fokus kry wanneer die bladsy laai:
<form>
<label for="fname">First name:</label><br>
<input
type="text" id="fname" name="fname" autofocus><br>
<label for="lname">Last
name:</label><br>
<input type="text" id="lname" name="lname">
</form>
Die hoogte- en breedte-kenmerke
Die invoer heighten widthkenmerke spesifiseer die hoogte en breedte van 'n <input
type="image">element.
Wenk: Spesifiseer altyd beide die hoogte- en breedte-kenmerke vir prente. As hoogte en breedte ingestel is, word die spasie wat vir die prent benodig word, gereserveer wanneer die bladsy gelaai word. Sonder hierdie eienskappe ken die blaaier nie die grootte van die prent nie, en kan nie die toepaslike spasie daarvoor reserveer nie. Die effek sal wees dat die bladsyuitleg sal verander tydens laai (terwyl die beelde laai).
Voorbeeld
Definieer 'n prent as die indien-knoppie, met hoogte- en breedte-kenmerke:
<form>
<label for="fname">First name:</label>
<input
type="text" id="fname" name="fname"><br><br>
<label for="lname">Last
name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
</form>
Die lys Kenmerk
Die invoer listkenmerk verwys na 'n <datalist>element wat vooraf gedefinieerde opsies vir 'n <invoer> element bevat.
Voorbeeld
'n <invoer> element met vooraf gedefinieerde waardes in 'n <datalist>:
<form>
<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 outovoltooi-kenmerk
Die invoerkenmerk autocompletespesifiseer of 'n vorm of 'n invoerveld outovoltooi aan of af moet hê.
Outovoltooi laat die blaaier toe om die waarde te voorspel. Wanneer 'n gebruiker begin om 'n veld in te tik, moet die blaaier opsies vertoon om die veld in te vul, gebaseer op vroeër getikte waardes.
Die autocompletekenmerk werk met <form>en die volgende <input>tipes: teks, soektog, url, tel, e-pos, wagwoord, datumkiesers, reeks en kleur.
Voorbeeld
'n HTML-vorm met outovoltooi aan en af vir een invoerveld:
<form action="/action_page.php" autocomplete="on">
<label for="fname">First
name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname"
name="lname"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" autocomplete="off"><br><br>
<input type="submit" value="Submit">
</form>
Wenk: In sommige blaaiers sal jy dalk 'n outovoltooi-funksie moet aktiveer om dit te werk (Kyk onder "Voorkeure" in die blaaier se kieslys).
HTML-oefeninge
HTML-vorm en invoerelemente
| Tag | Description |
|---|---|
| <form> | Defines an HTML form for user input |
| <input> | Defines an input control |
Vir 'n volledige lys van alle beskikbare HTML-merkers, besoek ons HTML-merkerverwysing .