Wojtek K. Hildebrandt

Formularze w dobrej formie cz. II – HTML 5

To kolejna część cyklu Formularze w dobrej formie. Wiemy już, z czym je się formularze w XHTML. Potrafimy je nawet obsłużyć ciekawie za pomocą AJAXa z wykorzystaniem jQuery. Ale przecież mamy też HTML 5! A ten w sprawie formularzy wniósł kilka ważnych nowości. Jakich? Zapraszam.

Co należy wiedzieć o HTML 5, żeby dobrze zrozumieć ten wpis i showcase? Wystarczą podstawy:

  • uproszczono nam życie zmieniając doctype (ten mogę napisać nawet z pamięci) 
    <!DOCTYPE html>
  • type=”text/javascript” i type=”text/css” stały się wartościami domyślnymi w elementach, odpowiednio script i style – więc nie trzeba ich już wpisywać
  • nie musimy zamykać pustych elementów (ale możemy, i ja zamierzam się tego trzymać, dopóki ktoś nie poda mi przeciwwskazań)
  • atrybuty, które w poprzednim wpisie nazywałem logicznymi – czyli takie, które mogą przyjmować tylko jedną wartość, nie muszą już jej przyjmować

Tyle krótkiego spisu nowości ważnych przed zabraniem się za formularze. Jakie zmiany dotknęły samych formularzy?

Nowe typy pola input

Już wcześniej input miał kilka ciekawych typów. Teraz dochodzi do tego kolejna spora paczka.

  • email – na wpisanie adresu email, sprawdza format
  • url – na wpisanie adresu URL, sprawdza format – choć nie musi być to http(s)://, Opera dodaje na początku http://, jeśli go nie było
  • number – wybór liczby za pomocą tzw. spinboxu, czyli okienka z przyciskami góra-dół. Przyjmuje dodatkowe parametry:
    • min – wartość minimalna
    • max – wartość maksymalna
    • step – krok, o jaki przeskakuje wartość za pomocą spinboxu
  • range – wybór liczby za pomocą suwaka. Przyjmuje parametry jak number, a pozbawiony tych parametrów tworzy suwak o zakresie 0-100 ze skokiem 1
  • date – wybór daty – prezentuje widget z kalendarzem do wskazania daty
  • datetime, datetime-local, month, week, time są dokładnie tym, co sugerują nazwy – pozwalają na wybór czasów, miesiąca, tygodnia za pomocą widgetu, ale działają dobrze tylko w Operze, jako tako w Safari
  • color – w obsługujących go Operze i Chrome (lepiej) pozwala na wybór koloru z palety i przesyła go w formacie HEX
  • search – w Chrome,  Firefoxie i Safari do wypełnionego pola tekstowego dodaje na końcu ikonę krzyżyka, która pozwala usunąć cały wpis

Atrybuty logiczne

W HTML 5 nie musimy skrobać atrybutów checked=”checked” ani tym podobnych. Teraz wystarczy napisać samo checked. Jest to znacznie lepsze rozwiązanie, niż to stosowane w XHTML, ale ja nadal uważam, że lepsze byłoby zastosowanie do takich atrybutów wartości true i false.

<input type="radio" value="1" checked />
<input type="checkbox" value="1" disabled />
<select>
	<option value="1" selected>Jeden</option>
</select>

To samo dotyczy dwóch atrybutów, które pojawią się poniżej.

Walidacja

Do walidacji można wykorzystać logiczny atrybut required. Pozwala on oznaczyć pole, jako wymagane.
Należy pamiętać, że pola input typu email lub url akceptują tylko poprawne wpisy, ale poprawnym jest również pusty ciąg. Żeby wymusić wpisanie emaila lub urla należy dodatkowo oznaczyć te elementy jako required.
Ten atrybut można stosować zarówno w elementach input, w textarea oraz w liście rozwijanej select. Co ważne, żeby select rzeczywiście wymuszał wprowadzenie jakichś danych, musi mieć domyślnie zaznaczoną opcję z pustą wartością. Nie wystarczy nie podać wartości, należy wpisać value=””.

<select name="count" id="count" required>
	<option value="" selected>Proszę wybrać wartość</option>
	<option value="0">Zero</option>
	<option value="1">Jeden</option>
</select>

Autofocus

Jeśli mamy pole formularza, które na pewno, lub przynajmniej ze sporym prawdopodobieństwem zostanie aktywowane tuż po otwarciu strony – jak przy logowaniu lub wyszukiwaniu – możemy od razu je aktywować, dodając do niego atrybut logiczny autofocus:

<textarea autofocus></textarea>

Placeholder

Placeholder, czyli zaślepka, to feature realizowany do tej pory zwykle poprzez ustawienie domyślnej wartości pola tekstowego, a następnie ukrywania jej przy zdarzeniu focus. Nie trzeba już tak kombinować (albo raczej nie trzeba by było, gdyby nie starsze przeglądarki i IE). Wystarczy do elementu input typu text dopisać atrybut placeholder=”treść zaślepki”. Zniknie przy wpisywaniu tekstu, ale jeśli tekst zostanie wycofany a element straci focus – powróci.

<input name="q" id="q" placeholder="Wpisz zapytanie" />

Wnioski końcowe

Trzeba przyznać, że to sporo ciekawych nowości. Przydatna wydaje się zwłaszcza walidacja emaila – nie trzeba już kombinować z wyrażeniami regularnymi w JavaScript etc. Choć oczywiście nie zastępuje to w żaden sposób walidacji po stronie serwera – żeby była jasność. Co do nowych typów elementów input – dobrze, że nierozpoznawane przez przeglądarki typy są interpretowane jako text – dzięki temu użytkownik nadal ma szansę poprawnie wypełnić formularz, choć zabraknie wygody i efektowności.

Właśnie, kwestia efektowności – szkoda, że – jak zwykle – każda przeglądarka w inny sposób realizuje nowe typy, czy też walidację. Dodatkowo na nowe widgety nie mamy wpływu (lub mamy bardzo ograniczony wpływ) za pośrednictwem CSS.

Sami przekonajcie się jak to wygląda, otwierając schowcase w różnych przeglądarkach i IE, a także podglądając jego źródło. Ja zajrzałem do najświeższych: Firefoxa, Chrome’a, Opery, Safari oraz IE9. Nie ma żadnej pary, w której wyglądałoby i działało to choćby podobnie. IE9 nie oferuje tym bajerom żadnego wsparcia. Z tzw. cross-browser compatibility mamy dzień świstaka – ciągle te same problemy.

Wojtek

, ,