Formularze
Wypełnienia dla starszych przeglądarek.
Podstawowe atrybuty
placeholder
Atrybut placeholder deklarujemy zgodnie ze wzorem:
placeholder="np. King Kong"
required
Ustanawia pole wymaganym.
required aria-required="true"
autofocus
Powoduje wybranie opatrzonej nim kontroli od razu po wczytaniu formularza.
autofocus
autocomplete
Wyłącza autouzupełnianie.
- niektóre (starsze) przeglądarki wymagają ustawienia tego atrybutu również na elemencie
form
, nie tylko nainput
- nie jest zalecane wyłączanie autouzupełniania na polach z hasłem (niektóre przeglądarki domyślnie wyłączają możliwość zablokowania autouzupełniania)
autocomplete="off"
list
Wybór w postaci rozwijanej listy.
<input id="awardWon" name="awardWon" type="text" list="awards">
<datalist id="awards">
<select>
<option value="Najlepszy film"></option>
<option value="Najlepszy reżyser"></option>
<option value="Najlepszy scenariusz"></option>
<option value="Najlepszy producent"></option>
</select>
</datalist>
Preview:
Rodzaje kontrolek HTML5
radio
button in fieldset
<form>
<fieldset id="group1">
<input type="radio" value="" name="group1">
<input type="radio" value="" name="group1">
</fieldset>
<fieldset id="group2">
<input type="radio" value="" name="group2">
<input type="radio" value="" name="group2">
<input type="radio" value="" name="group2">
</fieldset>
</form>
email
Do adresów e-mail.
<div>
<label for="email">Twój adres e-mail</label>
<input id="email" name="email" type="email" placeholder="dwight.schultz@gmail.com" required aria-required="true">
</div>
Preview:
number
Do liczb.
<div>
<label for="yearOfCrime">Rok, w którym otrzymał statuetkę</label>
<input id="yearOfCrime" name="yearOfCrime" type="number" min="1929" max="2015" required aria-required="true">
</div>
Preview:
url
Do linków.
<div>
<label for="web">Adres twojej witryny</label>
<input id="web" name="web" type="url" placeholder="www.mojawitryna.com">
</div>
Preview:
tel
Do numerów telefonu.
<div>
<label for="tel">Nr telefonu</label>
<input id="tel" name="tel" type="tel" placeholder="+48-132-456-789" autocomplete="off" required aria-required="true">
</div>
Preview:
search
Do wyszukiwarek.
<div>
<label for="search">Szukaj</label>
<input id="search" name="search" type="search" placeholder="Wyatt Earp">
</div>
Preview:
pattern
Do wyrażeń regularnych.
<div>
<label for="name">Imię i nazwisko</label>
<input id="name" name="name" pattern="([a-zA-Z]{3,30}\s*)+[a-zA-Z]{3,30}" placeholder="Dwight Schultz" required aria-required="true" >
</div>
Preview:
color
Do wyboru koloru.
<div>
<label for="color">Ulubiony kolor</label>
<input id="color" name="color" type="color">
</div>
Preview:
range
Dla suwaka.
<input id="howYouRateIt" name="howYouRateIt" type="range" min="1" max="10" value="5" />
<script>
function showValue(newValue)
{
document.getElementById("range").innerHTML=newValue;
}
</script>
<input id="howYouRateIt2" name="howYouRateIt2" type="range" min="1" max="10" value="5" onchange="showValue(this.value)" /><span id="range">5</span>
Preview:
5Kontrolki daty i godziny
date
Do wyboru daty.
<input id="date" type="date" name="date" />
Preview:
month
Do wyboru miesiąca.
<input id="month" type="month" name="month" />
Preview:
week
Do wyboru tygodnia.
<input id="week" type="week" name="week" />
Preview:
time
Do wyboru czasu w 24-godzinnym formacie.
<input id="time" type="time" name="time" />
Preview:
datatime i datatime-local
Do wyboru czasu w 24-godzinnym formacie i daty. Zwraca w postaci 2009-10-25T05:05:00Z
, gdzie Z
jest zastępowane strefą czasową (dodatnią lub ujemną). Wersja datatime-local
tej kontrolki pomija informację o strefie czasowej.
<input id="datetime2" type="datetime2" name="datetime2" />
<input id="datetime" type="datetime" name="datetime" step="14400" />
Preview:
Bootstrap
<form role="form"> <div class="form-group"> <label for="exampleInputEmail1">Email</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Podaj adres Email"> </div> <div class="form-group"> <label for="exampleInputPassword1">PHasło</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Twoje tajne hasło"> </div> <div class="form-group"> <label for="exampleInputFile">Załączanie pliku</label> <input type="file" id="exampleInputFile"> <p class="help-block">Tekst podpowiedzi</p> </div> <div class="checkbox"> <label> <input type="checkbox"> Zaznacz mnie! </label> </div> <button type="submit" class="btn btn-default">Wyślij!</button> </form>