14. HTML forme

Čemu služi forma?

Kako izgleda forma?

<form action="/some_action_page.php">
  <label for="first_name">First name:</label><br>
  <input type="text" id="first_name" name="first_name" value="John"><br>
  <label for="last_name">Last name:</label><br>
  <input type="text" id="last_name" name="last_name" value="Doe"><br><br>
  <input type="submit" value="Send">
</form>

Isprobaj taj kod u svom editoru

Jos jedan primjer:

https://jsfiddle.net/tonkec/byfaLt5j/6/

Form element

Atributi

https://jsfiddle.net/tonkec/eco518qd/12/

Input element

type atribut

Primjer

https://jsfiddle.net/tonkec/5xtnawdp/30/

Checkbox

https://jsfiddle.net/hnm4pkjy/

Radio button

https://jsfiddle.net/tonkec/b1umgzkt/21/

Placeholder vs. value

https://jsfiddle.net/tonkec/sv5ehgxf/13/

Validacije

Sto su to validacije?

Primjer

https://jsfiddle.net/tonkec/6ehxz3d2/28/

Pattern

https://jsfiddle.net/tonkec/5jyrkwfg/9/

min/max

https://jsfiddle.net/tonkec/vbk0L9px/27/

Label

Cemu sluzi label?

Atributi

Primjer

https://jsfiddle.net/tonkec/tL4hr06y/17/

Input kao button

Primjer

https://jsfiddle.net/tonkec/he3f9u2o/22/

Button element

button vs. input type="submit"

submitting the form

Antonija pokazuje primjer

Zadatak

1. u svom index.html dokumentu napravi jedan form element

2. unutar forme dodaj dva input elementa

3. svakom input elementu dodaj label koji ce opisivati taj input

Select element

Primjer

https://jsfiddle.net/tonkec/6rpzdy90/21/

Atributi

File

Primjer

https://jsfiddle.net/tonkec/ow7Lp25b/5/

textarea

Primjer

https://jsfiddle.net/tonkec/mnLyuc6t/22/

Zadatak

1. u svom html file napravi jednu formu koja ce imati:

2. action i method attribute

Action moze bit prazan

3. jedan select element s nekoliko optionsa

4. jedan file element

5. jednu textarea

sa ili bez cols i rows

6. ako je moguce, za svaki field u formi dodaj label

7. forma mora imati button koji submita formu

8. forma mora imati button koji resetira formu

Zadaća

Pogledaj video

https://youtu.be/E5MEzC0prd4