Zadanie 3 - formularze + elementy HTML 5

Struktura formularza (podstawowa)
<form action="plik2.php" method="post"> pole typu input: <input type="text" name="pole_typ1" value="napis"> pole typu password: <input type="password" name="pole_typ2"> pole typu text: <textarea name="pole_typ3" rows="3" cols="5"></textarea> pole typu checkbox: <input type="checkbox" name="pole_typ4a"> <input type="checkbox" name="pole_typ4b"> pole typu radio: <input type="radio" name="pole_typ5a"> <input type="radio" name="pole_typ5a"> <select name="pole_typ6"> <option value="1">pole 1</option> <option value="2">pole 2</option> <option value="3">pole 3</option> </select> <input type="reset" value="Wyczyść"> <input type="submit" value="Wyślij"> </form>
 
Postać wynikowa (dodane łamanie linii):

---

pole typu input:
 
pole typu password:
 
pole typu text:
 
pole typu checkbox:
 
pole typu radio:
 
pole 1 pole 2 pole 3
 

Rozbudowa formularza o elementy HTML5

---

Rozbudowana definicja rodzaju pola wejściowego.
<form method="post"> adres: e-mail: <input type="email" name="eml"> <input type="submit" value="OK"> </form>

adres: e-mail:

Inne rodzaje pól do zostosowania w elementach typu: input (działanie w wybranych przeglądarkach)
type="color"
type="date"
type="datetime"
type="datetime-local"
type="email"
type="month"
type="number"
type="range"
type="search"
type="tel"
type="time"
type="url"
type="week"

sposoby użycia poszczególnych typów powyższych elementów: w3schools
 
Inne przydatne atrybuty dla pol formularza (HTML5)

---

aktywne pole formularza po załadowaniu strony:
<form> pierwsze pole:<input type="text" name="p1"> drugie pole (domyślne):<input type="text" name="p2" autofocus="autofocus"> </form>

pierwsze pole: drugie pole (domyślne):

 
wymagane pole formularza :
<form> pierwsze pole:<input type="text" name="p1"> drugie pole (wymagane):<input type="text" name="p2" required="required"> <input type="submit" value="OK"> </form>

pierwsze pole: drugie pole (wymagane):

 
podpowiedzi w polach formularza :
<form> pierwsze pole:<input type="text" name="p1"> drugie pole (podpowiedź):<input type="text" name="p2" placeholder="wpisz coś"> <input type="submit" value="OK"> </form>

pierwsze pole: drugie pole (podpowiedź):