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.1

Czwarty artykuł dotyczący HTML5. Tym razem omówimy nowości z zakresu tworzenia formularzy. W tym temacie na prawdę dokonał się spory postęp, dlatego kurs został podzielony na dwie części. W pierwszej odsłonie przedstawię nowe elementy, które możemy dodać do formularzy oraz atrybuty znaczników 'form' i 'input'.

Zacznijmy od nowych elementów:

  • <datalist>

    Pokazuje nam rozwijaną listę(forma podpowiadacza) podczas wpisywania tekstu do pola. Wpierw musimy określić listę tych elementów do wyświetlania, umieszczając je w znaczniku

    <datalist> za pomocą <option value="wartość">. Jeśli chcemy, aby ta lista pojawiła się przy danym polu, dodajemy do niej atrybut "list" o wartości równej "id" nadanemu dla <datalist>. Przykład powinien wyjaśnić wszelkie wątpliwości.

    Przykład:

    źródło:
    <input list="uzytkownicy">
    <datalist id="uzytkownicy">
      <option value="Jan">
      <option value="Janusz">
      <option value="Zbigniew">
      <option value="Olek">
      <option value="Maciek">
    </datalist>
    

  • <keygen>

    Służy do szyfrowania danych, przesłanych w formularzu. Przykładowy kod:

    <form action="action.php" method="get">
    Użytkownika: <input type="text" name="uzytkownik">
    Zabezpieczenie: <keygen name="zabezpieczenie">
    <input type="submit">
    </form>
    
    W miejscu <keygen name="zabezpieczenie"> wyświetli się rozwijalna lista dwóch typów szyfrowania. W wyniku formularza zwrócone zostaną dwie wartości: 'uzytkownik' (w zależności o 'name' naszego pola) z oryginalną nazwą użytkownika oraz 'security' z zaszyfrowaną nazwą.

  • <output>

    Ten znacznik służy do wyświetlania wyniku obliczeń
    przykład użycia:

    + =
    źródło:
    <form oninput="wynik.value=parseInt(liczba1.value)+parseInt(liczba2.value)">
    <input type="number" id="liczba1" value="2"> +
    <input type="number" id="liczba2" value="2">=
    <output name="wynik" for="liczba1 liczba2"></output>
    </form>
    

Teraz lista dwóch nowych atrybutów wraz z przykładami dla znacznika 'form'.

  • autocomplete

    Dzięki temu atrybutowi wartości pól w formularzu zostaną po naszym powrocie do niego, przewróconego do ostatniej wartości.
    przykład:
    uzupełnij poniższe dwa pola i kliknij przycisk, a następnie powróć do tej strony. Nie będzie potrzeby uzupełniać pól ponownie.

    Imię:
    Nazwisko:
    źródło:
    <form action="http://devboard.pl" autocomplete="on">
      Imię: <input type="text" name="imie"><br>
      Nazwisko: <input type="text" name="nazwisko"><br>
      <input type="submit">
    </form>
    

  • novalidate

    Ten atrybut odpowiada za wyłączenie sprawdzacza poprawności wpisanego tekstu w polu. Dla przykładu stworzę na formularze z polami e-mail, jeden z włączoną opcją novalidate, które bez niej.
    przykład: bez novalidate (wpisz coś w pole, co nie jest adresem email i kliknij przycisk)

    E-mail:
    spróbuj to samo teraz:
    E-mail:
    źródło przykładu 1.:
    <form action="#">
    E-mail: <input type="email" name="email">
    <input type="submit">
    </form>
    
    źródło przykładu 2.:
    <form action="#" novalidate>
    E-mail: <input type="email" name="email">
    <input type="submit">
    </form>
    

I trzecia lista nowości z zakresu atrybutów dla znacznika 'input'.

  • autofocus

    Po dodaniu tego atrybutu do pola będzie on domyślnie podświetlony po załadowaniu strony.

    Imię(włączony autofocus):
    Nazwisko:
    źródło:
    <form action="#">
      Imię(włączony autofocus):<input type="text" name="imie" autofocus><br>
      Nazwisko: <input type="text" name="nazwisko"><br>
      <input type="submit">
    </form>
    

  • form

    Umożliwia przyporządkowanie danego pola do formularza, poza którym się znajduje. Dla naszego formularza dajemy 'id' i wartość tego id musi być równa wartości atrybutu form dla input. Przykład powinien to lepiej wytłumczyć.
    przykład:
    (widzimy, że pole Hasło znajduje się poza 'form')

    Nazwa użytkownika:
    Hasło:
    <form action="#">
      Nazwa użytkownika: <input type="text" name="imie" id="formularz"><br>
      <input type="submit">
    </form>
    Hasło: <input type="text" name="nazwisko" form="formularz">
    

  • formaction

    Nadpisuje akcję, która została określona przy 'form'.

    <form action="#">
      Imię(włączony autofocus):<input type="text" name="imie"><br>
      Nazwisko :<input type="text" name="nazwisko"><br>
      <input type="submit" formaction="kod.php">
    </form>
    

  • formenctype (wyłącznie na input'ów o typach 'submit' oraz 'image')

    Nadpisuje typ określony przy 'form'.

    <form action="#" formenctype="text/plain">
      Imię(włączony autofocus):<input type="text" name="imie"><br>
      Nazwisko :<input type="text" name="nazwisko"><br>
      <input type="submit" formenctype="multipart/form-data">
    </form>
    

  • formmethod (wyłącznie na input'ów o typach 'submit' oraz 'image')

    Nadpisuje metodę określoną w 'form'.

    <form action="#" method="get">
      Imię(włączony autofocus):<input type="text" name="imie"><br>
      Nazwisko :<input type="text" name="nazwisko"><br>
      <input type="submit" formmethod="post">
    </form>
    

  • formnovalidate (wyłącznie na input'cie o typie 'submit')

    Nadpisuje atrybut ';novalidate' z elementu form
    przykład:
    (wprowadź nieprawidłowy email, następnie przyciśnij pierwszy przycisk i drugi, a zobaczysz różnicę)

    E-mail:

  • formtarget

    Określa, gdzie ma zostać wykonany formularz. Nadpisuje to, co jest przy elemencie form. Najczęstsze wartości to "_blank"("nowe okno") i "_target"(nowe okno)

    E-mail:
    Hasło:
    <form action="#">
      E-mail: <input type="text" name="fname"><br>
      Hasło: <input type="text" name="lname"><br>
      <input type="submit" value="Zaloguj">
      <input type="submit" formtarget="_blank"
      value=Zaloguj w nowym oknie">
    </form>
    

  • height and width (wyłącznie na input'cie o typie 'image')

    Oczywiste chyba - określa wymiary przycisku
    przykład:

    źródło:

    <input type="image" src="obrazek.png" alt="Wyślij" width="48" height="48">
    
  • list

    Jako atrybut do przycisków input, jest pomocnikiem przy znaczniku 'datalist'. Wartość atrybutu 'list' musi być równa 'id' znacznika 'datalist'.
    przykład:

    <input list="uzytkownicy">
    <datalist id="uzytkownicy">
      <option value="Jan">
      <option value="Janusz">
      <option value="Zbigniew">
      <option value="Olek">
      <option value="Maciek">
    </datalist>
    

  • min and max

    Określa minimalną i maksymalną wartość danego pola.
    przykład:

    źródło:

    <input type="range" name="zakres" min="10" max="20">
    

  • multiple

  • pattern

    Za pomocą wyrażenia regularnego możemy określić jakie wartości możemy wpisać oraz ile znaków może mieć dana wartość.
    przykład:
    (spróbuj wprowadzić coś innego niż 11 cyfrowy numer PESEL)

    Pesel:
    źródło:
    <form action="#">
    Pesel: <input type="text" name="pesel" pattern="[0-9]{11}" title="Podaj 11 cyfrowy pesel">
      <input type="submit">
    </form>
    
  • placeholder

    Pokazuje nam w polu napis, przed określeniem przez Nas jego wartości.
    przykład:

    źródło:

    <input type="text" name="nazwa" placeholder="Podaj swoją nazwę użytkownika">
    
  • required

    Za pomocą tego atrybutu możemy określić czy dane pole ma być wymagane.
    przykład:
    (jedynie adres zamieszkania jest wymagany - sprawdź to!)

    Imię:
    Adres zamieszkania:
    źródło:
    <form action="#">
    Imię: <input type="text" name="imie"> <br/>
    Adres zamieszkania: <input type="text" name="adres" required>
      <input type="submit">
    </form>
    
  • step

    Wartość tego atrybutu określa co ile możemy zmienić wartość. Dla przykładu jeżeli step="10" to wartości pola mogą wynosić (-10,0,10,20,30).
    przykład:

    <input type="number" name="liczba" step="10">
    

To byłoby na tyle. Sporo i tak nowości jak na jeden dzień. W następnym kursie pokażę nowe typy dla pól w formularzach!