Nie trzeba chyba nikomu tłumaczyć do czego używa się formularzy w HTML. HTML5 dodał kilka elementów do FORM jak pole data czy telefon do formularza, ale niestety część z nich kiepsko wygląda na niektórych przeglądarkach. Dlatego poniżej zamieściłem listę elementów formularza, które śmiało można użyć i nie powinno z nimi być problemu w zależności od przeglądarki. Większość nowoczesnych frameworków ułatwia tworzenie i stylowanie formularzy, ale czasami przy nieskomplikowanych formularzach wystarczyć mogą możliwości jakie daje nam sam HTML5, a nawet walidacja, którą oferuje.

Wywołanie formularza odbywa się przez FORM i przy deklaracji należy wpisać action czyli uzupełnić adres, do którego wysłane zostaną dane np. action=”example.php”. Należy przy tym zadeklarować metodę.

Istnieją dwie metody:

  • GET – wysłanie danych jako URL. Opcja domyślna, ograniczona do 3000 znaków, nie nadaje się do przesyłania danych poufnych
  • POST – wysłanie danych wewnątrz nie widoczne w adresie URL. Brak ograniczenia liczby znaków.
Lista najważniejszych elementów używane w FORM (z ich pomocą stworzysz zdecydowaną większość formularzy):

FORM – w jego wnętrzu musi zawierać się formularz

NOVALIDATE – dodanie atrybutu zablokuje domyślną walidację formularza

METHOD – metoda protokołu http GET lub POST

ACTION – adres do strony URL, pod którym przetworzony będzie formularz

FIELDSET – ramka wokół formularza

LEGEND – opis we wnętrzu ramki

LABEL – tekst w formularza (zazwyczaj występuje wielokrotnie)

TEXTAREA – dłuższe pole tekstowe

SELECT – rozwijane MENU, w nim używa się OPTION oraz OPTGROUP

INPUT type=”text” – pole do wpisania tekstu (stringa)

INPUT type=”radio” – pole wyboru (przy użyciu kilku tych pól wybrane może być tylko jedno pod warunkiem, że w polu „name” wpisana będzie ta sama nazwa)

INPUT type=”checkbox” – pole do zaznaczenia

INPUT type=”submit” – zatwierdź formularz

INPUT type=”reset” – resetuj wprowadzone daneINPUT type=”password” – pobranie hasła

INPUT type=”color” – wskazanie przez użytkownika koloru

Istnieje więcej opcji INPUT. Problem z podanymi poniżej jest jednak taki, że przeglądarki różnie te pola interpretują. Coś co ładnie może wyglądać w Chrome, w Firefoxie będzie wyglądało jak zwykłe pole tekstowe albo odwrotnie. To sprawia, że ich używanie może przysporzyć więcej kłopoty i być może będzie wymagać dodatkowych opisów w zależności od wykrytej przeglądarki. Są to następujące elementu INPUT dodane w HTML5:

INPUT type=”email” – adres e-mail

INPUT type=”tel” – numer telefonu

INPUT type=”url” – adres URL

INPUT type=”date” – pełna data

INPUT type=”month” – miesiąc

INPUT type=”week” – tydzień

INPUT type=”time” – czas

INPUT type=”number” – liczba

INPUT type=”range” – zakres

Przykładowy formularz z kilkoma spośród wyżej wymienionych elementów




Android
IOS
Windows






Kod HTML powyższego formularza:

<form action="action_page.php">
	<label>TEXT - umożliwia pobranie tekstu (stringa)</label>
	<input type="text" id="imie" name="imie"  >
	<label>PASSWORD - pole do pobrania hasła</label>
	<input type="password" id="pass" name="pass"  >
	<label>COLOR - pole wyboru koloru</label>
	<input type="color" id="pass" name="pass"  >
	<label>Wybierz system RADIO</label>
	<input type="radio" name="system" value="android" autofocus>Android
	<input type="radio" name="system" value="ios">IOS
	<input type="radio" name="system" value="windows">Windows
	Pierwsza wersja menu rozwijanego OPTION
	<select name="systemy" id="option1" >
		<option value=""></option>
		<option value="android1">Android1</option>
		<option value="ios">IOS</option>
		<option value="windows">Windows</option>
	  </select>
	Druga wersja menu rozwijanego OPTGROUP
	<select id="option2"  >
	  <optgroup label="Android">
	    <option value=""></option>
		<option value="marsh">Marshmallow</option>
		<option value="lolli">Lollipop</option>
	  </optgroup>
	  <optgroup label="APPLE IOS">
		<option value="ios10">IOS 10</option>
		<option value="ios9">IOS 9</option>
		<option value="ios8">IOS 8</option>
	  </optgroup>
	</select>
	Pole tekstowe TEXTAREA
	<textarea id="komentarz" name="komentarz" cols="20" rows="8"  placeholder="Dzięki użyciu PLACEHOLDER..."></textarea>
	CHECKBOX, przykładowo zgoda na zapisy regulaminu:
	<input type="checkbox" id="zgoda" name="zgoda">
	Przycisk SUBMIT
		<input type="submit" value="Wyślij" disabled>
</form>