# Formularz HTML - atrybut "placeholder"

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

```html
<form action="./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:

<figure><img src="https://3945955358-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR42GcKXoxIh1R4ROdsLU%2Fuploads%2FnkUvQ31uBnLsetILpzD4%2Fimage.png?alt=media&#x26;token=afee87b0-862c-4d63-bbc9-1c6738426f69" alt=""><figcaption></figcaption></figure>

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:

```html
<form action="./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:

<figure><img src="https://3945955358-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR42GcKXoxIh1R4ROdsLU%2Fuploads%2FPTMGfI0rcL5ht2U0bKXF%2Fimage.png?alt=media&#x26;token=266bf023-db37-429a-a9e3-1bb2257353e8" alt=""><figcaption></figcaption></figure>

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`.
