Repozytorium Web Developera

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.

        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

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>