Gwiazdka nieaktywnaGwiazdka nieaktywnaGwiazdka nieaktywnaGwiazdka nieaktywnaGwiazdka nieaktywna
 

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ć:

  1. Automatyczne podpowiadanie spowalnia wypełnianie formularza.
  2. Chcemy ukryć dane z formularza przed innymi użytkownikami komputera (np. formularz logowania).

 

Autouzupełnianie, jak wyłączyć w formularzu HTML5:

  1. Dodajemy w elemencie form atrybut autocomplete z wartością off (Listing 1).
  2. 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> 

 

Książki Helion