HTML & CSS

レシピ

フォーム

入力できないフォームを設定する

input要素のreadonly属性を使った、値の編集ができない入力項目の設定方法を解説します。

この記事のポイント

  • あえて編集できない項目を設定する
  • readonly属性とdisabled属性の違いが分かる

フォームの値を編集できないようにする

フォームでは値があらかじめ入力された状態で、編集をできないようにしたいことがあります。
その場合は、input要素readonly属性を指定します。

表示例
表示例

コード例

<h2>お問い合わせフォーム</h2>
<form action="" method="post">
	<div>
		<label for="i_event">お申し込みされるイベント</label>
		<input id="i_event" type="text" name="event" value="第3回 読書会" readonly>
	</div>
	<div>
		<label for="i_name">お名前</label>
		<input id="i_name" type="text" name="name" value="" placeholder="山田 太郎" required>
	</div>
	<div>
		<label for="i_furigana">フリガナ</label>
		<input id="i_furigana" type="text" name="furigana" value="" placeholder="ヤマダ タロウ" required>
	</div>
	<div>
		<label for="t_message">お問い合わせ内容</label>
		<textarea id="t_message" name="message" placeholder="こちらにお問い合わせ内容を入力してください。"></textarea>
	</div>
	<div class="btn_area">
		<input type="submit" name="btn_confirm" value="入力内容を確認する">
	</div>
</form>

もし表示をする必要がなく既定値の送信だけできれば良い場合は、readonly属性ではなくinput要素に「type=hidden」を指定した非表示の入力項目を設置します。
詳しくは、「非表示のデータ入力欄を設置する」をご覧ください。

readonly属性とdisabled属性の違い

readonly属性と同じように、値を編集できないようにするdisabled属性があります。
2つの属性の大きな違いは値を送信するか、送信しないかです。
readonly属性は値を送信しますが、disabled属性は送信しません。

そのため、既定値として他の入力項目と同様に入力値を送信したい場合はreadonly属性を、入力例の見本で送信する必要がない項目についてはdisabled属性という形で使い分けることができます。

disabled属性の使用例
disabled属性の使用例

disabled属性のコード例

<div>
	<label for="i_example">入力例</label>
	<input id="i_example" type="text" name="example" value="山田 太郎" disabled>
</div>

この「入力例」として表示されている「山田 太郎」はフォームの値として送信されません。

こちらの記事は役に立ちましたか?

ありがとうございます。
もしよろしければ、あわせてフィードバックや要望などをご入力ください。

ありがとうございます。
コメントを送信しました。