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):

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>

Kontynuując przeglądanie strony, wyrażasz zgodę na używanie przez nas plików cookies. dowiedz się więcej

Aby zapewnić Tobie najwyższy poziom realizacji usługi, opcje ciasteczek na tej stronie są ustawione na "zezwalaj na pliki cookies". Kontynuując przeglądanie strony bez zmiany ustawień lub klikając przycisk "Akceptuję" zgadzasz się na ich wykorzystanie.

Zamknij