Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Dowiedz się więcej Rozumiem

Kurs HTML5 - formularze cz. 2

W drugiej części kursu dotyczącego formularzy tworzonych w HTML5 przedstawię nowe typy dla naszych pól. Nowości jest aż 13, więc jest sporo do zapamiętania! Zaczynamy!

  • email

    Oczywiste, że pole to służy do wpisania adresu e-mail
    przykład:
    Newsletter:
    źródło:

    Newsletter: <input type="email" name="email">
    

  • month

    Pozwala nam określić miesiąc oraz rok (np.: data urodzin)
    przykład:
    Miesiąc i rok:
    źródło:

    Miesiąc i rok: <input type="month" name="miesiacirok">
    

  • range

    Wyświetla suwak, dzięki któremu możemy określić w łatwy sposób wartość.
    dozwolone atrybuty:

    • max - określa maksymalną wartość
    • min - określa wartość minimalną
    • step - określa co ile wartość suwaka ma się przesuwać
    • value - definiuje wartość domyślną
    przykład:
    Whatever 1-10
    źródło:
    Whatever 1-10 <input type="range" name="whatever" min="1" max="10">
    

  • number

    Określa pole na liczbę, wyświetlając w prawej części strzałki góra/dół do zmiany wartości.
    dozwolone atrybuty:

    • max - określa maksymalną wartość
    • min - określa wartość minimalną
    • step - określa co ile wartość suwaka ma się przesuwać
    • value - definiuje wartość domyślną
    przykład:
    Ocena 1-5:
    źródło:
    Ocena 1-5: <input type="number" name="ocena" min="1" max="5">
    

  • color

    Określa pole na wartość koloru. Po kliknięciu pojawia nam się paleta kolorów z wyborem.
    przykład:
    Kolor tła:
    źródło:

    Kolor tła: <input type="color" name="tlo">
    

  • date

    Określa pole na datę. Ułatwiając nam życie wyświetlanym kalendarzykiem.
    przykład:
    Wydarzenie odbędzie się:
    źródło:

    
    Wydarzenie odbędzie się: <input type="date" name="datwydarzenia">
    

  • datetime

    Pole na datę oraz czas wraz ze strefą czasową.
    Whatever:
    źródło:

    Whatever: <input type="datetime" name="whatever">
    

  • datetime-local

    Pole na datę oraz czas bez strefy czasowej.
    Podaj datę i godzinę:
    źródło:

    Podaj datę i godzinę: <input type="datetime-local" name="dataigodzina">
    

  • search

    Pole na wpisanie frazy do wyszukiwarki.
    przykład:
    Wyszukaj:
    źródło:

    Wyszukaj: <input type="search" name="szukaj">
    

  • tel

    Pole służące do wpisania numeru telefonu.
    przykład:
    Twój telefon:
    źródło:

    Twój telefon: <input type="tel" name="numer">
    

  • time

    Pole służące do określenia czasu. Dodatkowo wyświetlane oczywiście pomocnicze strzałeczki góra/dół.
    przykład:
    Godzina publikacja:
    źródło:

    Godzina publikacja: <input type="time" name="publikacja">
    

  • url

    Pole służące do wprowadzenia adresu URL. Pole będzie automatyczne sprawdzane pod kątem poprawności.
    przykład:
    Strona WWW:
    źródło:

    Strona WWW: <input type="url" name="www">
    

  • week

    Określa pole dla tygodnia oraz roku. Ułatwia nam życie kalendarzem.
    przykład:
    Tydzień:
    źródło:

    Tydzień: <input type="week" name="tydzien">
    

Jak widzimy niektóre z nich są bardziej przydatne, niektóre mniej. Należy wziąć również pod uwagę, że nie są one poprawnie wyświetlane we wszystkich przeglądarkach! Kolejny kurs już wkrótce na łamach devboard.pl!