Przejdź do treści

Formularze - HTML

Wyczyszczenie danych <input "reset">

Jak wyczyścić wszystkie wprowadzone dane w formularzu? W jaki sposób zapobiec omyłkowemu wyczyszczeniu danych formularza?

Chrome Firefox Edge Opera Safari

Wyczyszczenie danych <input "reset">

<form action="...">
	<input type="reset" value="wartość">
</form>
gdzie jako "wartość" należy wpisać napis, który pojawi się na przycisku wysyłania formularza. Jeśli opuścimy ten parametr, pojawi się tam domyślny napis, np.: "Resetuj".

Komenda wyświetla na ekranie przycisk, po naciśnięciu którego, nastąpi wyczyszczenie wszystkich udzielonych do tej pory odpowiedzi w ankiecie (np. jeśli się rozmyślimy).

Wygląd pól formularza można zdefiniować bardziej precyzyjnie dzięki możliwościom CSS - np. przy pomocy zamieszczonego generatora.

Przykład <input "reset">

Wypełnij formularz, a następnie kliknij jeden z poniższych przycisków:

Wpisz tu jakiś tekst.

Odpowiedź nr1 Odpowiedź nr2

Odpowiedź nr1 Odpowiedź nr2


value="Kliknij tutaj!"...

To jest przykład bez podania wartości VALUE.

Zwróć uwagę, że kliknięcie któregokolwiek z powyższych przycisków, spowoduje wyczyszczenie wszystkich pól formularza (jeśli był on wcześniej wypełniony).

Blokada pola <input "reset" disabled>

Możliwe jest także zablokowanie przycisku (nie obsługuje Opera 6):

<form action="...">
	<input type="reset" value="wartość" disabled>
</form>

Przykład <input "reset" disabled>

To pole jest zablokowane (disabled).

Potwierdzenie wyczyszczenia formularza <form onreset>

Przed wyczyszczeniem całego formularza, można się upewnić, czy użytkownik na pewno chce to zrobić. Dzięki temu wyeliminujemy możliwość przypadkowego naciśnięcia przycisku "reset". Ma to szczególne znaczenie zwłaszcza w przypadku długich formularzy, przy których ponowne wpisywanie wszystkich danych trwałoby dość długo.

Aby potwierdzić wyczyszczenie formularza, należy do znacznika <form> dodać atrybut onreset="...":

<form action="adres" method="post" onreset="if (!confirm('Czy na pewno chcesz wyczyścić cały formularz?')) return false">...</form>

Przykład <form onreset>

Wpisz tu jakiś tekst.

Odpowiedź nr1 Odpowiedź nr2

Odpowiedź nr1 Odpowiedź nr2


Pytania i odpowiedzi <input "reset">

Jak zresetować formularz HTML?

Zdarza się, że użytkownik w trakcie wypełniania formularza zdecyduje, że chce zacząć od nowa. Oczywiście w tym celu mógłby po prostu odświeżyć całą stronę. Jednak znacznie wygodniej jest umieścić w formularzu specjalny przycisk, po wciśnięciu którego cała zawartość formularza zostanie natychmiast przywrócona na stanu początkowego bez czekania na przeładowanie strony. W tym celu wewnątrz formularza trzeba umieścić specjalny znacznik: <input type="reset" value="Wyczyść">.

Jak wyczyścić formularz?

Pojęcie wyczyszczenia danych zwykle jest stosowane zamiennie z resetowaniem formularza. Formalnie jednak resetowanie oznacza przywrócenie wartości początkowych - tzn. takich jakie miały ustawione pola, zanim użytkownik rozpoczął wypełnianie formularza. Najczęściej będzie to oznaczać właśnie usunięcie ich zawartości. Jednak niektóre pola mogą mieć ustawione przez twórcę strony wartości domyślne, które użytkownik może zmienić. W takim przypadku reset nie wyczyści ich zawartości, ale przywróci te wartości domyślne. W języku HTML nie istnieje element pozwalający naprawdę wyczyścić formularz, ponieważ może to wymagać indywidualnego podejścia w zależności od tego z jakich pól się on składa. Potrzeba uzyskania takiego efektu raczej nie jest częsta - zwykle chodzi nam raczej o zresetowanie danych, a nie ich całkowite wyczyszczenie. Jeśli rzeczywiście jest to konieczne, można taki efekt zaimplementować przy pomocy odpowiedniego skryptu JavaScript.

Komentarze

Zobacz więcej komentarzy

Facebook