2017年9月28日(木)
[HTML5] <input>タグにおけるdisabled属性とreadonly属性 #HTML5&CSS3&JavaScript <input type="text">タグは、フォームで文字入力できるフィールドを作成します。
そのフィールドで、入力させない設定は、disabled属性またはreadonly属性で行いますが、挙動が異なります。まず、見た目のレンダリングが異なりますが、最も違うところは、データを送信するか否かです。
--
【disabled属性】選択不能指定
(1)フォーカス
・入力：×
・テキスト選択：定義では×、Firefox以外は○
(2)コントロール（送信）：×
(3)タブ移動：×
(4)レンダリング：ブラウザに依存（鼠色になる）
(5)動的に変更：JavaScriptで可能
【readonly属性】読み出し専用指定
(1)フォーカス
・入力：×
・テキスト選択：○
(2)コントロール（送信）：○
(3)タブ移動：○
(4)レンダリング：ブラウザに依存（通常と同じ）
(5)動的に変更：JavaScriptで可能
--
-- フォーム入力・送信
HTMLファイル --
<form action="input.php" method="post">
<p>通常<br>
<input type="text" name="n_normal" value="あいうえお"></p>
<p>disabled属性<br>
<input type="text" name="n_disabled" value="かきくけこ" disabled></p>
<p>readonly属性<br>
<input type="text" name="n_readonly" value="さしすせそ" readonly></p>
<p><input type="submit" value="送信"></p>
</form>
--
↓
-- フォーム受け手
PHPファイル --
<?php
echo'<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>フォーム送信状況</title>
</head>
<body>
<h2>◆フォーム送信状況◆</h2>';
foreach($_POST as $key => $val){
echo'<p>'.$key.'<br> '.$val.'</p>';
}
echo'
<hr><hr>
</body>
</html>';
?>
--
↓
-- 表示例 --
◆フォーム送信状況◆
n_normal
あいうえお
n_readonly
さしすせそ
--
http://neconote.jp/prg/input.html
お問い合わせ