Ostatnio edytowany:

Formularz HTML - przycisk resetujący wartość posiadaną przez daną

Autor: Virtual Patriot

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

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

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

  <p>
    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>
  </p>
</form>

Rezultat:

Jaki jest Twój ulubiony kwiat?

Dlaczego ten kwiat?

Jaki jest Twój ulubiony rodzaj muzyki?

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.

Gdy z jakiejś przyczyny chcemy dać możliwość użytkownikowi odwiedzającemu nasz dokument HTML szansę zresetowania do wartości domyślnych wartości posiadanych przez dane naszego formularza HTML, wtedy do zawartości naszego formularza HTML należy dodać element HTML, który będzie reprezentował przycisk resetujący.

Aby dodać do formularza HTML przycisk resetujący do wyboru mamy dwa rozwiązania.

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

<input type="reset" value="zresetuj">

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

<button type="reset">zresetuj</button>

Przykład:

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

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

  <p>
    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>
  </p>

  <p>
    <button type="reset">zresetuj</button>
  </p>
</form>

Rezultat:

Jaki jest Twój ulubiony kwiat?

Dlaczego ten kwiat?

Jaki jest Twój ulubiony rodzaj muzyki?

Od tej pory, gdy użytkownik odwiedzający nasz dokument HTML wprowadzi jakieś swoje wartości do pól naszego przykładowego formularza HTML (czyli do elementu input, elementu textarea lub elementu select) wartości posiadane przez wszystkie wspomniane pola będą mogły zostać zresetowane do swoich wartości domyślnych przez wspomnianego użytkownika za pomocą występującego w zawartości naszego przykładowego formularza HTML elementu button posiadającego atrybut type o wartości reset.