Formularze – wstęp
Formularze służą do przesyłania danych wejściowych przez użytkowników danej witryny. Powinny być zawsze rozpoczęte od znacznika <form> i zakończone </form>. W zależności, między innymi od atrybutu action, może on służyć do komunikowania się z pocztą, skryptem JS czy PHP.
Atrybut action może przyjąć wartości, takie jak adres pliku .html lub .php czy też wysłać wiadomość pocztą za pomocą wartości mailto:adres@email, chociaż jest ona rzadko używana.
Głównym elementem składowym formularza jest pole <input>. Można do niego zdefiniować etykietę za pośrednictwem znacznika <label>. Pole odpowiada za komunikację pomiędzy klientem a przeglądarką i serwerem. Do grupowania wejść <input> służy <fieldset>, wraz z jego znacznikiem tytułu <legend>.
Podstawowy formularz obsłużony przez JavaScript Comodo Dragon (Chrome) – plik formularz.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"><title>Formularze</title>
</head>
<body>
<form name="form" action="formularz.html" method="post" onsubmit="alertInput()">
<fieldset>
<legend>Simple form</legend>
<input type="text" name="form_input" value="Say something!">
<input type="submit" name="" value="Send Me!">
</fieldset>
<script type="text/javascript">
function alertInput(){
var formIn = document.forms["form"]["form_input"].value;
alert(formIn);
}
</script>
</form>
</body>
</html>
Formularze – komunikacja
Wejścia formularzy mogą służyć do komunikacji zarówno pocztowej, ze skryptami wykonywanymi po stronie serwera, jak i również ze skryptami wykonywanymi po stronie klienta.
Zarówno język PHP jak i JavaScript do komunikacji z formularzami używają wartości atrybutu name, stosowanego dla <form> oraz <input>. Określa on nazwę, pod którą będzie widoczny dany formularz lub element formularza.
Poniżej skupimy się na rodzajach i zasadach tworzeniu formularzy oraz uzdatnianiu ich do komunikacji. Pierwszym zasadniczym zagadnieniem będzie atrybut method, który definiuje sposób, w jakim zostanie wysłany formularz.
Istnieją dwie wartości metody wysyłania danych: method=”get”, metoda jawna, która wysyła dane z formularza, łącząc go do adresu strony po pytajniku; oraz method=”post”, metoda niejawna, bezpośrednio przekazujące dane z formularza do skryptu.
Aby zainicjować wysłanie formularza, musimy zdefiniować przycisk odpowiadający za wysłanie formularza, może to być <input> z wartością type=”submit” lub przycisk odwołujący się do skryptu JavaScript w formularzu.
Formularz z method=”get”, przed i po wysłaniu w Comodo Dragon (Chrome) – formularz_get.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"><title>Formularze</title>
</head>
<body>
<form action="formularz_get.html" method="get" id="formularz">
<input type="search" name="looking-for" value="">
<input type="submit" name="" value="Wyślij">
</form>
</body>
</html>
Formularz z method=”post”, przed i po wykonaniu funkcji readForm() w Comodo Dragon (Chrome) – formularz_post.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Formularze</title>
</head>
<body>
<form action="formularz_post.html" method="get" name="formularz">
<table>
<tr>
<td>WEJŚCIE:</td>
<td>Imię: </td>
<td><input type="text" name="infn" value="imię" id="infn"></td>
<td>Nazwisko: </td>
<td><input type="text" name="inln" value="nazwisko" id="inln"></td>
</tr>
<tr>
<td>WYJŚCIE:</td><td>Imię: </td>
<td><input type="text" readonly name="outfn"></input></td>
<td>Nazwisko: </td>
<td><input type="text" readonly name="outln"></input></td>
</tr>
</table>
<button onclick="return readForm()">Przeczytaj wejście!</button>
</form>
<script type="text/javascript">
function readForm(){
//definicja zmiennych string z wejścia
var firstname = document.forms["formularz"]["infn"].value;
var lastname = document.forms["formularz"]["inln"].value;
//przesłanie danych z wejścia do wyjścia
document.forms["formularz"]["outfn"].value=firstname;
document.forms["formularz"]["outln"].value=lastname;
/* powrócenie komunikatu fałszu w celu zablokowania ponownego wczytania
strony, dlatego też w znaczniku button onclick="return readform()" a nie
"readform()"; */
return false;
}
</script>
</body>
</html>
Autor tekstu: Jacek Woźniak
