Formos ir įvestis HTML

Yra daugybė atvejų, kada be formų sunku apsieiti. Tai ne tik sudėtingos apklausos, bet ir elementari kontaktų forma. Šiame straipsnyje apžvelgsime, kokius įvesties būdus siūlo HTML.

Formos ir įvestis HTML

Formos 

Forma - puslapio dalis, kurioje galimi formos elementai. Tai elementai, leidžiantys vartotojui įvesti informaciją (teksto laukeliai, išsiskleidžiantys meniu, varnelės ir pan.). Forma pradedama <form> žyma: 

<form>
.
įvesties elementai
.
</form> 

Įvestis

Dažniausiai naudojama formose žyma yra <input>. Įvesties tipas nustatomas "type" atributu. Dažniausiai naudojamus tipus apžvelgsime žemiau Taip pat atributu "name" laukeliui suteikiamas pavadinimas.

Tekstinis laukelis

Tokie laukeliai naudojami, kai norima, kad vartotojas įvestų raides, skaičius, simbolius ir pan.:

<form>
Vardas:
<input type="text" name="vardas" />
<br />
Pavardė:
<input type="text" name="pavarde" />
</form>

Naršyklėje tai atrodys taip:

Tekstiniai laukeliai

Pažymėtina, kad pati forma yra nematoma. Taip pat standartiškai dauguma naršyklių tekstiniuose laukeliuose talpina 20 simbolių.

"Radio buttons" 

Šie mygtukai naudojami, kai vartotojas turi pasirinkti vieną iš riboto skaičiaus pasirinkčių:

<form>
<input type="radio" name="lytis" value="vyras" /> Vyras
<br />
<input type="radio" name="lytis" value="moteris" /> Moteris 
</form>

Naršyklė tai rodys taip:

Radio buttons

Varnelės

Varnelės naudojamos, kai norite, kad vartotojas pasirinktų vieną ar daugiau iš numatytų pasirinkčių:

<form>
Mėgstu apelsinus:
<input type="checkbox" name="vaisiai" value="Apelsinai" />
<br />
Mėgstu mandarinus:
<input type="checkbox" name="vaisiai" value="Mandarinai" />
<br />
Mėgstu obuolius:
<input type="checkbox" name="vaisiai" value="Obuoliai" />
</form> 

Naršyklėje ši forma atrodys taip:

Varnelės

Formos "action" atributas ir siuntimo mygtukas 

Kai vartotojas paspaudžia "Siųsti", formos duomenys siunčiami į serverį. Formos "action" atributu nurodoma, kokiam failui siųsti formos turinį, o tas failas dažniausiai vienaip ar kitaip apdoroja tą informaciją.

<form name="prisijungimas" action="html_formos_siuntimas.asp" method="get">
Vartotojo vardas:
<input type="text" name="vartotojas" />
<input type="submit" value="Siųsti" />
</form>

Tai atrodys štai taip:

Siuntimo forma

Jei įrašysite ką nors į laukelį ir paspausite "Siųsti", įvesti duomenys bus nukreipti į dokumentą "html_formos_siuntimas.asp".

Formų žymės 

<form> Forma 
<input> Įvesties laukelis 
<textarea> Kelių eilučių ilgio teksto įvedimo laukelis 
<label> Uždeda etiketę pasirinkčiai 
<fieldset> Įrėmintas laukelis 
<legend> Įrėminto laukelio antraštė 
<select> Sukuria išsiskleidžiantį meniu 
<optgroup> Pasirinkčių grupė 
<option> Pasirinktis išsiskleidžiančiame meniu 
<button> Mygtukas 
<isindex> Nenaudotina. Paieškomas indeksas 
 

Rašykite mums: ipamokos[eta]ipamokos.lt