Formularz HTML - atrybut "readonly"

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

<form action="https://webkod.pl/php/submit-result.php">
  <p>
    <label>
      Podaj imię:
      <input type="text" name="imie">
    </label>

    <label>
      <input type="text" value="np. Jan">
    </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 sprawić, aby wartość posiadana przez daną, która reprezentowana jest przez interesujący nas element HTML (w tym wypadku interesujący nas element input) pełniła rolę wartości tylko do odczytu, wtedy do wspomnianego interesującego nas elementu HTML należy dodać atrybut logiczny readonly.

Przykład:

<form action="https://webkod.pl/php/submit-result.php">
  <p>
    <label>
      Podaj imię:
      <input type="text" name="imie">
    </label>

    <label>
      <input type="text" value="np. Jan" readonly>
    </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 value o wartości np. Jan został dodany atrybut readonly, wartość posiadana przez daną, która reprezentowana jest przez wspomniany element input pełni rolę wartości tylko do odczytu, czyli takiej wartości, która nie może zostać zmieniona przez użytkownika.