Automatyczne uzupełnianie formularzy jest bardzo wygodną funkcją dostępną na stronach internetowych, jednak może być bardzo niebezpieczna. Istnieją sytuacje, w których jesteśmy zmuszeni wyłączyć autouzupełnianie formularzy. Domyślnie autouzupełnianie jest włączone.
Wybrane sytuacje, w których autouzupełnianie możemy wyłączyć:
- Automatyczne podpowiadanie spowalnia wypełnianie formularza.
- Chcemy ukryć dane z formularza przed innymi użytkownikami komputera (np. formularz logowania).
Autouzupełnianie, jak wyłączyć w formularzu HTML5:
- Dodajemy w elemencie form atrybut autocomplete z wartością off (Listing 1).
- Dodajemy w elemencie input atrybut autocomplete z wartością off (Listing 2).
Listing 1. Wyłączenie autouzupełniania dla całego formularza w HTML5
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Autouzupełnianie formularzy HTML</title>
<meta name="author" content="Piotr Klimek"/>
</head>
<body>
<!-- Domyślnie jeśli atrybutu autocomplete nie podano, autouzupełnianie jest włączone -->
<form method="post" action="/listing1" autocomplete="off">
<p>
<label for="txtFirstName">Imię:</label>
<input name="first_name" id="txtFirstName"/>
</p>
<p>
<label for="txtLastName">Nazwisko:</label>
<input name="last_name" id="txtLastName"/>
</p>
<button>Wyślij</button>
</form>
</body>
</html>
Listing 2. Autouzupełnianie dla wybranych pól formularza w HTML5
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Autouzupełnianie formularzy HTML</title>
<meta name="author" content="Piotr Klimek"/>
</head>
<body>
<!-- Domyślnie jeśli atrybutu autocomplete nie podano, autouzupełnianie jest włączone -->
<form method="post" action="/listing2">
<p>
<label for="txtFirstName">Imię:</label>
<input name="first_name" id="txtFirstName"/>
</p>
<p>
<label for="txtLastName">Nazwisko:</label>
<input name="last_name" id="txtLastName" autocomplete="off"/>
</p>
<button>Wyślij</button>
</form>
</body>
</html>
Automatyczne uzupełnianie formularza możemy włączyć, również tylko w wybranych elementach input (Listing 3).
Listing 3. Włączenie podpowiadania w wybranych polach formularza HTML5
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> Automatyczne uzupełnianie formularzy HTML5</title>
<meta name="author" content="Piotr Klimek"/>
</head>
<body>
<form method="post" action="/listing3" autocomplete="off">
<p>
<label for="txtFirstName">Imię:</label>
<input name="first_name" id="txtFirstName" autocomplete="on"/>
</p>
<p>
<label for="txtLastName">Nazwisko:</label>
<input name="last_name" id="txtLastName"/>
</p>
<button>Wyślij</button>
</form>
</body>
</html>
Wybrane strony: