37563

[code]

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

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

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

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

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

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


CC BY-SA 3.0
2017-08-29T05:19:07.570
37558
2017-08-29T07:31:42.793
2017-08-29T07:31:42.793
22718
22718
question
html5
input要素を使ったマークアップについて


主観になってしまいますが。。。

入力項目を条件によって表示・非常時切り替えるのも普通だと思います。良くあるインターフェイスだと思います。表示非表示の切り替えについても、CSSでやってもJavaScriptでやっても良いと思います。

一番大事なのは、そのプロジェクト内で統一されているか？というトコです。  
この程度はCSS、この程度だからJavaScriptと判断するのって難しくないですか？ここで言われている`程度`も他者に分かるように伝えられますか？程度云々はそんなに大きな理由にならない気がします。  
例えば、他の項目はJavaScriptで表示/非表示の制御が行われているのに、当該項目だけCSSでやるというのはナンセンスだと思いますね。

読み込み速度を気にされていますが、そんな数文字の差でクリティカルな問題になるような環境なんでしょうか？今時のネットワークなら1000文字違っても体感はそんな気にならないと思いますが。。。  
限られた環境でなければそこまで心配することも無い気がします。最終的にminifyするんだろうし。。。

* * *

意見の一致しない方が居られるとのことですが、その方に『なぜこの方法がダメなのか？』理由をきちんと聞いてみた方が良いんでないかなぁ～？


CC BY-SA 3.0
2017-08-29T07:20:03.153
37561
2017-08-29T07:20:03.153
2383
37558
answer


[HTML5 4.10 Froms 4.10.1
Introduction](https://www.w3.org/TR/html5/forms.html#introduction-1)には次の一文があります。

> 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>`も正しい利用方法の一つだと思います。


CC BY-SA 3.0
2017-08-29T07:30:47.183
37563
2017-08-29T07:30:47.183
4236
37558
answer