Tegs INPUT
| Pārlūks |  Internet Explorer |
 Netscape |
 Opera |
 Safari |
 Firefox |
|||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Versija | 5.5 | 6.0 | 7.0 | 8.0 | 8.0 | 9.0 | 7.0 | 8.0 | 9.2 | 9.5 | 1.3 | 2.0 | 3.1 | 1.5 | 2.0 | 3.0 |
| Atbalsts | Jā | Jā | Jā | Jā | Jā | Jā | Jā | Jā | Jā | Jā | Jā | Jā | Jā | Jā | Jā | Jā |
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Apraksts
Tegs <INPUT> ir viens no daudzpusīgiem formas elementiem un ļauj izveidot dažādus interfeisa elementus ,kas ļauj nodrošināt saskarsmi ar lietotāju. Galvenokārt <INPUT> paredzēts teksta lauku, dažādu pogu, pārslēdzēju un "čekboksu" radīšanai. Lai arī elements <INPUT> nav obligāti jāievieto konteinerī <FORM>, kurš nosaka formu, tomēr ja ievadītie dati tālāk tiks nosūtīti uz serveri, kur tos apstrādās CGI-programma, tad FORM jānorāda obligāti. Tas pats attiecas gadījumā, kad datus apstrādā klienta puses programmas, piemēram JavaScript.
Galvenais tega <INPUT> parametrs, kurš nosaka elementa izskatu — type. Tas ļauj uzstādīt šādus formas elementus: teksta lauks (text), lauks ar paroli (password), pārslēdzējs (radio), "ķeksis" (checkbox), slēpts lauks (hidden), poga (button), poga formas nosūtīšanai (submit), poga formas attīrīšanai (reset), poga faila nosūtīšanai (file) un poga ar attēlu (image). Katram elementam ir savs parametru saraksts, kuri nosaka tā izskatu un īpašības.
Sintakse
<form> <input ...> </form>
Parametri
- align
- Nosaka attēla izlīdzināšanu.
- alt
- Alternatīvais teksts pogai ar attēlu.
- border
- Rāmīša biezums ap attēlu.
- checked
- Pirmatnēji aktivētais pārslēdzējs vai "ķeksis".
- disabled
- Bloķē piekļuvi elementam.
- maxlength
- Maksimālais tekstā atļauto simbolu skaits.
- name
- Lauka vārds, kas paredzēts tam, lai formas apstrādātājs spētu to identificēt.
- readonly
- Nosaka, ka lauka saturu nevarēs izmainīt lietotājs.
- size
- Teksta lauka platums.
- value
- Elementa vērtība.
Aizverošais tegs
Nav nepieciešams.
Piemērs 1. Tega <INPUT> izmantošana
HTML 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Tegs INPUT</title>
</head>
<body>
<form name="test" method="post" action="/html/example/input1.php">
<p><b>Ваше имя:</b><br>
<input name="nick" type="text" size="40">
</p>
<p><b>Каким браузером в основном пользуетесь:</b><Br>
<input type="radio" name="browser" value="ie"> Internet Explorer<Br>
<input type="radio" name="browser" value="opera"> Opera<Br>
<input type="radio" name="browser" value="firefox"> Firefox<Br>
</p>
<p>Комментарий<Br>
<textarea name="comment" cols="40" rows="3"></textarea></p>
<p><input type="submit" value="Отправить">
<input type="reset" value="Очистить"></p>
</form>
</body>
</html>Piemēra rezultāts.
Tega <INPUT> parametru apraksts
Parametrs ALIGN
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Apraksts
Nosaka, kā izlīdzināt lauku ar attēlu attiecībā pret tekstu vai citiem formas elementiem.
Sintakse
<input type="image" align="bottom | left | middle | right | top">
Argumenti
Tabulā uzskaitīti parametra align iespējamie varianti un to izmantošanas rezultāts.
| HTML kods |
Apraksts | Piemērs |
|---|---|---|
| <input type="image" src="sample.gif " align="bottom"> | Attēla apakšējās malas izlīdzināšana pēc apkārtējā teksta. | Lorem ipsum dolor sit amet, consectetuer 
adipiscing elit... |
| <input type="image" src="sample.gif " align="left"> | Attēla izlīdzināšana pēc loga kreisās malas. | Lorem
ipsum dolor sit amet, consectetuer adipiscing elit... |
| <input type="image" src="sample.gif " align="middle"> | Attēla vidusdaļas izlīdzināšana pēc tekošās rindas bāzes līnijas. | Lorem ipsum dolor sit amet,
consectetuer adipiscing elit... |
| <input type="image" src="sample.gif " align="right"> | Attēla izlīdzināšana pēc loga labās malas. | Lorem
ipsum dolor sit amet, consectetuer adipiscing elit... |
| <input type="image" src="sample.gif " align="top"> | Attēla augšējā robeža tiek izlīdzināta pēc tekošās rindas paša augstākā elementa. | Lorem ipsum dolor sit amet,
consectetuer adipiscing elit... |
Noklusētā vērtība
bottom
Piemērs 2. Attēla izlīdzināšana
HTML 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Tegs INPUT, parametrs align</title>
</head>
<body>
<form method="post" action="/html/example/handler.php">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit...</p>
<p><input src="/images/imgbutton.gif" type="image" align="right"></p>
</form>
</body>
</html>Piezīme
Papildus argumenti absbottom, absmiddle, baselineun un texttop tiek saprasti no pārlūku puses, bet netiek atbalstīti HTML 4.x/XHTML 1.0 specifikācijā.
Parametrs ALT
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Apraksts
Parametrs alt uzstāda alternatīvo tekstu attēlam. Šāds teksts ļauj attēlot informāciju par attēlu, ja pārlūkā ir atslēgta attēlu ielāde. Par cik attēlu ielāde notiek pēc tam, kad pārlūks saņēmis informāciju par tiem, attēlu aizvietojošais teksts parādīsies agrāk. Turpinoties ielādei, teksts tiks aizvietots ar attēlu.
Pārlūki šo tekstu mēdz attēlot arī kā "uzpeldošu" tekstu, kurš kļūst redzms, uzvedot peles kursoru uz attēla.
Sintakse
<input type="image" alt="Teksts">
Argumenti
Jebkura teksta rinda. Tai obligāti jāatrodas pēdiņās.
Noklusētā vērtība
Nav.
Piemērs 3. Alternatīvā teksta pievienošana
HTML 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Tegs INPUT, parametrs alt</title>
</head>
<body>
<form method="post" action="/html/example/handler.php">
<p>...</p>
<p><input src="/images/imgbutton.gif" type="image" alt="Отправить форму на сервер"></p>
</form>
</body>
</html>Parametrs BORDER
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Apraksts
Pārlūki apstrādā attēlus, kas pievienoti ar tegu <INPUT>, līdzīgi attēliem, izveidotiem ar tegu <IMG>. Tāpat ap attēlu var izveidot rāmīti, kura krāsa sakritīs ar teksta krāsu.
Sintakse
<input type="image" border="rāmīša biezums">
Argumenti
Jebkurš vesels pozitīvs skaitlis pikseļos.
Noklusētā vērtība
0
Piemērs 4. Rāmīša platums ap attēlu
HTML 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Tegs INPUT, parametrs border</title>
</head>
<body>
<form method="post" action="/html/example/handler.php">
<p>...</p>
<p><input src="/images/imgbutton.gif" type="image" border="2"></p>
</form>
</body>
</html>Parametrs CHECKED
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Apraksts
Šis parametrs nosaka, vai tādi formas elementi, kā "ķeksis" vai "radiopoga" sākotnēji ir iezīmēti, vai nē. Ja tiek izmantoti pārslēdzēji (radiobutton), var tikt iezīmēts tikai viens grupas elements, "ķekšiem" (checkbox) pieļaujams iezīmēt kaut visus elementus.
Sintakse
<input type="radio" checked> <input type="checkbox" checked>
Argumenti
Nav.
Noklusētā vērtība
Pēc noklusējuma šis parametrs ir izslēgts.
Piemērs 5. Parametra checked izmantošana
HTML 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Tegs INPUT, parametrs checked</title>
</head>
<body>
<form method="post" action="/html/example/input5.php">
<p><b>С какими операционными системамы вы знакомы?</b></p>
<p><input type="checkbox" name="option1" value="a1" checked>Windows 95/98<Br>
<input type="checkbox" name="option2" value="a2">Windows 2000<Br>
<input type="checkbox" name="option3" value="a3">System X<Br>
<input type="checkbox" name="option4" value="a4">Linux<Br>
<input type="checkbox" name="option5" value="a5">X3-DOS</p>
<p><input type="submit"value="Отправить"></p>
</form>
</body>
</html>Piemēra rezultāts
Parametrs DISABLED
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Apraksts
Bloķē piekļuvi formas laukam un tā izmaiņas. Tādā gadījumā lauks tiek attēlots pelēkā krāsā un lietotājam nav iespējams to aktivēt. Turklāt, tāds lauks nevar tikt fokusēts ar taustiņa Tab palīdzību, peli vai citā veidā. Tomēr, tādu lauka stāvokli var mainīt ar skriptu palīdzību.
Sintakse
<input type="..." disabled>
Pielietojums
Visiem formas elementiem.
Argumenti
Nav.
Noklusētā vērtība
Pēc noklusējuma šis parametrs ir izslēgts.
Piemērs 6. Formas lauka bloķēšana
HTML 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Tegs INPUT, parametrs disabled</title>
</head>
<body>
<form action="/html/example/handler.php">
<p><input type="text" size="30" onFocus="this.form.submit.disabled=0"></p>
<p><input type="submit" name="submit" value="Отправить" disabled></p>
</form>
</body>
</html>Parametrs MAXLENGTH
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Apraksts
Uzstāda maksimālo simbolu skaitu, kuri var tikt ievadīti teksta laukā. Kad šis skaits ir sasniegts, turpmākos simbolus nav iespējams ievadīt.
Sintakse
<input type="text" maxlength="skaitlis"> <input type="password" maxlength="skaitlis">
Argumenti
Jebkurš vesels pozitīvs simbolu skaits.
Noklusētā vērtība
Ievadāmo simbolu skaits nav ierobežots.
Piemērs 7. Ievadāmo simbolu skaita ierobežošana
HTML 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Tegs INPUT, parametrs maxlength</title>
</head>
<body>
<form action="/html/example/handler.php">
<p><input type="text" size="30" maxlength="10"></p>
<p><input type="submit" name="submit" value="Отправить"></p>
</form>
</body>
</html>Parametrs NAME
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Apraksts
Nosaka formas elementa unikālo vārdu. Kā likums, šis vārds tiek izmantots, nosūtot formas datus uz serveri vai piekļuvei lauka datiem, izmantojot skriptus.
Sintakse
<input type="..." name="vārds">
Pielietojums
Visiem formas elementiem.
Argumenti
Kā nosaukums tiek izmantots burtu un/vai ciparu salikums. JavaScript ir jūtīgs pret reģistru, tāpēc vēršoties pie formas pēc tās nosaukuma no skriptiem, izmantojiet to pašu rakstību, ko parametrā name.
Noklusētā vērtība
Nav.
Piemērs 8. Griešanās pie formas lauka pēc tā vārda
HTML 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Tegs INPUT, parametrs name</title>
<script type="text/javascript">
function dataField(f) {
alert("Вы ввели: " + f.comment.value);
}
</script>
</head>
<body>
<form action="/html/example/handler.php">
<p><b>Введите текст</b></p>
<p><input type="text" name="comment">
<input type="button" value="ОК" onClick="dataField(this.form)"></p>
</form>
</body>
</html>Piemēra rezultāts
Šajā piemērā nospiežot pogu, tiek izvadīts JavaScript logs, kurā attēlojas frāze, kas ievadīta teksta laukā.
Parametrs READONLY
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Apraksts
Kad tegam <INPUT> tiek pievienots parametrs readonly, lietotājs teksta lauka saturu vairs nevar mainīt, ne ievadīt jaunu, ne modificēt esošo. Turklāt, tāds lauks nevar tikt fokusēts ar taustiņa Tab palīdzību, peli vai citā veidā. Tomēr, tādu lauka stāvokli var mainīt ar skriptu palīdzību.
Sintakse
<input type="text" readonly> <input type="password" readonly>
Argumenti
Nav.
Noklusētā vērtība
Pēc noklusējuma šī vērtība ir izslēgta.
Piemērs 9. Lauks tikai lasīšanai
HTML 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Tegs INPUT, parametrs readonly</title>
</head>
<body>
<form action="/html/example/handler.php">
<p><input type="text" name="comment" size="40" value="Введенный текст не может изменяться"
readonly></p>
</form>
</body>
</html>Piemēra rezultāts.
Parametrs SIZE
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Apraksts
Teksta lauka platums, kurš tiek izteikts mono-platuma šrifta simbolos. Citiem vārdiem, platums tiek noteikts ar vienāda platuma tuvu stāvošu simbolu skaitu pa horizontāli. Ja izmērs tiek mainīts ar stilu palīdzību, mainās arī lauka platums.
Sintakse
<input type="text" size="platums"> <input type="password" size="platums">
Argumenti
Jebkurš vesels pozitīvs skaitlis.
Noklusētā vērtība
20
Parametrs SRC
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Apraksts
Grafiskā faila adrese, kurš tiks attēlots web-lapā laukā ar attēlu. Populārākie ir failu formāti GIF un JPEG.
Sintakse
<input type="image" src="URL">
Argumenti
Kā vērtība tiek izmantots absolūtais vai relatīvais ceļš uz failu.
Noklusētā vērtība
Nav.
Parametrs TYPE
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Apraksts
Paziņo pārlūkam, pie kāda tipa pieskaitāms formas elements.
Sintakse
<input type="button | checkbox | file | hidden | image | password | radio | reset | submit | text">
Obligāts parametrs
Jā
Argumenti
Tabulā uzskaitīti iespējamie parametra type varianti un iegūtais formas lauka izskats.
| Tips | Apraksts | Izskats |
|---|---|---|
| button | Poga. | |
| checkbox | "Ķekšlauki". Ļauj izvēlēties vairākus variantus. | Пиво Чай Кофе |
| file | Lauks faila vārda ievadīšanai, kurš tiks nosūtīts uz serveri. | |
| hidden | Slēpts lauks, kurš netiks attēlots web-lapā. | |
| image | Lauks ar attēlu. Izdarot "klikšķi" uz attēla, formas dati tiks nosūtīti uz serveri. | |
| password | Parasts teksta lauks, tomēr atšķiras ar to, ka visi simboli tiek attēloti ar zvaigznītēm. Paredzēts ievadāmo paroļu slēpšanai. | |
| radio | Pārslēdzēji. Tiek izmantoti, ja jāizvēlas tikai viens no variantiem. | Пиво Чай Кофе |
| reset | Poga formā ievadīto datu dzēšanai. | |
| submit | Poga formas datu nosūtīšanai uz serveri. | |
| text | Teksta lauks. Paredzēts simbolu ievadīšanai no klaviatūras. |
Noklusētā vērtība
text
Piemērs 10. Formas elementi
HTML 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Tegs INPUT, parametrs type</title>
</head>
<body>
<form action="/html/example/input10.php">
<p><input type="radio" name="drink" value="rad1"> Пиво<Br>
<input type="radio" name="drink" value="rad2"> Чай<Br>
<input type="radio" name="drink" value="rad3"> Кофе</p>
<p><input type="image" src="/images/imgbutton.gif"></p>
</form>
</body>
</html>ParametrsVALUE
| HTML: | 3.2 | 4 | XHTML: | 1.0 | 1.1 |
Apraksts
Nosaka formas elementa vērtību, kura tiks nosūtīta uz serveri vai saņemta ar skriptu palīdzību. Uz serveri tiek nosūtīts pāris «vārds=vērtība», kur vārds tiek uzstādīts ar tega <INPUT> parametru name, bet vērtība — ar parametru value.
Atkarībā no elementa tipa, parametram value var būt šāda loma:
- pogām (input type="button | reset | submit") uzstāda uzrakstu uz tām;
- teksta laukiem (input type="password | text") uzstāda primāri ievadīto tekstu. Lietotājs var nodzēst šo tekstu un ievadīt savu, bet izmantojot formā pogu Reset, lietotāja ievadītais teksts var tikt dzēsts un atjaunots pirmatnēji uzstādītais parametrā value;
- "ķekšlaukiem" un pārslēdzējiem (input type="checkbox | radio") unikāli apzīmē katru elementu, lai klienta- vai serverpuses programma spētu noteikt, kādu punktu izvēlējies lietotājs.
Sintakse
<input type="..." value="vērtība">
Izmantošana
Visiem formas elementiem.
Argumenti
Jebkura teksta rinda.
Noklusētā vērtība
Nav.
Piemērs 12. Formas lauka vērtība
HTML 4.01IE 5.5IE 6IE 7Op 9.5Sa 3.1Ff 2.0Ff 3.0
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Tegs INPUT, parametrs value</title>
</head>
<body>
<form action="/html/example/input12.php">
<p><b>Как по вашему мнению расшифровывается аббревиатура "ОС"?</b></p>
<p><input type="radio" name="answer" value="a1">Офицерский
состав<Br>
<input type="radio" name="answer" value="a2">Операционная
система<Br>
<input type="radio" name="answer" value="a3">Большой
полосатый мух</p>
<p><input type="submit" value="Отправить"></p>
</form>
</body>
</html>
