HTML Forms
→ Používajú sa na zbieranie dát od užívateľa na stránke
Prvok <form>
→ Definuje dotazník pre vstupy užívateľa
//index.html
<form>.
form elementy
.
<form>
Prvok <input>
→ Je najviac používaný prvok dotazníka
→ <input> môže byť zobrazený vo viacerých variantách, záleží na jeho atribútoch
| Typ | Vysvetlenie |
|---|---|
| <input type="text"> | jednoriadkové textové pole |
| <input type="radio"> | definuje radio button |
| <input type="text"> | definuje checkbox |
| <input type="text"> | definuje tlačítko odoslania |
| <input type="text"> | definuje tlačítko |
Prvok <label>
→ definuje nadpis pre daný input
→ obsahuje atribút for="" a hodnotou pre tento atribút je id daného inputu
//index.html
<form><label for="meno">Meno a priezvisko:</label> <br>
<input type="text" id="meno">
</form>
//output
Radio buttons
→ <input type="radio"> definuje radio button.
→ pri radio buttons si užívateľ môže vybrať len jednu možnosť
//index.html
<p>Vyber si obľúbený programovací jazyk:</p><form>
<input type="radio" id="html" name="fav_language" value="HTML">
<label for="html">HTML</label>
<input type="radio" id="css" name="fav_language" value="CSS">
<label for="css">CSS</label>
<input type="radio" id="javascript" name="fav_language" value="JavaScript">
<label for="javascript">JavaScript</label>
</form>
//output
Vyber si obľúbený programovací jazyk:
Checkbox
→ <input type="checkbox"> definuje checkbox
→ užívateľ nie je obmedzený počtom výberov
//index.html
<p>Vyber si obľúbený programovací jazyk:</p><form>
<input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
<label for="vehicle1">HTML</label>
<input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
<label for="vehicle2">CSS</label>
<input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
<label for="vehicle3">JS</label>
</form>
//output
Vyber si obľúbený programovací jazyk:
Submit tlačítko
→ <input type="submit"> definuje submit tlačítko
→ odosiela zadané údaje na server alebo inú stránku
//index.html
<form action="/source/action_page.php" method="get"><label for="fname">First name:</label>
<input type="text" id="fname" name="fname" value="John">
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname" value="Doe">
<input type="submit" value="Submit">
</form>
//output
//výsledok po odoslaní
