<form> Element
Formularze są wykorzystywane do zbierania danych wejściowych użytkownika.
<form> element definiuje formularza HTML:
<form>
.
Formularze zawierają elementy formularza. Elementy formy są różne typy elementów wejściowych, pola wyboru, przyciski radiowe, przedstawienia przycisków i więcej.
<input> Element
<input> elementem jest najważniejszym elementem formularza.
<input> element ma wiele odmian, w zależności od type atrybutu.
Oto typy używane w tym rozdziale:
Rodzaj Opis text Definiuje normalny wprowadzania tekstu radio Definiuje wejście przycisk radiowy (for selecting one of many choices) submit Definiuje przycisk submit (for submitting the form)
Dowiesz się dużo więcej na temat typów wejść później w tym kursie.
Wprowadzanie tekstu
<input type="text"> określa pole wejściowe jeden liniowy tekstu:
Przykład
<form>
First name:<br>
<input type="text" name="firstname"><br>
Last name:<br>
<input type="text" name="lastname">
</form>
Spróbuj sam " To, jak będzie wyglądał w przeglądarce:
Pierwsze imię:
Nazwisko:
Note: Sama forma nie jest widoczny. Należy również pamiętać, że domyślna szerokość pola tekstowego to 20 znaków.
Radio Przycisk INPUT
<input type="radio"> definiuje radio przycisk.
Radio przycisków pozwolić użytkownikowi wybrać jeden z ograniczoną liczbą wyborów:
Przykład
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
Spróbuj sam " W ten sposób kod HTML powyżej zostanie wyświetlona w przeglądarce:
Męski
Płeć żeńska
Inny
Przycisk Zatwierdź
<input type="submit"> definiuje przycisk składania formularza do obsługi formularzy.
Forma-handler jest zazwyczaj strona serwera ze skryptem do przetwarzania danych wejściowych.
Forma-handler jest podany w formularzu za action atrybutu:
Przykład
<form action="action_page.php">
First name:<br>
<input type="text"
name="firstname" value="Mickey"><br>
Last name:<br>
<input
type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>
Spróbuj sam " W ten sposób kod HTML powyżej zostanie wyświetlona w przeglądarce:
Pierwsze imię:
Nazwisko:
Action Atrybut
action atrybut określa działania, jakie należy przeprowadzić, gdy formularz jest składany.
Wspólna droga do złożenia formularza do serwera jest za pomocą przycisku Prześlij.
Normalnie, formularz jest przesyłany do strony na serwerze WWW.
W powyższym przykładzie, skrypt po stronie serwera jest określona obsłużyć złożoną postać:
<form action="action_page.php ">
Jeżeli action atrybut zostanie pominięty, działanie jest ustawiony na bieżącej stronie.
Method Atrybut
method atrybut definiuje metody (HTTP GET albo POST ) do stosowania przy składaniu postać:
<form action="action_page.php" method="get" > lub:
<form action="action_page.php" method="post" >
Kiedy używać GET ?
Można użyć GET (the default method) :
Jeżeli złożenie formularza jest pasywny (like a search engine query) , a bez informacji poufnych.
Podczas korzystania z GET , dane formularza będą widoczne w adresie strony:
action_page.php?firstname=Mickey&lastname=Mouse GET najlepiej nadaje się do krótkich ilości danych. ograniczenia wielkości są ustawione w przeglądarce.
Kiedy używać POST ?
Należy użyć POST :
Jeśli formularz jest aktualizacją danych lub zawiera poufne informacje (password) .
POST oferuje większe bezpieczeństwo, ponieważ przedłożone dane nie są widoczne w adresie strony.
Name Atrybut
Należy złożyć poprawnie, każde pole wejściowe muszą mieć name atrybutu.
Przykład ten przedstawi tylko "Last name" pole wprowadzania:
Przykład
<form action="action_page.php">
First name:<br>
<input type="text"
value="Mickey"><br>
Last name:<br>
<input
type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>
Spróbuj sam "
Grupowania danych formularza o <fieldset>
W <fieldset> grupy elementów powiązane dane w formularzu.
<legend> element definiuje podpis do <fieldset> elementu.
Przykład
<form action="action_page.php">
<fieldset>
<legend>Personal
information:</legend>
First name:<br>
<input type="text" name="firstname"
value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
Spróbuj sam " W ten sposób kod HTML powyżej zostanie wyświetlona w przeglądarce:
HTML Form Atrybuty
HTML <form> element z ustawić wszystkie możliwe cechy, będzie wyglądać następująco:
<form action="action_page.php" method="post" target="_blank"
accept-charset="UTF-8"
enctype="application/x-www-form-urlencoded"
autocomplete="off" novalidate>
.
Sprawdź się z ćwiczeniami! Ćwiczenie 1 » ćwiczenie 2» ćwiczenie 3 » ćwiczenie 4»
Oto lista <form> atrybuty:
Atrybut Opis accept-charset Określa kodowanie znaków stosowane w postaci składane (domyślnie: charset strona). action Określa adres (url) gdzie przesłać formularz (domyślnie: strona przedkładanie). autocomplete Określa, czy przeglądarka ma uzupełni formularz (default: on) . enctype Określa kodowanie przedstawionych danych (default: is url-encoded) . method Określa metodę HTTP używaną podczas składania formularza (default: GET) . name Określa nazwę używaną do identyfikacji formy (dla ulic DOM: document.forms.name). novalidate Określa, że przeglądarka nie może zatwierdzić formularz. target Określa docelowy adres w action atrybutu (domyślnie: _self).
Dowiesz się więcej o atrybutach w następnych rozdziałach.
Więcej przykładów
Wyślij e-mail z formularza
Jak wysłać e-mail z formularza.