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

13 maja 2013

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.

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.

Nowe atrybuty pól wejściowych

W HTML5 wprowadzono także kilka nowych atrybutów dla pól wejściowych i elementów formularza.

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

• Specyfikacja W3C HTML5
• Obecny stan Formularzy HTML5