HTML form yra esminė žiniatinklio kūrimo dalis, leidžianti vartotojams bendrauti su svetaine ir pateikti duomenis į serverį. Form yra naudojami įvairiems tikslams, pavyzdžiui, rinkti vartotoją form, apdoroti vartotojo įvestį ir įgalinti naudotojo veiksmus svetainėje. Šiame straipsnyje išnagrinėsime atributus ir skirtingus įvesties laukų tipus, pasirinksime elementus, teksto sritis ir mygtukus, dažniausiai naudojamus HTML form.
Įvesties laukai
<input type="text">: sukuriamas teksto įvesties laukas, kuriame vartotojai gali įvesti raidinius ir skaitinius simbolius.<input type="password">: rodomas slaptažodžio įvesties laukas, kuris užmaskuoja įvestus simbolius.<input type="email">: suteikia el. pašto patvirtinimą įvesties laukams, kuriems reikalingas galiojantis el. pašto adresas.<input type="number">: apriboja įvestį tik skaitinėmis reikšmėmis.<input type="checkbox">: reiškia žymimąjį laukelį, kurį vartotojai gali pasirinkti arba panaikinti.<input type="radio">: reiškia radijo mygtuką, leidžiantį vartotojams pasirinkti vieną parinktį iš parinkčių grupės.<input type="file">: leidžia vartotojams pasirinkti ir įkelti failus.<input type="submit">: rodomas mygtukas, kuris pateikia form spustelėjus.<input type="reset">: rodomas mygtukas, kuris atkuria form pradinę būseną.<input type="date">: suteikia datos parinkiklį datoms pasirinkti.<input type="time">: leidžia vartotojams įvesti laiko reikšmes.
Pasirinkite Elementai
<select>: sukuriamas išskleidžiamasis meniu su pasirenkamomis parinktimis.<option>: apibrėžia parinktį išskleidžiamajame meniu, įtrauktame į žymą<select>.<optgroup>: sugrupuoja susijusias parinktis išskleidžiamajame meniu.<select multiple>: leidžia vartotojams vienu metu pasirinkti kelias parinktis, spustelėdami laikant nuspaudę klavišą Ctrl(arba Command klavišą, jei naudojate Mac).
Teksto sritys
<textarea>: sukuriamas kelių eilučių teksto įvesties laukas, kuriame vartotojai gali įvesti ir redaguoti ilgesnius teksto blokus. Jo dydį galima keisti ir sukonfigūruoti naudojant tokius atributus kaip rows ir cols nustatyti jo matmenis.
Mygtukai
<button>: reiškia mygtuką, kuris gali suaktyvinti įvairius veiksmus form. Jis gali būti naudojamas norint pateikti form, pagal form „JavaScript“ funkciją arba pereiti į kitą puslapį.
Naudojimo pavyzdys:
<form action="/submit-form" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<label for="message">Message:</label>
<textarea id="message" name="message" rows="4" cols="50"></textarea>
<label for="newsletter">Subscribe to Newsletter:</label>
<input type="checkbox" id="newsletter" name="newsletter">
<label for="color">Favorite Color:</label>
<select id="color" name="color">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
</select>
<button type="submit">Submit</button>
</form>
form Šiame pavyzdyje parodytas įvairių elementų, įskaitant input laukus, textarea, checkbox, select dropdown ir mygtukas, naudojimas submit. Nesivaržykite tinkinti form elementus ir atributus pagal savo konkrečius reikalavimus.