input要素を使ったマークアップについて

投稿者: Anonymous

_x000D_

_x000D_

<style>_x000D_
.show {_x000D_
    display:none;_x000D_
}_x000D_
_x000D_
input:checked ~ .show {_x000D_
    display:block;_x000D_
}_x000D_
</style>_x000D_
_x000D_
<input id="on-off" type="checkbox">_x000D_
<label for="on-off">表示する</label>_x000D_
<p class="show">表示される(通常時display:none)</p>

_x000D_

_x000D_

_x000D_

ご回答頂けると幸いです。
このように何かを表示を切り替える際にinput要素を使用することは、
マークアップ的には間違いなのでしょうか。

最も適切な使用方法としてはformタグ内でデーター送信のために用いることだとは存じていますが、私は明らかな間違いではないと現時点では思っています。

input要素はformを構成する要素としてフォーム部品ともしばしば説明されていますが、
HTML Living StandardやMDNを見る限りではform内の使用に限定されている訳でもなく、
inputタグ単品での説明からはユーザーからの選択やコントロール、データを受ける要素という認識を受けました。

このようなマークアップに至った経緯を申しますと、この程度ならjavascriptで記述しなくてもいいのでは無いか?と思った次第です。script記述量は少しでも少ない方が読み込みの面でも良いと思いましたので…

同じエンジニアの方と意見が割れたので質問させていただきました。

解決

HTML5 4.10 Froms 4.10.1 Introductionには次の一文があります。

No client-side scripting is needed in many cases, though an API is available so that scripts can augment the user experience or use forms for purposes other than submitting data to a server.

参考訳: 多くの場合、クライアントサイドスクリプトは必要ありませんが、APIが存在するため、スクリプトによってユーザーエクスペリエンスを向上させたり、データをサーバーに送信する以外の目的でフォームを使用できます。

というわけで今回の<input>も正しい利用方法の一つだと思います。

回答者: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *