質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.81%

<button>か? <input type="checkbox">か? 使い分けを知りたいです

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 461

huwatoro

score 19

<button>か? <input type="checkbox">か?

その使い分けについて、基準がわからず困っっっています。

以下の例を含め、<button>か? <input type="checkbox">か? という問題について、みなさまのご見解をお聞かせ頂けませんでしょうか。

例:twitter

たとえばTwitterのフォローボタンは<button>ですが、これは<input type="checkbox">の方が良いのではないでしょうか?

なぜなら、

<button>
→「フォロー中かどうか」という状態をデータ属性などで作らなければならない。

<input type="checkbox">
→作らなくてもチェック状態は取得できる。

ので、<input type="checkbox">の方が手間が省けるのではと考えました。

例:teratial

teratailの通知アイコンなんで<div>ですけど、これは役割が明示されず、あまり良くないですよね?
それとも簡略されていてむしろ良いのでしょうか?

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

checkベストアンサー

+4

役割分担

例に挙げられたteratail,twitterのフォロー/アンフォローUIは最適解ではないと考えています。
それぞれの役割については、s8_chu さんとほぼ同じ考えを持っています。

タグ 役割
<input type="checkbox">  フォーム(設定)の入力を表す  
<button>  (type属性値がないなら)、フォーム(設定)の送信を表す 

問題はteratail,twitterがこれらの役割を一つの要素でまかなっている事にあります。
<button> を使っているのですから、フォロー/アンフォローのリクエストを送るのは問題ないでしょう。
しかし、現在のフォロー状態を <button> で表すのは不適切と言わざるを得ません。

問題A. 押せるボタンである事が見た目から分からない

「フォロー中」を押したらフォロー解除されるという挙動はボタンを押してみるまで分かりません。

問題B. 表示されている内容が何を表しているのか分からない

teratail,twitterでは [フォロー中] と表示されているボタンにマウスポインタを合わせれば、[解除] と表示されるので、勘のいいひとなら分かるでしょう。
しかし、次の点において良いUIとは思えません。

  • 「ボタンかもしれない」と思われなければ、マウスポインタを合わせない
  • スマートフォンのタッチUIでは確認がしづらい
  • 音声ブラウザに配慮がない

teratail,twitterはそうではありませんが、某サイトでは

  • [follow], [unfollow] をトグルする
  • [follow] をクリックするとフォローされ、[unfollow] をクリックするとアンフォローされる

という仕様でした。
[unfollow] と表示されているので、フォローしていない状態だと思ってボタンをクリックすると、フォローが解除されてしまいます
素直に英語を読めば、「follow(フォローせよ)」「unfollow(アンフォローせよ)」なのだから分かるだろう、という考えもあるかもしれませんが、現行設定を命令文から反転させて認識するのは回りくどく感じてしまいます。

解決策

「現行設定の表示」と「設定変更ボタン」は分割するのが適切と思います。

<span class="follow-status">フォロー中</span>
<button type="button" name="follow-status" value="false">フォロー解除する</button>

おそらく、狭い画面のスマートフォン画面用に考案されたUIですが、セマンティクス的には間違ったUIであると私は思います。

Re: ayaaya さん

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/05/12 08:05

    まさに悩んでいた点をきちんと整理して頂き、その上で一般的な使い方からご見解まで、完璧なご回答です。ありがとうございました。

    キャンセル

+4

たとえばTwitterのフォローボタンは<button>ですが、これは<input type="checkbox">の方が良いのではないでしょうか? 

input 要素のチェックボックスは、一般的には、状態の選択という入力を行なうために用いられ、選択に伴って実行される動作はありません。たとえば、「チェックボックスをクリックしたらアカウントの登録が完了する」といった動作をする Web サイトはあまり存在しないと思います。

The input element represents a type data field, usually with a form control to allow the user to edit the data.

参考: HTML Standard - § 4.10.5 The input element

一方でボタンは、一般的には、押下することで特定の動作を実行するものです。

GUIのボタンは、現実世界における押しボタンと同様に「押す」ことで何かの操作を行なう為のコンピュータ画面上の表現である。

参考: ボタン (GUI) - Wikipedia

Twitter のフォローボタンが行ないたいことは、ただの状態の切り替えではなく、「フォローする」、「フォローを解除する」という動作です。そのため、状態を選択するだけのチェックボックスではなく、何かの動作を起こすものとして、 button 要素を使用するほうがより望ましい、と考えたのかもしれません。


teratailの通知アイコンなんで<div>ですけど、これは役割が明示されず、あまり良くないですよね?

検討の結果、「通知アイコンの部分はボタンではないため、 button 要素は不適切」という結論になったのか、通常はすべて div 要素で記述するという規則になっているのか、本当のところはわかりません。

teratail にお問い合わせすることで、なぜ div 要素が使われているのかがわかるかもしれません。

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/05/12 08:06

    なるほど動作にあった機能を理解しておかなければいけませんね。ご丁寧にありがとうございます。参考にさせて頂きます。

    キャンセル

0

<input type="checkbox"> だと四角のチェックボックスが出てしまい、
これのデザインを変えるなると余計に手間がかかるので、
デザイン性をもたせる部分であればbuttonタグなどがよく利用されます。

あとはサイト内で使っているJavascriptライブラリ(TwitterだとReact.js)によっては
そちらで状態管理と見た目の変更を同時にやれるので、buttonタグの方が作りやすい、などもあると思います。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/05/11 09:17

    フォーム送信ボタンとして使う(<button type="submit">)、などでなければ、
    ただのhtmlブロックなので、divもbuttonも大差ないといえば無いんですよね。

    teratailの場合、ブロック要素は基本divで作って、
    「コメントする」のボタンなど、送信するものに関してはbuttonタグを使う、となっていそうですね。

    キャンセル

  • 2019/05/11 09:40

    @yasutomiさん
    通知アイコンです

    キャンセル

  • 2019/05/11 09:41

    @Eggpanさん
    送信かどうかでわける、なるほどありですね。ありがとうございます。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.81%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る