フォームの送信ボタンに名前（name属性）を付ける
フロントエンド・エンジニア 富永HTMLのフォームを作る際、送信ボタンには名前（name属性）を設定することができます。
名前を設定することで、登録フォームの確認画面で「入力画面へ戻る」「確定する」の2つのボタンがあるときなど、フォーム内に複数の送信ボタンが存在する場合に、どのボタンが押されたのかサーバー側で判別することが可能になります。
まず、送信ボタンを作るには以下の3つの方法があります。
- button要素の Submit Button（type=submit）
- input要素の Submit Button（type=submit）
- input要素の Image Button（type=image）
通常、
<button type="submit" name="button-submit" value="exec">確定する</button>
のようにボタンに名前（name）と値（value）を設定すると、 button-submit=exec が送信されますが、名前だけ設定して値がない場合は要素とタイプによって送信値が異なります。
たとえば、
<button type="submit" name="button-submit">確定する</button>
<input type="submit" name="input-submit"/>
のような2つのボタンがあった場合、button要素は button-submit= と値が空になりますが、input要素は input-submit=送信 のようになります（"送信"の文言はブラウザによって異なります）。
このことはHTML仕様書にも明記されており、button要素は
The element's value is the value of the element's value attribute, if there is one, or the empty string otherwise.
のように空文字列と定められている一方、input要素（type=submit）の場合は
If the element has a value attribute, the button's label must be the value of that attribute; otherwise, it must be an implementation-defined string that means "Submit" or some such.
と、 "Submit" 等の文字列になるとされています。
なお、 Internet Explorer 7 以前や、Prestoエンジンを使用したバージョン12以前の Opera のような古いブラウザはbutton要素であっても何らかの文字列を送信してしまうので、注意が必要です（Opera 12 は value="" と明示的に空文字列を指定することで回避可能）。
もうひとつの Image Button は特殊で、value属性を設定できない一方で、ボタンの名前に x, y の座標を付与したものがそれぞれ送信されます。
<input type="image" src="exec.png" alt="確定する" name="input-image"/>
このボタンの画像上の座標（38, 14）をクリックすると、 input-image.x=38&input-image.y=14 が送られる感じですね。
以上のように「名前あり、値なし」の場合は、3タイプのボタンそれぞれ挙動が異なる状態にあります。それ以外のケースでも、 Image Button はvalue属性値でなく座標位置を送るという挙動をするため、どのボタンを採用するかは CSS の当てやすさだけでなく、サーバー側のプログラムのことも考慮して決定することが必要です。