HTML & CSS pradedantiesiems.

HTML ir CSS pradedantiesiems (dalis 14): Formos (2)

Visi pamokos vaizdo įrašai HTML ir CSS pradedantiesiems

Naudodami pasirinkimo sąrašus, galite lankytojams pateikti sąrašą įrašų, iš kurių jie gali pasirinkti vieną.

<select name="kalbos">
   <option>HTML</option>
   <option>JavaScript</option>
   <option>CSS</option>
   <option>XML</option>
   <option>Java</option>
</select>

Pasirinkimo sąrašai nustatomi per select elementą. Taip pat pasirinkimo sąrašas turi būti vienareikšmiškai identifikuojamas dokumente naudojant pavadinimą (name). Kiekvieną sąrašo įrašą nustatome naudodami option elementą. Tarp atidarymo ir uždarymo <option> esantis tekstas yra sąrašo įrašo tekstas.

HTML ir CSS pradedantiesiems (14 dalis): Formos (2)

Numatytasis elgesys yra siunčiant formos duomenis yra pasirinkto sąrašo įrašo tekstas. Tačiau alternatyvūs išsiuntimo variantai gali būti nustatomi kitaip. Tai yra atliekama naudojant value atributą.

<select name="kalbos">
   <option value="s1">HTML</option>
   <option value="s2">JavaScript</option>
   <option value="s3">CSS</option>
   <option value="s4">XML</option>
   <option value="s5">Java</option>
</select>



Tam value tiesiog priskirkite norimą išsiuntimo reikšmę.

Įprastai pasirinkimo sąraše matomas tik vienas įrašas. Tačiau, jei norite, jūs galite parodyti ir keletą įrašų.

HTML & CSS pradedantiesiems (dalis 14): Formos (2)

Tam select elementui priskirkite atributą size. Šis size nustato pasirinkimo sąrašo rodymo dydį.

<select name="kalbos" size="3">
   <option>HTML</option>
   <option>JavaScript</option>
   <option>CSS</option>
   <option>XML</option>
   <option>Java</option>
</select>



Jei sąraše yra daugiau įrašų nei galima parodyti, sąrašas gali būti slankomas.

Iš prigimties pasirinkimo sąraše galima šviesinti tik vieną įrašą. Jei reikia, tačiau, galima nustatyti ir daugiakartinį pasirinkimą.

<select name="kalbos" size="3" multiple>
   <option>HTML</option>
   <option>JavaScript</option>
   <option>CSS</option>
   <option>XML</option>
   <option>Java</option>
</select>

Norėdami nustatyti daugiakartinį pasirinkimą, priskirkite multiple atributą select elementui.

HTML ir CSS pradedantiesiems (dalis 14): Formos (2)

Pasirinkimo sąraše iš pradžių nėra iš anksto parinktas joks įrašas. Tačiau tai taip pat gali būti pakeista naudojant atitinkamą atributą.

<select name="kalbos" size="3" multiple>
   <option>HTML</option>
   <option>JavaScript</option>
   <option selected>CSS</option>
   <option>XML</option>
   <option>Java</option>
</select>



Norėdami iš anksto pasirinkti įrašą, priskirkite atitinkamą option elementą atributui selected.

HTML ir CSS pradedantiesiems (dalis 14): Formos (2)



Jūs taip pat galite iš anksto pasirinkti keletą įrašų. Norėdami tai padaryti, tiesiog naudokite atributą selected kelis kartus.

Radijo mygtukai

Naudodami taip vadinamuosius radijo mygtukus, galite nustatyti mygtukų grupes.

HTML ir CSS pradedantiesiems (dalis 14): Formos (2)



Iš tokios grupės vartotojai gali pasirinkti vieną iš siūlomų parinkčių.

Radijo mygtukai apibrėžiami naudojant input elementus, kuriems priskiriamas atributas-reikšmė pora type="radio".

<form action="form.php" method="post">
   <p>Ar norite prenumeruoti naujienlaiškį?:</p>
   <p>
    <input type="radio" name="naujienlaiskis" value="taip" /> Taip<br />
    <input type="radio" name="naujienlaiskis" value="ne" /> Ne
   </p>
</form>



Vėl naudokite name atributą, kad priskirtumėte radijo mygtukams pavadinimą. Visi mygtukai, turintys tą patį pavadinimą, priklauso vienai grupei. Tada galima pažymėti tik vieną iš šių mygtukų.

Naudodami value atributą galite nustatyti skirtingas mygtukų išsiuntimo reikšmes.

Norint iš anksto parinkti mygtuką, priskirkite jam atributą checked.

<form action="form.php" method="post">
   <p>Ar norite prenumeruoti naujienlaiškį?:</p>
   <p>
    <input type="radio" name="naujienlaiskis" value="taip" /> Taip<br />
    <input type="radio" name="naujienlaiskis" value="ne" checked /> Ne
   </p>
</form>



Atkreipkite dėmesį, kad išankstinis pasirinkimas gali būti atliktas tik su vieno mygtuko grupės pagalba.

Žymimieji langeliai

Žymimus langelius taip pat žinote iš begalės formų.

HTML ir CSS pradedantiesiems (dalis 14): Formos (2)



Tai yra grupė pažymimų stačiakampių, kuriuos vartotojai gali pasirinkti vieną, nei vieno ar keliuos.

<p>Kokie dar temai jus dominuoja?:</p>
  <p>
    <input type="checkbox" name="thema" value="html" /> HTML<br />
    <input type="checkbox" name="thema" value="css" /> CSS<br />
    <input type="checkbox" name="thema" value="javascript" /> JavaScript
</p>



Žymimi langeliai apibrėžiami naudojant input-elementus, kuriems priskiriamas atributas ir reikšmė type="checkbox". Kiekvienam žymimam langeliui suteikiamas unikalus identifikatorius per atributą name. Visi žymimi langeliai, turintys tą patį pavadinimą, priklauso tam pačiam grupei. Per atributą value galima nustatyti atskiros žymimos langelio pasiuntimo reikšmę.

Slėpti laukai

Jūs galite apibrėžti formose laukus, kurie yra nematomi lankytojams. Pateikiant formą, laukuose esančios reikšmės taip pat bus perduodamos. Tai gali būti naudinga, pvz., kai norite perduoti PHP nustatytas reikšmes, nepaskelbdami apie tai vartotojams.

Slėptus laukus galima apibrėžti naudojant input-elementus su atributo ir reikšmės deriniu type="hidden".

<input type="hidden" name="id" value="">



Elementui suteikiamas unikalus identifikatorius per atributą name. Lauko reikšmė nustatoma per atributą value. Tai gali būti statinė reikšmė. Tačiau ją taip pat galima dinamiškai priskirti, pvz., naudojant PHP arba JavaScript.

Įkėlimo laukai

Jei norite, kad lankytojai galėtų įkelti failus, taip pat galite pasiūlyti tinkamą lauką. Štai, kaip atrodytų atitinkama taikymo pavyzdys:

<form action="form.php" method="post" enctype="multipart/form-data">
   <p>Jūsų pasirinkimas:<br> <input name="File" type="file" /></p>
</form>



Naršyklėje tai atrodo taip:

HTML ir CSS pradedantiesiems (dalis 14): Formos (2)



Įkelimo laukai apibrėžiami naudojant input-elementus su atributo ir reikšmės deriniu type="file". Šio tipo laukams įrašant pradiniame <form> nurodykite method="post". Be to, šioje dalyje turėtų būti nurodytas atributo ir reikšmės derinys enctype="multipart/form-data". Tik tuomet bus iš tikrųjų perduodami failai. Jei šios savybės nenurodomos, perduodamas tik failo pavadinimas.

Siųsti ir Atšaukti mygtukai

Kad iš viso būtų galima siųsti formos duomenis, reikalingas atitinkamas mygtukas.

HTML ir CSS pradedantiesiems (14 dalis): Formos (2)



Formų siuntimui naudojama ši sintaksė:

<input type="submit" value="Siųsti" />



Atributo value reikšmė nusako tai, kas bus rodoma ant mygtuko.

Šie Pateikti mygtukai turi priešingybę - Atšaukti mygtukai.

HTML ir CSS pradedantiesiems (dalis 14): Formos (2)

Paspaudus šį mygtuką, bus išvalomi visi formos turinys. Šių mygtukų sintaksė yra:

<input type="reset" value="Atšaukti" />



Taip pat čia taikoma taisyklė: Užrašą nusako atributo value reikšmė.

Beje, jūs taip pat galite apibrėžti mygtukus naudodami button-elementą.

HTML ir CSS pradedantiesiems (14 dalis): Formos (2)



Šio varianto privalumas - esate labai lankstūs. Iš tikrųjų galite patys apibrėžti šių mygtukų išvaizdą ir funkcionalumą.

<button name="click" type="button" value="Nustebinti" onclick="alert('Ar Jūs tikras?');">Spauskite mane</button>



Dabartiniame pavyzdyje naudojant onclick įvykio tvarkyklę, paspaudus mygtuką, atsidaro JavaScript pranešimo langas. Mygtuko išvaizdą nustato turinys tarp pradinių ir galutinių <button> žymų. Be to, tai gali būti bet koks turinys. Taigi ne tik tekstas yra leidžiamas. Be to, čia galima įvesti img-elementą, kuris sukurtų grafinį mygtuką.