Często, gdy nie mamy dostępu do php na serwerze, a potrzebie stworzenia formularza musimy sobie poradzić tworząc takowy w html-u. W artykule opisze tworzenie podstawowego formularza z wysyłaniem odpowiedzi na e-mail.
---/Spis treści/---
1. Tagi <form>.
2. Jednolinijkowe pola textowe.
3. Pola tekstowe.
4. Przyciski typu radiobutton.
5. Przyciski typu checkbox.
6. Listy z opcjami select.
7. Przyciski zerujące oraz wysyłające formularz.
8. Przykładowy plik html z formularzem.
---/ /---
---1. Tagi <form>.---
Cały formularz należy ograniczyć tagami <form>:
Kod:
<form name="nazwaformularza" method="get" action="mailto:mojadres@domena.pl">
<!--tutaj formularz-->
</form>
Atrybuty użyte w tagu <form>:
name="nazwaformularza" - definiuje nazwę formularza
method="get" - metoda pobierania danych z formularza - bezpieczniejsza jest "post", ale w tym arcie posłużę się metodą get, zakładając, że profesionalne witryny mają jednak na serwerze php.
action="mailto:mojadres@domena.pl" - najwazniejszy atrybut w tagu - powoduje wysłanie maila z odpowiedziami z formularza.
---2. Jednolinijkowe pola textowe.---
Aby stworzyć jednolinijkowe pole textowe należy się posłużyć tagiem <input>:
Kod:
<form name="nazwaformularza" method="get" action="mailto:mojadres@domena.pl">
<input name="nazwisko" type="text" size="60" maxlength="50" value="Tu wpisz swoje nazwisko">
</form>
Atrybute użyte w tagu <input>:
name="nazwisko" - definiuje nazwę pola.
type="text" - definiuje, że jest to jednolinijkowe pole textowe.
size="60" - definiuje rozmiar pola.
maxlenght="60" - definiuje maksymalną ilość znaków w polu.
value="Tu wpisz swoje nazwisko" - definiuje wartość pola, czyli co zostanie wyświetlone w polu.
---3. Pola tekstowe.---
Aby stworzyć pole textowe należy się posłużyć tagiem <textarea>:
Kod:
<form name="nazwaformularza" method="get" action="mailto:mojadres@domena.pl">
<input name="nazwisko" type="text" size="60" maxlength="50" value="Tu wpisz swoje nazwisko"><br>
<textarea name="wiadomosc" cols="60" rows="10">Tutaj wpisz wiadomość, którą chcesz przekazać.</textarea>
</form>
Atrybuty użyte w tagu <textarea>:
name="wiadomosc" - definuije nazwe pola.
cols="60" - definiuje szerokość pola.
rows="10" - definiuje wysokość pola.
Jeśli między tagiem otwierającym <textarea> a zamykającym </textarea> wpiszemy jakiś text, zostanie on wyświetlony w polu textowym. W powyższym przykładzie zostanie wyświetlony text "Tutaj wpisz swoją wiadomość".
---4. Przyciski typu radiobutton.---
Aby stworzyć przycisk typu radiobutton należy się posłużyć tagiem <input>:
Kod:
<form name="nazwaformularza" method="get" action="mailto:mojadres@domena.pl">
<input name="nazwisko" type="text" size="60" maxlength="50" value="Tu wpisz swoje nazwisko"><br><br>
<textarea name="wiadomosc" cols="60" rows="10">Tutaj wpisz wiadomość, którą chcesz przekazać.</textarea><br><br>
Czy usługi naszej firmy stoją na wysokim poziomie?<br>
<input name="taknie" type="radio" value="tak">Tak<br>
<input name="taknie" type="radio" value="nie">Nie<br><br>
</form>
Atrybuty użyte w tagu <input>:
name="taknie" - definiuje nazwę buttona.
type="radio" - definiuje, że jest to radiobutton.
value="tak" - definiuje text, jaki zostanie do Ciebie wysłany po zaznaczeniu danego buttona.
Bardzo ważny jest tu atrybut "name" - musi być on taki sam we wszystkich radiobuttonach.
---5. Przyciski typu checkbutton.---
Aby stworzyć przycisk typu checkbutton należy się posłużyć tagiem <input>:
Kod:
<form name="nazwaformularza" method="get" action="mailto:mojadres@domena.pl">
<input name="nazwisko" type="text" size="60" maxlength="50" value="Tu wpisz swoje nazwisko"><br><br>
<textarea name="wiadomosc" cols="60" rows="10">Tutaj wpisz wiadomość, którą chcesz przekazać.</textarea><br><br>
Czy usługi naszej firmy stoją na wysokim poziomie?<br>
<input name="taknie" type="radio" value="tak">Tak<br>
<input name="taknie" type="radio" value="nie">Nie<br><br>
Jakiego języka, oprócz polskiego używasz?<br>
<input type="checkbox" name="jezyk" value="angielski"> angielski<br>
<input type="checkbox" name="jezyk" value="francuski"> francuski<br>
<input type="checkbox" name="jezyk" value="niemiecki"> niemiecki<br><br>
</form>
Atrybuty użyte w tagu <input>:
name="jezyk" - definiuje nazwę buttona.
type="checkbox" - definiuje, że jest to checkbox.
value="angielski" - definiuje text, jaki zostanie do Ciebie wysłany po zaznaczeniu danego checkboxa.
Bardzo ważny jest tu atrybut "name" - musi być on taki sam we wszystkich checkboxach.
---6. Pola wyboru <select>.---
Aby stworzyć pole wyboru select trzeba posłużyć się tagiem <select>
Kod:
<form name="nazwaformularza" method="get" action="mailto:mojadres@domena.pl">
<input name="nazwisko" type="text" size="60" maxlength="50" value="Tu wpisz swoje nazwisko"><br><br>
<textarea name="wiadomosc" cols="60" rows="10">Tutaj wpisz wiadomość, którą chcesz przekazać.</textarea><br><br>
Czy usługi naszej firmy stoją na wysokim poziomie?<br>
<input name="taknie" type="radio" value="tak">Tak<br>
<input name="taknie" type="radio" value="nie">Nie<br><br>
Jakiego języka, oprócz polskiego używasz?<br>
<input type="checkbox" name="jezyk" value="angielski"> angielski<br>
<input type="checkbox" name="jezyk" value="francuski"> francuski<br>
<input type="checkbox" name="jezyk" value="niemiecki"> niemiecki<br><br>
Jakie jest twoje ulubione danie?<br>
<select name="ulubionedanie" size="1">
<option> żurek z ziemniakami
<option> bigos
<option> pizza
</select>
</form>
Atrybuty użyte w tagu <input>:
name="ulubionedanie" - definuje nazwe pola wyboru z opcjami select.
size="1" - definiuje wielkość pola wyboru z opcjami.
Tagi <option> oznaczają opcje do tagów <select>. Tagi <option> nie mają zamknięcia.
---7. Przyciski zerujące oraz wysyłające formularz.---
Powyższy formularz nie zrobi nic, jeśli nie dodamy conajmniej przycisku wysyłającego formularz. Przycisk zerujący nie jest wymagany.
Kod:
<form name="nazwaformularza" method="get" action="mailto:mojadres@domena.pl">
<input name="nazwisko" type="text" size="60" maxlength="50" value="Tu wpisz swoje nazwisko"><br><br>
<textarea name="wiadomosc" cols="60" rows="10">Tutaj wpisz wiadomość, którą chcesz przekazać.</textarea><br><br>
Czy usługi naszej firmy stoją na wysokim poziomie?<br>
<input name="taknie" type="radio" value="tak">Tak<br>
<input name="taknie" type="radio" value="nie">Nie<br><br>
Jakiego języka, oprócz polskiego używasz?<br>
<input type="checkbox" name="jezyk" value="angielski"> angielski<br>
<input type="checkbox" name="jezyk" value="francuski"> francuski<br>
<input type="checkbox" name="jezyk" value="niemiecki"> niemiecki<br><br>
Jakie jest twoje ulubione danie?<br>
<select name="ulubionedanie" size="1">
<option> żurek z ziemniakami
<option> bigos
<option> pizza
</select><br><br>
<input type="submit" value="Wyślij"><br>
<input type="reset" value="Resetuj"><br>
</form>
Atrybuty użyte w tagu <input>:
type="submit" - definiuje przycisk wysyłający formularz.
type="reset" - definiuje przycisk zerujący formularz.
value="Wyślij" - definiuje napis, jaki będzie wyświetlany na przycisku.
---8. Przykładowy plik html z formularzem.---
Oto przykładowy plik html z formularzem:
Kod:
<html>
<head>
<title>Formularz</title>
</head>
<body>
<form name="nazwaformularza" method="get" action="mailto:mojadres@domena.pl">
<input name="nazwisko" type="text" size="60" maxlength="50" value="Tu wpisz swoje nazwisko"><br><br>
<textarea name="wiadomosc" cols="60" rows="10">Tutaj wpisz wiadomość, którą chcesz przekazać.</textarea><br><br>
Czy usługi naszej firmy stoją na wysokim poziomie?<br>
<input name="taknie" type="radio" value="tak">Tak<br>
<input name="taknie" type="radio" value="nie">Nie<br><br>
Jakiego języka, oprócz polskiego używasz?<br>
<input type="checkbox" name="jezyk" value="angielski"> angielski<br>
<input type="checkbox" name="jezyk" value="francuski"> francuski<br>
<input type="checkbox" name="jezyk" value="niemiecki"> niemiecki<br><br>
Jakie jest twoje ulubione danie?<br>
<select name="ulubionedanie" size="1">
<option> żurek z ziemniakami
<option> bigos
<option> pizza
</select><br><br>
<input type="submit" value="Wyślij"><br>
<input type="reset" value="Resetuj"><br>
</form>
</body>
</html>
-----------------------------------------------
Autor: Sm00f, e-mail:
sm00f@o2.pl
Artykułu NIE wolno publikować bez zgody autora!
