Tworzenie oszałamiających formularzy przy użyciu nowych elementów HTML5
Formularz HTML — wprowadzenie
Dla wielu osób formularz HTML to nic ekscytującego, ale w HTML5 wprowadzono kilka znaczących ulepszeń zarówno dla programistów tworzących formularze, jak i użytkowników, którzy je wypełniają.
Nowe elementy formularza HTML, atrybuty, typy pól, walidacja w przeglądarkach, techniki formatowania CSS3 oraz obiekt FormData
sprawiają, że praca z formularzami jest łatwiejsza i miejmy nadzieję, że bardziej przyjemna.
Obsługa nowych pól formularzy HTML5 przez przeglądarki
W chwili pisania tego tekstu każda przeglądarka inaczej obsługuje nowe elementy formularzy i typy pól wejściowych oraz atrybuty. Nawet w przeglądarkach, które obsługują daną funkcję, może ona inaczej działać w każdej z nich. Chociaż trzeba podkreślić, że stan obsługi formularzy HTML5 zmienia się bardzo szybko i ciągle się poprawia. W chwili pisania tego tekstu te tabele zawierały najbardziej aktualne informacje dotyczące stanu obsługi formularzy HTML5 przez przeglądarki.
Formularz HTML — przegląd nowości HTML5
Nowe elementy
W HTML5 formularz HTML może zawierać 5 nowych elementów dotyczących wprowadzania danych i formularzy.
Element | Cel | Uwagi |
---|---|---|
progress | Pokazuje stopień wykonania zadania | Element progress może pokazywać np. postęp przesyłania pliku |
meter | Reprezentuje wartość skalarną z określonego przedziału | Element meter może być użyty, aby pokazać na przykład temperaturę lub wagę czegoś |
datalist | Reprezentuje zestaw elementów option, które można stosować w połączeniu z nowym atrybutem list pól wejściowych do tworzenia menu rozwijanych | Kiedy pole wejściowe z dołączoną listą danych zostanie aktywowane, pojawia się rozwijane menu zawierające wartości z datalist
|
keygen | Kontrolka do generowania par kluczy kryptograficznych | Po wysłaniu formularza klucz prywatny będzie przechowywany w lokalnym magazynie kluczy, a klucz publiczny jest wysyłany do serwera |
output | Wyświetla wyniki obliczeń | Przykładowym zastosowaniem elementu output może być wyświetlanie sumy wartości dwóch elementów wejściowych |
Formularz HTML — nowe typy pól wejściowych
W HTML5 wprowadzono 13 nowych typów pól wejściowych. Jeśli przeglądarka ich nie obsługuje, elementy te są wyświetlane jak pola tekstowe.
Typ wejściowy | Przeznaczenie | Uwagi |
---|---|---|
tel | Do wprowadzania numeru telefonu | tel nie wymusza żadnej konkretnej składni, a więc jeżeli chcesz zastosować określony format, możesz użyć atrybutu pattern lub metody setCustomValidity() , aby zdefiniować reguły weryfikacji |
search | Aby wyświetlać sugerowane słowa kluczowe w polu wyszukiwania | Elementy typu search i text różni przede wszystkim styl. Pole typu search może zostać wyświetlone w takim samym stylu, jak inne pola wyszukiwania na danej platformie |
url | Do wprowadzania adresu URL | Atrybut url jest przeznaczony do wprowadzania pojedynczego, bezwzględnego adresu URL, który reprezentuje dosyć szeroki zakres wartości. |
Do wprowadzania albo pojedynczego adresu albo listy adresów mailowych | Jeśli zdefiniowany jest atrybut multiple, wówczas można wpisać kilka adresów e-mail rozdzielanych przecinkami. | |
datetime | Do wprowadzania daty i godziny z ustawioną strefą czasową UTC | |
date | Do wprowadzania daty bez strefy czasowej | |
month | Do wprowadzania daty określającej rok i miesiąc, ale bez strefy czasowej | |
week | Do wprowadzania daty, która składa się z tygodnia i roku oraz numeru tygodnia, bez strefy czasowej | Przykładem tego formatu jest data 2011-W05 dla piątego tygodnia 2011 roku |
time | Do wprowadzenia wartości czasu z godziną, minutą, sekundami oraz ułamkami sekund, bez strefy czasowej. | |
datetime-local | Do wprowadzania daty i czasu bez strefy czasowej | |
number | Do wprowadzania liczb | Prawidłowymi wartościami są liczby zmiennoprzecinkowe |
range | Do wprowadzania danych liczbowych, ale w przeciwieństwie do number ich faktyczna wartość nie jest istotna |
Wynikiem implementacji kontrolki zakresu w większości przeglądarek jest suwak |
color | Do wyboru koloru poprzez kontrolkę wyboru koloru | Wartością musi być napisana małymi literami wartość szesnastkowa, np. #ffffff |
Nowe atrybuty pól wejściowych
W HTML5 wprowadzono także kilka nowych atrybutów dla pól wejściowych i elementów formularza.
Atrybut | Cel | Uwagi |
---|---|---|
autofocus | Uaktywnia element, aby był gotowy do wprowadzania danych w czasie ładowania strony | Atrybut autofocus może być stosowany do pól wejściowych, pól wyboru, pól tekstowych oraz przycisków. |
placeholder | Podpowiada użytkownikowi, jakiego rodzaju dane powinien wprowadzić. | Dopóki element nie zostanie uaktywniony i użytkownik nie wpisze tekstu, wyświetlany jest jasny tekst zastępczy. Może on być określony w polu wejściowym i tekstowym. |
form | Określa jeden lub więcej formularzy, do których należy element wejściowy | Dzięki atrybutowi form elementy formularza można umieszczać w dowolnym miejscu na stronie, a nie tylko w elemencie formularza. Ponadto każdy element wejściowy może być powiązany z więcej niż jednym formularzem |
required | Atrybut logiczny oznaczający, że element jest wymagany | Atrybut required jest pomocny przy sprawdzaniu formularzy w przeglądarkach bez użycia JavaScriptu |
autocomplete | Do zaznaczania, że pole nie powinno być automatycznie uzupełniane albo być wstępnie wypełniane przez przeglądarki przy użyciu ostatnich wpisów użytkownika | Atrybut autocomplete można używać w polach takich jak numer karty kredytowej lub hasło jednorazowe, które nie powinny być automatycznie uzupełniane. Domyślnie jest włączony. Aby go wyłączyć, należy nadać mu wartość off |
pattern | Do sprawdzania wartości elementu przy użyciu wyrażenia regularnego | Korzystając z atrybutu pattern powinno się także zdefiniować atrybut title , w którym należy wpisać instrukcje dotyczące sposobu wypełnienia pola |
dirname | Do wysyłania informacji o kierunku tekstu w kontrolce | Na przykład, gdy użytkownik wpisał tekst od prawej i element ma atrybut dirname , to informacja o kierunku tekstu zostanie wysłana wraz z tym tekstem |
novalidate | Do blokowania sprawdzania poprawności danych w elemencie wysyłanego formularza | |
formaction | Przesłania ustawienie atrybutu action elementu formularza |
Atrybut dotyczy elementów input i button |
formenctype | Przesłania ustawienie atrybutu enctype elementu formularza |
Atrybut dotyczy elementów input i button |
formmethod | Przesłania ustawienie atrybutu method elementu formularza | Atrybut dotyczy elementów input i button |
formnovalidate | Przesłania ustawienie atrybutu novalidate elementu formularza |
Atrybut dotyczy elementów input i button |
formtarget | Przesłania ustawienie atrybutu target elementu formularza |
Atrybut dotyczy elementów input i button |
Obiekt FormData
Jednym z ulepszeń API XMLHttpRequest
jest dodanie obiektu FormData
.
Przy jego użyciu można tworzyć i wysłać pary klucz-wartość i ewentualnie pliki. Dane wysyłane tą metodą są przesyłane w takim samym formacie, jak przy użyciu metody submit()
formularza z kodowaniem multipart/form-data
.
Obiekt FormData
umożliwia tworzenie formularzy HTML na bieżąco przy użyciu JavaScriptu i zatwierdzanie ich za pomocą metody XMLHttpRequest.send()
. Oto prosty przykład:
var formData = new FormData(); formData.append("part_num", "123ABC"); formData.append("part_price", 7.95); formData.append("part_image", jakisplik) var xhr = new XMLHttpRequest(); xhr.open("POST", "http://jakis.url/"); xhr.send(formData);
Za pomocą obiektu FormData
można też dodać dane do istniejącego formularza przez jego wysłaniem.
var formElement = document.getElementById("jakisElementFormularza"); var formData = new FormData(formElement); formData.append("part_description", "Najlepsza część na świecie!"); var xhr = new XMLHttpRequest(); xhr.open("POST", "http://jakis.url/"); xhr.send(formData);
Sprawdzanie danych formularzy w przeglądarkach
Bądźmy szczerzy. Sprawdzanie poprawności danych z formularza jest dość nudnym zajęciem, ale trzeba to robić. Aktualnie formularz HTML po stronie klienta sprawdza się przy użyciu własnych skryptów JavaScript albo jakiejś biblioteki sprawdzającej poprawność danych wejściowych oraz to czy w ogóle zostały wpisane.
Jednak nowe atrybuty elementów formularza required
i pattern
w połączeniu z selektorami pseudoklas CSS sprawiają, że sprawdzanie formularzy i wyświetlanie informacji zwrotnych użytkownikowi jest łatwiejsze niż kiedyś. Istnieją także inne, zaawansowane techniki walidacji, polegające na tworzeniu własnych reguł weryfikacji danych i powiadomień o błędach.
Atrybut required
Jeżeli element ma zdefiniowany atrybut required
, oznacza to że musi być wypełniony, aby można była zatwierdzić formularz. Poniżej znajduje się przykład pola na adres e-mail, które musi zostać wypełnione poprawnie zbudowanym adresem e-mail:
<input type="email" id="email_addr" name="email_addr" required />
Atrybut pattern
Atrybut pattern
określa wyrażenie regularne służące do sprawdzania poprawności danych w polu wejściowym. Poniżej przedstawione jest przykładowe wymagane pole, w którym należy wpisać numer części. Numer ten powinien składać się z trzech wielkich liter i czterech cyfr.
Przy użyciu atrybutów required
i pattern
można utworzyć regułę nakazującą wypełnienie pola wartość odpowiadającą określonemu wzorcowi. Gdy użytkownik najedzie kursorem na to pole, zostanie wyświetlona chmurka z informacją o wymaganym formacie numeru części.
<input type="text" id="part" name="part" required pattern="[A-Z]{3}[0-9]{4}" title="Numery części składają się z 3 wielkich liter i 4 cyfr"/>
Bazując na poprzednim przykładzie, można również zastosować czerwony obrys pola, gdy zostanie wprowadzona nieprawidłowa wartość.
:invalid { border: 2px solid #ff0000; }
Atrybut formnovalidate
Atrybut formnovalidate
może być stosowany do elementów input i button. Jeśli jest zdefiniowany, dane nie są sprawdzane podczas wysyłania formularza. Oto przykład, w którym przesłanie formularza za pomocą przycisku Wyślij wymaga poprawnego wypełnienia pól, a za pomocą przycisku Zapisz — nie.
<input type="text" id="part" name="part" required pattern="[A-Z]{3}[0-9]{4}" title="Numery części składają się z 3 wielkich liter i 4 cyfr"/> <input type="submit" formnovalidate value="Zapisz"> <input type="submit" value="Wyślij">
API ograniczania weryfikacji danych
API ograniczania weryfikacji danych (ang. constraint validation API) to wszechstronne narzędzie do weryfikacji danych na różne sposoby. Przy jego użyciu można definiować własne błędy, weryfikować poprawność elementów oraz ustalać przyczyny niepoprawności elementów. Oto przykład, w którym wyświetlany jest zdefiniowany przez programistę błąd, jeśli wartości w dwóch polach nie są ze sobą zgodne.
<label>E-mail:</label> <input type="email" id="email_addr" name="email_addr"> <label>Wpisz powtórnie adres e-mail:</label> <input type="email" id="email_addr_repeat" name="email_addr_repeat" oninput="check(this)"> <script> function check(input) { if (input.value != document.getElementById('email_addr').value) { input.setCustomValidity('Adresy w obu polach muszą być takie same.'); } else { // Wprowadzone dane są poprawne -- zresetowanie wiadomości o błędzie input.setCustomValidity(''); } } </script>
Podsumowanie
Oto formularz HTML z żądaniem rezerwacji zawierający różne typy pól wejściowych, technikę weryfikacji danych oraz style CSS.

Przykładowy formularz HTML5
Kod HTML i JavaScript
<form oninput="total.value = (nights.valueAsNumber * 99) + ((guests.valueAsNumber - 1) * 10)"> <label>Imię i nazwisko:</label> <input type="text" id="full_name" name="full_name" placeholder="Jan Kowalski" required> <label>Adres e-mail:</label> <input type="email" id="email_addr" name="email_addr" required> <label>Powtórnie wpisz adres e-mail:</label> <input type="email" id="email_addr_repeat" name="email_addr_repeat" required oninput="check(this)"> <label>Data przybycia:</label> <input type="date" id="arrival_dt" name="arrival_dt" required> <label>Liczba dni (pokój kosztuje 99,00 PLN za noc):</label> <input type="number" id="nights" name="nights" value="1" min="1" max="30" required> <label>Liczba osób (każda dodatkowa osoba kosztuje 10,00 PLN za dzień):</label> <input type="number" id="guests" name="guests" value="1" min="1" max="4" required> <label>Suma:</label> <output id="total" name="total">99</output>,00 <br><br> <label>Kod promocyjny:</label> <input type="text" id="promo" name="promo" pattern="[A-Za-z0-9]{6}" title="Kody promocyjne składają się z sześciu cyfr i liter."> <input type="submit" value="Rezerwuj" /> </form> <script> function check(input) { if (input.value != document.getElementById('email_addr').value) { input.setCustomValidity('Adresy e-mail w obu polach muszą być takie same'); } else { // Wprowadzone dane są poprawne -- zresetowanie wiadomości o błędzie input.setCustomValidity(''); } } </script>
Kod CSS
:invalid { border-color: #e88; -webkit-box-shadow: 0 0 5px rgba(255, 0, 0, .8); -moz-box-shadow: 0 0 5px rbba(255, 0, 0, .8); -o-box-shadow: 0 0 5px rbba(255, 0, 0, .8); -ms-box-shadow: 0 0 5px rbba(255, 0, 0, .8); box-shadow:0 0 5px rgba(255, 0, 0, .8); } :required { border-color: #88a; -webkit-box-shadow: 0 0 5px rgba(0, 0, 255, .5); -moz-box-shadow: 0 0 5px rgba(0, 0, 255, .5); -o-box-shadow: 0 0 5px rgba(0, 0, 255, .5); -ms-box-shadow: 0 0 5px rgba(0, 0, 255, .5); box-shadow: 0 0 5px rgba(0, 0, 255, .5); } form { width:300px; margin: 20px auto; } input { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; border:1px solid #ccc; font-size:20px; width:300px; min-height:30px; display:block; margin-bottom:15px; margin-top:5px; outline: none; -webkit-border-radius:5px; -moz-border-radius:5px; -o-border-radius:5px; -ms-border-radius:5px; border-radius:5px; } input[type=submit] { background:none; padding:10px; }
Źródła
Autor: Jan Kleinert
Źródło: http://www.html5rocks.com/en/tutorials/forms/html5forms/
Tłumaczenie: Monika Wilusz
Treść tej strony jest dostępna na zasadach licencji CC BY-NC 2.0 UK
18 czerwca 2020
Witam, w momencie kiedy klikamy zarezerwuj, chciałbym żeby wiadomość o rezerwacji przychodziła mi na maila. Jak to zrobić?
Z góry dziekuję za odpowiedź!