Tworzenie oszałamiających formularzy przy użyciu nowych elementów HTML5

13 maja 2013
1 gwiadka2 gwiazdki3 gwiazdki4 gwiazdki5 gwiazdek

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.

ElementCelUwagi
progressPokazuje stopień wykonania zadaniaElement progress może pokazywać np. postęp przesyłania pliku
meterReprezentuje wartość skalarną z określonego przedziałuElement meter może być użyty, aby pokazać na przykład temperaturę lub wagę czegoś
datalistReprezentuje zestaw elementów option, które można stosować w połączeniu z nowym atrybutem list pól wejściowych do tworzenia menu rozwijanychKiedy pole wejściowe z dołączoną listą danych zostanie aktywowane, pojawia się rozwijane menu zawierające wartości z datalist
keygenKontrolka do generowania par kluczy kryptograficznychPo wysłaniu formularza klucz prywatny będzie przechowywany w lokalnym magazynie kluczy, a klucz publiczny jest wysyłany do serwera
outputWyś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ściowyPrzeznaczenieUwagi
telDo wprowadzania numeru telefonutel 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
searchAby wyświetlać sugerowane słowa kluczowe w polu wyszukiwaniaElementy 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
urlDo wprowadzania adresu URLAtrybut url jest przeznaczony do wprowadzania pojedynczego, bezwzględnego adresu URL, który reprezentuje dosyć szeroki zakres wartości.
emailDo wprowadzania albo pojedynczego adresu albo listy adresów mailowychJeśli zdefiniowany jest atrybut multiple, wówczas można wpisać kilka adresów e-mail rozdzielanych przecinkami.
datetimeDo wprowadzania daty i godziny z ustawioną strefą czasową UTC
dateDo wprowadzania daty bez strefy czasowej
monthDo wprowadzania daty określającej rok i miesiąc, ale bez strefy czasowej
weekDo wprowadzania daty, która składa się z tygodnia i roku oraz numeru tygodnia, bez strefy czasowejPrzykładem tego formatu jest data 2011-W05 dla piątego tygodnia 2011 roku
timeDo wprowadzenia wartości czasu z godziną, minutą, sekundami oraz ułamkami sekund, bez strefy czasowej.
datetime-localDo wprowadzania daty i czasu bez strefy czasowej
numberDo wprowadzania liczbPrawidłowymi wartościami są liczby zmiennoprzecinkowe
rangeDo wprowadzania danych liczbowych, ale w przeciwieństwie do number ich faktyczna wartość nie jest istotnaWynikiem implementacji kontrolki zakresu w większości przeglądarek jest suwak
colorDo wyboru koloru poprzez kontrolkę wyboru koloruWartoś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.

AtrybutCelUwagi
autofocusUaktywnia element, aby był gotowy do wprowadzania danych w czasie ładowania stronyAtrybut autofocus może być stosowany do pól wejściowych, pól wyboru, pól tekstowych oraz przycisków.
placeholderPodpowiada 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.
formOkreśla jeden lub więcej formularzy, do których należy element wejściowyDzię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
requiredAtrybut logiczny oznaczający, że element jest wymaganyAtrybut required jest pomocny przy sprawdzaniu formularzy w przeglądarkach bez użycia JavaScriptu
autocompleteDo 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żytkownikaAtrybut 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
patternDo sprawdzania wartości elementu przy użyciu wyrażenia regularnegoKorzystając z atrybutu pattern powinno się także zdefiniować atrybut title, w którym należy wpisać instrukcje dotyczące sposobu wypełnienia pola
dirnameDo wysyłania informacji o kierunku tekstu w kontrolceNa 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
novalidateDo blokowania sprawdzania poprawności danych w elemencie wysyłanego formularza
formactionPrzesłania ustawienie atrybutu action elementu formularzaAtrybut dotyczy elementów input i button
formenctypePrzesłania ustawienie atrybutu enctype elementu formularzaAtrybut dotyczy elementów input i button
formmethodPrzesłania ustawienie atrybutu method elementu formularzaAtrybut dotyczy elementów input i button
formnovalidatePrzesłania ustawienie atrybutu novalidate elementu formularzaAtrybut dotyczy elementów input i button
formtargetPrzesłania ustawienie atrybutu target elementu formularzaAtrybut 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

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 dostępna jest na zasadach licencji CC BY-NC 2.0 UK

Dyskusja

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *