Repozytorium Web Developera

Archiwum z lat 2013-2018, treści mogą być nieaktualne.

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 na input
  • 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:

5

Kontrolki 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>