# Formularz HTML - przycisk zatwierdzający

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

```html
<form>
  <p>
    <label>
      Jaki jest Twój ulubiony kwiat?
      <input type="text" name="ulubiony-kwiat">
    </label>
  </p>

  <p>
    <label>
      Dlaczego ten kwiat?
      <textarea name="powod"></textarea>
    </label>
  </p>

  <p>
    <label>
      Jaki jest Twój ulubiony rodzaj muzyki?
      <select name="rodzaj-muzyki">
        <option>inny</option>
        <option>rock</option>
        <option>pop</option>
        <option>techno</option>
        <option>trance</option>
      </select>
    </label>
  </p>
</form>
```

Rezultat:

<figure><img src="https://3945955358-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FR42GcKXoxIh1R4ROdsLU%2Fuploads%2FfL34IqWtylrwZpcLqie5%2Fimage.png?alt=media&#x26;token=9ce64ffc-9097-40b7-8b73-e4b8c9f4bd22" 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ępują trzy elementy HTML, które mogą przechowywać informację wprowadzoną przez użytkownika.

Wspomnianymi elementami HTML są: element `input`, element `textarea` oraz element `select`.

Załóżmy, że nasz przykładowy dokument HTML zostanie odwiedzony przez użytkownika, który zechce wypełnić nasz przykładowy formularz HTML. Po wypełnieniu przez wspomnianego użytkownika pól naszego przykładowego formularza HTML jedyną rzeczą, jaka pozostanie do wykonania przez wspomnianego użytkownika jest zatwierdzenie formularza HTML za pomocą przycisku zatwierdzającego.

Nasz przykładowy formularz HTML na tę chwilę nie posiada przycisku zatwierdzającego, lecz sytuację tę postaramy się zmienić.

Aby dodać do formularza HTML przycisk zatwierdzający do wyboru mamy kilka rozwiązań.

Możemy skorzystać z elementu `input` posiadającego atrybut `type` o wartości `submit` (wtedy napis, jaki chcemy, aby posiadał interesujący nas przycisk zatwierdzający należy podać jako wartość atrybutu `value`).

```html
<input type="submit" value="zatwierdź">
```

Lub możemy skorzystać z elementu `input` posiadającego atrybut `type` o wartości `image` (wtedy napis, jaki chcemy, aby posiadał interesujący nas przycisk zatwierdzający, w przypadku gdy obrazek reprezentowany przez wspomniany element `input` nie mógł zostać obsłużony przez przeglądarkę internetową, należy podać jako wartość atrybutu `alt`).

```html
<input type="image" src="./files/html/przycisk-1.png" alt="zatwierdź">
```

Lub możemy skorzystać z elementu `button` nieposiadającego atrybutu `type` (wtedy napis, jaki chcemy, aby posiadał interesujący nas przycisk zatwierdzający należy dodać do zawartości wspomnianego elementu `button`).

```html
<button>zatwierdź</button>
```

Lub możemy skorzystać z elementu `button` posiadającego atrybut `type` o wartości `submit` (wtedy napis, jaki chcemy, aby posiadał interesujący nas przycisk zatwierdzający należy dodać do zawartości wspomnianego elementu `button`).

```html
<button type="submit">zatwierdź</button>
```

Przykład:

```html
<form>
  <p>
    <label>
      Jaki jest Twój ulubiony kwiat?
      <input type="text" name="ulubiony-kwiat">
    </label>
  </p>

  <p>
    <label>
      Dlaczego ten kwiat?
      <textarea name="powod"></textarea>
    </label>
  </p>

  <p>
    <label>
      Jaki jest Twój ulubiony rodzaj muzyki?
      <select name="rodzaj-muzyki">
        <option>inny</option>
        <option>rock</option>
        <option>pop</option>
        <option>techno</option>
        <option>trance</option>
      </select>
    </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%2FI6hAO5WhrDud48d0V7n5%2Fimage.png?alt=media&#x26;token=585217e0-3c05-4c99-9178-e7f015799dbf" alt=""><figcaption></figcaption></figure>

Aby zrozumieć proces, jaki następuje w momencie naciśnięcia przez użytkownika przycisku zatwierdzającego formularz HTML musimy zapoznać się z kilkoma kolejnymi zagadnieniami.
