Ostatnio edytowany:

Formularz HTML - atrybut "required"

Autor: Virtual Patriot

Nie wszystkie przeglądarki internetowe na tę chwilę interpretują atrybut required.

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

<form action="http://webkod.pl/php/submit-result.php">
  <p>
    <label>
      Jakie jest Twoje imię?
      <input type="text" name="imie">
    </label>
  </p>

  <p>
    <label>
      Jaki jest Twój ulubiony kwiat?
      <input type="text" name="ulubiony-kwiat">
    </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ępują dwa elementy HTML, które mogą przechowywać informację wprowadzoną przez użytkownika.

Wspomnianymi elementami HTML są elementy input.

Jeżeli z jakiejś przyczyny chcemy, aby wartość posiadana przez daną, która reprezentowana jest przez interesujący nas element HTML (w tym wypadku interesujący nas element input) nie mogła być wartością pustą przed próbą zatwierdzenia formularza HTML, z którym został powiązany wspomniany interesujący nas element HTML, wtedy do wspomnianego interesującego nas elementu HTML należy dodać atrybut logiczny required.

Przykład:

<form action="http://webkod.pl/php/submit-result.php">
  <p>
    <label>
      Jakie jest Twoje imię?
      <input type="text" name="imie" required>
    </label>
  </p>

  <p>
    <label>
      Jaki jest Twój ulubiony kwiat?
      <input type="text" name="ulubiony-kwiat">
    </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 imie został dodany atrybut required, formularz HTML, z którym to formularzem HTML został powiązany wspomniany element input, nie może zostać zatwierdzony, jeżeli dana reprezentowana przez wspomniany element input posiada wartość pustą.