<button>と<input type=”button”>

HTMLの<button>要素のvalue属性は、ボタンのラベルとして使われる文字列を設定したり、フォーム送信時にサーバーに渡す値として使用したりするために使われます。具体的には、以下のような使い方があります。

1. 1. ボタンのラベル設定:value属性に設定された文字列は、ボタンに表示されるテキストとして扱われます。例えば、<button value="Submit">Submit</button>のように設定すると、ボタンには”Submit”と表示されます。
2. 2. フォーム送信時の値:value属性の値は、ボタンがクリックされた際にフォームデータの一部としてサーバーに送信されます。例えば、<button name="action" value="save">Save</button>のように設定すると、フォーム送信時にactionという名前でsaveという値がサーバーに送信されます。
3. 3. アクセシビリティ:value属性は、ボタンのアクセシブル説明としても機能します。画面読み上げソフトなどを使用するユーザーにとって、ボタンが何を表すのか理解するための情報を提供します。

value属性を使用する際には、以下の点に注意する必要があります。

• <input type="button">要素との違い:<input type="button">要素でもvalue属性が使用できますが、<button>要素とは異なり、value属性の値がボタンに表示されるテキストとしてのみ機能し、フォーム送信時の値として使用することはできません。
• <button>要素の内容:<button>要素の内容には、テキストだけでなく、画像や他のHTML要素を含めることができます。
• カスタム値:value属性にハイフン文字（–）を接頭辞として付加したカスタム値を指定することもできます。

これらの点を考慮して、適切なvalue属性を設定することで、ボタンの表示や機能、アクセシビリティを向上させることができます。

ボタンには常にtype=“button”をつけよう

ボタンを実装する際には、フォームのサブミットボタンでなければtype=“button”をつけた方が良いです。

HTMLでボタンを作るとき使うべき要素は ？？

フロントエンドエンジニアなら誰でも一回はボタンコンポーネントを作ったこと、もしくは使ったことがあるのではないかと思います。私もUI実装のときよく触ってました。