HTML - formularze
Formularze
struktura formularza
<form action="adres URL" method="get">
<p>Tu umieszczane będą pola forularza</p>
</form>
action="adres URL strony na serwerze, do której w momencie wysyłania formularza należy przekazać podane w nim informacje"Formularze można wysyłać używając jednej z dwóh metod: get lub post.
method="get"przesyłanie krótkich formularzy
przesyłanie formularzy służących jedynie do pobierania danych z serwera
method="post"przesyłanie plików
przesyłanie wrażliwych danych takich jak np. hasła
dodawanie lub usuwanie informacji z bazy danych
Jeśli atrybut method nie został podany, przeglądarka prześle formularz używając metody get.
pole formularza
znacznik<input /> - pole (rodzaj pola zależy od wartości atrybutu type tego elementu)atrybut
type="" w zależności od podanej wartości:
przycisk
1. <button>Kliknij w ten przycisk</button>
2. <button onclick="alert('Przycisk został kliknięty.');">Kliknij w ten przycisk</button>
3. <input type="button" value="Kliknij w ten przycisk" onclick="alert('Przycisk został kliknięty.');" />
pole tekstowe
<form action="" method="">
<p>Nazwa użytkownika:
<input type="text" name="username" maxlength="30" />
</p>
</form">
type="text" - utworzenie pola tekstowegoname="username"maxlength="10" - ograniczenie liczby znaków wpisywanych w polu formularzapole hasła
<form action="">
<p>Nazwa użytkownika:
<input type="text" name="username" maxlength="30" />
</p>
<p>Hasło:
<input type="password" name="password" maxlength="30" />
</p>
</form>
przycisk opcji
<form action="">
<p>Wybierz swój ulubiony serwis internetowy:<br />
<input type="radio" name="service" value="youtube" checked="checked" /> YouTube
<input type="radio" name="service" value="vimeo" /> Vimeo
<input type="radio" name="service" value="cda"> cda
</p>
</form>
pola wyboru
<form action="">
<p>Wybierz swój ulubiony serwis internetowy:<br />
<input type="checkbox" name="service" value="youtube" checked="checked" /> YouTube
<input type="checkbox" name="service" value="vimeo" /> Vimeo
<input type="checkbox" name="service" value="cda" /> cda
</p>
</form>
wielowarstwowe pola tekstowe
<form action="">
<p>Co myślisz o locie na Marsa?</p>
<textarea name="comments" cols="30" rows="4">Tutaj wpisz swój komentarz...</textarea>
</form>
atrybut cols określa szerokość pola (wyrażoną jako liczba znaków)
atrybut rows - określa wysokość pola (ilość wierszy tekstu, które mają być widoczne w polu)
lista rozwijana
<form action="">
<p>Wybierz swój ulubiony serwis internetowy:</p>
<select name="devices">
<option value="YouTube">YouTube</option>
<option value="Vimeo">Vimeo</option>
<option value="cda">cda</option>
</select>
</form>
lista wielokrotnego wyboru
<form action="">
<p>Wybierz swój ulubiony serwis internetowy:<br />
(Możesz zaznaczyć więcej niż jedną opcję, naciskając klawisz Ctrl na komputerach PC lub klawisz Command na komputerach Mac).</p>
<select name="service" size="3" multiple="multiple">
<option value="YouTube" selected="selected">YouTube</option>
<option value="Vimeo">Vimeo</option>
<option value="cda">cda</option>
<option value="Netflix">Netflix</option>
</select>
</form>
pole przesyłania plików
przycisk przesyłający
przyciski z obrazem
dodawanie etykiety do pól formularzy
grupowanie elementów formularza
<fieldset>
<legend>Informacje kontaktowe</legend>
<label>imię:<br />
<input type="text" name="name" /></label><br />
<label>nazwisko:<br />
<input type="text" name="surname" /></label><br />
<label>adres e-mail:<br />
<input type="email" name="email" /></label><br />
<label>telefon komórkowy:<br />
<input type="number" name="mobilephone" /></label><br />
<label>telefon:<br />
<input type="number" name="phone" /></label>
</fieldset>
wynik kodu
weryfikacja pól formularzy
<form action="audio_wideo/index.html" method="past">
<label for="username">Nazwa użytkownika: </label>
<input type="text" name="username" required="required"><br />
<label for="password">Hasło: </label>
<input type="password" name="password" required="required" />
<input type="submit" value="Zaloguj się" />
</form>
wynik kodu
pole daty
<form action="audio_wideo/index.html" method="post">
<label for="username">Data wylotu: </label>
<input type="date" name="depart" />
<input type="submit" value="Prześlij" />
</form>
wynik kodu
pola adresów e-mail i url
<form action="audio_wideo/index.html">
<p>proszę podać swój adres e-mail:</p>
<input type="email" name="email" />
<input type="submit" value="Prześlij" />
</form>
<form action="audio_wideo/index.html">
<p>proszę podać adres swojej witryny:</p>
<input type="url" name="website" />
<input type="submit" value="Prześlij" />
</form>
pola wyszukiwania
<form action="audio_wideo/index.html">
<p>szukaj:</p>
<input type="search" name="search" />
<input type="submit" value="Szukaj" />
</form>
<form action="audio_wideo/index.html">
<p>szukaj:</p>
<input type="search" name="search" placeholder="poszukiwany tekst" />
<input type="submit" value="Szukaj" />
</form>