Na stronie używamy cookies. Korzystanie z witryny oznacza zgodę na ich wykorzystywanie. Szczegóły znajdziesz w Polityce Prywatności.

Nie możesz znaleść dodatku który chciałbyś umieścić na swojej stronie lub blogu? Napisz do nas - postaramy się przygotować taki dodatek i poinformujemy Cię o tym na maila:

Dodatki
Liczniki
Pogoda

Jak stworzyć formularz na stronę?

Znacznikiem służącym do tworzenia formularzy jest <form>. Posiada on kilka atrybutów. Obowiązkowym atrybutem jest action, który określa gdzie mają zostać wysłane dane z formularza, np. action=”mail@poczta.pl” oznacza wysłanie danych na maila. Drugim często używanym atrybutem jest method, który może przyjąć jedną z dwóch wartości get lub post.

Tak więc przykładowy szkielet formularza będzie wyglądał tak:
<form action=”mail@poczta.pl” method=”post”>
zawartość formularza
</form>

Przejdźmy teraz do zawartości formularza. W treści możemy wstawiać takie pola:

-pole tekstowe:
<input type=”text” name=”nazwa”>

-pole tekstowe do wpisywania hasła:
<input type=”password” name=”hasło” value=”hasło”>.
Zamiast wpisywanych znaków będą widoczne gwiazdki.

-wielowierszowe pole tekstowe:
<textarea name=”nazwa” rows=”5” cols=”30”> Tutaj wpisz tekst ...</textarea>,
gdzie rows to ilość wiersz, a cols to ilość znaków w poziomie (szerokość).

-pole jednokrotnego wyboru – radio:
<input type=”radio” name=”nazwa” value=”biały”>
<input type=”radio” name=”nazwa” value=”szary”>
<input type=”radio” name=”nazwa” value=”czarny”>

Jeśli kilka pól typu radio będzie miało taką samą nazwę to automatycznie zostaną uznane za grupę i możliwe będzie zaznaczenie tylko jednego. Jeśli któreś pole ma być zaznaczone domyślnie należy użyć atrybutu checked, np. <input type=”radio” name=”nazwa” value=”biały” checked>

-pola wielokrotnego wyboru – checkbox:
<input type=”checkbox” name=”nazwa” value=”biały”>
<input type=”checkbox” name=”nazwa” value=”szary”>
<input type=”checkbox” name=”nazwa” value=”czarny”>

Podobnie jak w polach jednokrotnego wyboru można użyć atrybutu checked.

-pole listy:
Lista rozwijana (combo):
<select name="kolor" size="1">
<option>biały</option>
<option>szary</option>
<option>czarny</option>
<option>niebieski</option>
</select>

Jeśli size ustawimy na 1 to powstanie lista rozwijana-combo. Jeśli damy większą wartość to będzie pole listy -listbox:
<select name="kolor" size="2">
<option>biały</option>
<option>szary</option>
<option>czarny</option>
<option>niebieski</option>
</select>

Domyślnie na listach można wybrać jedną wartość. Jeśli do znacznika select zostanie dodany atrybut multiple będzie można wybrać z listy kilka wartości.
<select name="kolor" size="2" multiple>
<option>biały</option>
<option>szary</option>
<option>czarny</option>
<option>niebieski</option>
</select>

Aby domyślnie zostało zaznaczone któreś z pól należy użyć znacznika selected.
<select name="kolor" size="2">
<option selected>biały</option>
<option>szary</option>
<option>czarny</option>
<option>niebieski</option>
</select>

-przycisk wysyłania formularza:
<input type=”submit” name=”nazwa” value=”Wyślij”>
Atrybuty name i value nie są konieczne.

Można również jako przycisk ustawić obrazek:
<input type="image" src="button.gif" alt="Wyślij">

-reset formularza (wyczyszczenie wszystkich pól):
<input type="reset" value="Wyczyść formularz">

-pole wyboru pliku do wysłania:
<input type="file" name="plik">

To są najważniejsze i najczęściej używane elementy formularza. Dodatkowo można formularz obramować. Służy do tego znacznik fieldset (obramowanie) i legend (tytuł).

<fieldset><legend>Wybierz kolor</legend><br/>
<input type="radio" name="kolor" value="biały">biały<br/>
<input type="radio" name="kolor" value="szary">szary<br/>
<input type="radio" name="kolor" value="czarny">czarny
</fieldset>

Przykład formularza:
<form action=”index.php” method=”post”>
<p>Podaj imię:</p>
<input type=”text” name=”imie”><br/>
<p>Podaj nazwisko:</p>
<input type=”text” name=”nazwisko”><br/>
<p> Zainteresowania:</p>
<input type=”checkbox” name=”zainteresowania” value=”sport”>
<input type=”checkbox” name=”zainteresowania” value=”muzyka”>
<input type=”checkbox” name=”zainteresowania” value=”film”>
<input type=”submit” name=”nazwa” value=”Wyślij”>
</form>

Ocena:
3.75
Twoja ocena:
Więcej w tej kategorii

Powiadomienia o nowych dodatkach