html - フォーム外のボタンhtmlタグは有効ですか？

Question

サウンドクラウドでは、トラックの「アクション」ボタン（再投稿など）がすべてhtmlボタンタグであることに気づきました。さらに、それらはフォーム内になく、html5のフォームにバインドせず、フォームを送信しません（JavaScriptを介して処理されているようです）。これは有効なHTMLですか？フォームなしでボタンは存在できますか？それとも、これらのボタンを単純なクリック可能なdivにするだけですか？そして、それはスクリーンリーダーにとってどれほど有効/無効でしょうか？

Answer 1

要素は、テキストレベルのマークアップが表示される可能性のあるドキュメント本文の任意のbutton場所で有効です。このような要素は、要素との関係を持っている必要はありませんform。現在信頼できるリファレンスはHTML4.01仕様であり、正式なルールはDTDにありますが、ショートカットを使用してW3C Markup Validatorを使用して、ドキュメントが有効かどうかを確認できます。

フォームに関連付けられていない場合、button要素は要素とそれほど違いはありませんがspan（divデフォルトではブロックレベルです）、button特別なデフォルトのレンダリングがあります。ブラウザや支援ソフトウェアも特別なものとして扱われる可能性があり、クリックされたときに何らかのアクションをトリガーすることになっている要素にのみbutton使用するのが最も安全です。button逆に、このような要素はマークアップを使用して最もよく表現buttonされますが、他の方法（ほとんどの場合、画像またはCSS）でも視覚的にボタンのような要素を作成できます。

フォームの外では、button要素にはtype=buttonデフォルトがあります（そして、それが通常、その要素に適している唯一の要素ですtype）。これは、JavaScriptを介してのみ効果があることを意味します。これによって無効になることはありません。ただし、静的なHTMLコンテンツとしてではなく、JavaScriptを介してこのようなボタンを生成することを検討してください。これにより、スクリプトが無効になっている場合に、何もしない（有効であるが）紛らわしいボタンがなくなります。

以下のコメントで明確な質問に対処するには：

要素は;にbutton type=button似ています。input type=button違いは、後者にはコンテンツがなく、ボタンに表示されているテキストがvalue属性から取得されるのに対し、buttonコンテンツは「リッチ」（マークアップあり）である可能性があることです。

どちらの要素でも、それらを使用するとサーバーアクションが発生する場合（通常はAjax呼び出しを介して）、JavaScriptを無効にした状態でページがどのように機能するかを実際に尋ねることができます。しかし、この質問は無関係かもしれません（おそらく、ページはとにかくJavaScriptで実行されることになっているアプリケーションです）、そしていずれにせよ、アイデアに形式的に問題はありません。

なぜそれらが存在するのですか？著者の便宜とレガシーの理由から、私は言うでしょう。同様に、クライアント側のスクリプトなしではHTMLが機能しない可能性があり、JavaScriptの要素にイベントハンドラーを割り当てることができるのに、なぜHTMLにイベント属性があるのか​​と疑問に思うかもしれません。しかし、初期にはそれは不可能でした。現在でも、 JavaScriptで行うよりも、button要素またはonclick属性を使用する方が便利な場合があります（また、要素をボタンのように見せるために、CSS）。また、要素のブラウザ依存の外観を作成するという点もありbutton、input type=buttonほとんどのユーザーにとって、ブラウザのデフォルトのボタンスタイルのスタイルを持つものはすべてボタンとして認識されると主張されるかもしれません。

Answer 2

はい。非常に長い間以来。

whatwg.orgから：

この要素を使用できるコンテキスト：

言い回しの内容が予想される場所。

ajaxの時代では、ほとんどの入力はフォームを送信するだけで送信されるわけではありません。また、ほとんどのボタンは、認識可能なウィジェットを使用しているときにクリック時にアクションを実行するために使用されます。