HTML CSS Javascript photoshop pamokos

HTML formos yra naudojamos įvairiausio tipo įvedimui apdoroti. Viename puslapyje gali būti kelios formos.

Formos

Forma, tai zona, kuri savyje talpina formos elementus.

Formos elementai, tai elementai, kurie leidžia vartotojui įvesti informaciją (pvz.: teksto laukai - text ir textarea, išsiskleidžiantys pasirnkimo meniu - drop-down, radijo myktukai - radio, kontrolinio įvedimo elementai - checkbox ir kiti) į formą.

Formos pradžia apibrėžiama su <form> tag'u ir pabaiga su </form>

<form>
  <input>
  <input>
</form>

Įvedimas

Labiausiai naudojamas formoje tag'as yra <input> tag'as, kuris apibrėžia įvedimą. Įvedimo tipas nurodomas <input> tag'o parametre type. Žemiau yra paaiškinti pagrindiniai įvedimo tipai.

Teksto laukai (text field)

Teksto laukai yra naudojami kai norite leisti vartotojui įvesti informaciją raidžių, skaičių ar kitų simbolių pavidalu.

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

Štai, kaip tai atrodo naršyklėje:

Pastebėkime, kad pačios formos niekur nesimato. Taip pat daugelyje naršyklių teksto laukų plotis pagal nutylėjimą yra 20 simbolių.

Radijo mygtukai (Radio buttons)

Radio Buttons are used when you want the user to select one of a limited number of choices.

Radijo mygtukai yra naudojami, kai norite leisti vartotojui pasirinkti vieną iš pateiktų variantų.

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

Štai, kaip tai atrodo naršyklėje:

Pastebėkime, kad tik vienas variantas gali būti pažymėtas.

Kontrolinio įvedimo elementas - checkbox.

Checkbox'ai yra naudojami, kai norima suteikti vartotojui galimybę pasirinkti kelis variantus iš visų pateiktų.

<form>
Aš myliu tėtį:
<input type="checkbox" name="myliu" value="teti">
<br>
Aš myliu sesę: 
<input type="checkbox" name="myliu" value="sese">
<br>
Aš myliu Gerdą: 
<input type="checkbox" name="myliu" value="gerda">
</form>

Štai, kaip tai atrodo naršyklėje:

Formos action atributas ir duomenų pateikimo mygtukas

Kai vartotojas paspaudžia įvedimo mygtuką (submit), tada formos duomenys yra išsiunčiami serveriui. Formos action atribute nurodoma koks failas priims siunčiamus duomenis.

<form name="input" action="html_formos_ivedimas_pvz.php"
method="get">
Vardas: 
<input type="text" name="vardas">
<input type="submit" value="Siųsti">
</form>

Štai, kaip tai atrodo naršyklėje:

Jei įvesite duomenis į šį lauką, jie bus išsiųsti serveryje patalpintam failui html_fromos_ivedimas_pvz.php ir jame esantis kodas priėmęs duomenis, juos išves į naršyklę. Kaip sukurti tokio tipo failus galite pažiųrėti php pamokose.

Redaktoriaus "Pabandyk pats" pavyzdžiai

Formų tag'ai