Sep.14th, 2020
＃
“disabled”属性について
“disabled”属性は“button”要素でボタンを無効化する属性です。
“disabled”属性を指定していない場合でも祖先要素となる“fieldset”要素に“disabled”属性が指定されている時もボタンは無効化されます。ただし、“button”要素が“fieldset”要素の子要素となる最初の“legend”要素の子孫要素である場合は除きます。
＃
＃
サンプルコード
属性値を省略
<form method="post" action="sample-formtag2.php" target="_blank">
<fieldset>
<legend>好きな果物</legend>
<p>
<label><input type="checkbox" name="fruit[]" value="甘蕉">甘蕉</label>
<label><input type="checkbox" name="fruit[]" value="林檎">林檎</label>
<label><input type="checkbox" name="fruit[]" value="甜瓜">甜瓜</label>
<label><input type="checkbox" name="fruit[]" value="苺">苺</label>
<label><input type="checkbox" name="fruit[]" value="桃">桃</label>
</p>
</fieldset>
<fieldset>
<legend>一番好きな果物</legend>
<p>
<label><input type="radio" name="no1fruit" value="甘蕉">甘蕉</label>
<label><input type="radio" name="no1fruit" value="林檎">林檎</label>
<label><input type="radio" name="no1fruit" value="甜瓜">甜瓜</label>
<label><input type="radio" name="no1fruit" value="苺">苺</label>
<label><input type="radio" name="no1fruit" value="桃">桃</label>
</p>
</fieldset>
<fieldset>
<legend>あなたの情報</legend>
<p><label>居住地域：<input type="text" name="area"></label></p>
<p><label>年齢：<input type="number" name="age"></label></p>
</fieldset>
<p>
<button type="submit">送信する</button>
<button type="reset" disabled>やり直す</button>
</p>
</form>
＊送信すると入力内容が表示されます。
属性値を省略しない
<form method="post" action="sample-formtag2.php" target="_blank">
<fieldset>
<legend>好きな果物</legend>
<p>
<label><input type="checkbox" name="fruit[]" value="甘蕉">甘蕉</label>
<label><input type="checkbox" name="fruit[]" value="林檎">林檎</label>
<label><input type="checkbox" name="fruit[]" value="甜瓜">甜瓜</label>
<label><input type="checkbox" name="fruit[]" value="苺">苺</label>
<label><input type="checkbox" name="fruit[]" value="桃">桃</label>
</p>
</fieldset>
<fieldset>
<legend>一番好きな果物</legend>
<p>
<label><input type="radio" name="no1fruit" value="甘蕉">甘蕉</label>
<label><input type="radio" name="no1fruit" value="林檎">林檎</label>
<label><input type="radio" name="no1fruit" value="甜瓜">甜瓜</label>
<label><input type="radio" name="no1fruit" value="苺">苺</label>
<label><input type="radio" name="no1fruit" value="桃">桃</label>
</p>
</fieldset>
<fieldset>
<legend>あなたの情報</legend>
<p><label>居住地域：<input type="text" name="area"></label></p>
<p><label>年齢：<input type="number" name="age"></label></p>
</fieldset>
<p>
<button type="submit">送信する</button>
<button type="reset" disabled="disabled">やり直す</button>
</p>
</form>
