HTMLのbutton要素におけるname属性の使い方を徹底解説
<button>要素のname属性は、ボタンに名前を設定するために使用される属性です。複数のボタンに同じ名前を付けることも可能ですが、name属性とvalue属性を組み合わせることで、同じ名前のボタンからでもそれぞれ異なる値を送信できます。
これは特に、フォーム内で複数の送信ボタンを配置し、押されたボタンによって処理を切り替えたい場合に非常に便利です。
基本構文
<button name="btn_name">
上記の構文において、btn_name の部分にはボタンの任意の名前を指定します。この名前はフォーム送信時のパラメータ名としてサーバー側に渡されます。
使用例
それでは、実際に<button>要素のname属性を使ったサンプルコードを見てみましょう。以下の例では、同じ「details」という名前を持つ3つの送信ボタンを配置しています。
<!DOCTYPE html> <html> <body> <form action="" method="get"> 従業員の詳細情報を取得：<br><br> <button name="details" type="submit" value="addr">住所</button> <button name="details" type="submit" value="ph">電話番号</button> <button name="details" type="submit" value="appraisal">昇給率</button> </form> </body> </html>
実行結果
動作の解説
上記の例では、3つのボタンすべてに同じ名前「details」が設定されていますが、押されたボタンに応じて異なる値が送信されます。
<button name="details" type="submit" value="addr">住所</button> <button name="details" type="submit" value="ph">電話番号</button> <button name="details" type="submit" value="appraisal">昇給率</button>
具体的には、以下のような挙動になります。
- 「住所」ボタンをクリックした場合：
?details=addrが送信される - 「電話番号」ボタンをクリックした場合：
?details=phが送信される - 「昇給率」ボタンをクリックした場合：
?details=appraisalが送信される
このように、name属性を共通化しつつvalue属性で値を切り分けることで、サーバー側では受け取った値を判定し、「住所・電話番号・昇給率」など、要求された情報の種類に応じた処理を行うことができます。ラジオボタンのようにグループ化された操作をボタンで実現したい場合にも、この手法は有効です。
-
HTMLのstart属性とは？順序付きリストの開始番号を指定する方法
HTMLのstart属性は、順序付きリスト（<ol>要素）において、最初のリスト項目に付与される番号（開始値）を指定するための属性です。通常、順序付きリストは「1」から自動的に採番されますが、start属性を使うことで、任意の番号からリストを開始させることができます。 構文 start属性の基本的な構文は以下のとおりです。 <ol start="number"></ol> start属性の値には正の整数を指定します。例えば「5」を指定すれば、リストは「5、6、7…」というように採番されます。 使用例 それでは、HTMLのstart属性を使
-
HTMLのrowspan属性とは？テーブルセルの行結合の使い方を解説
HTMLのrowspan属性は、表（テーブル）のセルが縦方向にまたぐ行数を指定するための属性です。この属性を使用することで、複数の行にまたがるセルを作成でき、より柔軟なテーブルレイアウトを実現できます。rowspan属性を適用できるのは、td要素またはth要素のみです。それ以外のHTML要素には使用できない点に注意しましょう。rowspan属性の構文rowspan属性の基本的な構文は以下のとおりです。<タグ名 rowspan=数値></タグ名>「数値」には、セルがまたぐ行数を整数で指定します。たとえば「rowspan=2」と指定すると、そのセルは2行分の高さを持つことに