Formularz HTML - atrybut "placeholder"

Spójrzmy na następujący kod HTML:

<form action="https://webkod.pl/php/submit-result.php">
  <p>
    <label>
      Podaj czterocyfrową liczbę:
      <input type="text" name="liczba" pattern="[0-9]{4}">
    </label>
  </p>

  <p>
    <button type="submit">zatwierdź</button>
  </p>
</form>

Rezultat:

Nasz przykładowy kod HTML reprezentuje formularz HTML, który z kolei reprezentowany jest przez element form.

W zawartości naszego przykładowego formularza HTML występuje jeden element HTML, który może przechowywać informację wprowadzoną przez użytkownika.

Wspomnianym elementem HTML jest element input.

Jeżeli z jakiejś przyczyny chcemy określić treść, jaka ma pojawić się w widocznym obszarze interesującego nas elementu HTML (w tym wypadku interesującego nas elementu input), gdy wspomniany interesujący nas element HTML w danym momencie nie reprezentuje żadnej innej treści, wtedy do wspomnianego interesującego nas elementu HTML należy dodać atrybut placeholder wraz z interesującą nas wartością.

Przykład:

<form action="https://webkod.pl/php/submit-result.php">
  <p>
    <label>
      Podaj czterocyfrową liczbę:
      <input type="text" name="liczba" pattern="[0-9]{4}" placeholder="np. 1234">
    </label>
  </p>

  <p>
    <button type="submit">zatwierdź</button>
  </p>
</form>

Rezultat:

Od tej pory, dzięki temu, że do naszego przykładowego elementu input posiadającego atrybut name o wartości liczba został dodany atrybut placeholder wraz z wartością np. 1234, w momencie gdy do wspomnianego elementu input nie została wprowadzona żadna wartość, wspomniany element input w swoim widocznym obszarze posiada treść w postaci ciągu znaków np. 1234.