HTMLで要素を無効化する方法【現役エンジニアが解説】

PROGRAM

今回は、HTMLで要素を無効化する方法について、disabledとreadonlyに分け、簡単に解説していきます。

disabledで無効化

disabled属性の値をtrueにすると、要素が完全に無効化されます。

input要素では値の変更もできなくなるうえ、フォームの送信対象外になります。

<input type="text" name="hoge" disabled="true">

上記のコードでは、入力不可でフォーム送信対象外のテキストボックスが表示されます。

readonlyで無効化

readonly属性の値をtrueにした場合、要素の値の変更ができなくなります。

input要素では、値の変更はできなくなる一方で、フォームの送信対象にはなります。

<input type="text" name="hoge" readonly="true">

上記のコードでは、入力不可でフォームの送信対象ではあるテキストボックスが表示されます。

自動補完の無効化

autocomplete属性の値をoffにすることで自動補完を無効化させることができます。

form要素のautocomplete属性の値をoffにすれば、フォーム全体で自動補完が無効化されます。

<input type="text" name="hoge" autocomplete="off">

上記のコードでは、値の入力の際に入力の自動補完がされないテキストボックスが表示されます。