by shigemk2

当面は技術的なことしか書かない

フォームにおけるINPUT type="submit" と type="button"の違い

HTML

ボタンを押すとフォームの内容がPHPファイルに送信されて、
POSTデータを出力させるHTMLを作成してみましょう。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>Hoge</title>
  </head>
  <body>
    <form method="POST" action="./hoge.php">
      <p>
	名前：<input type="text" name="namae">
      </p>
      <p>
	<input type="submit" value="送信する">
	<input type="reset" value="入力内容をリセットする">
      </p>
    </form>
    <form method="POST" action="./hoge.php">
      <p>
	名前：<input type="text" name="namae">
      </p>
      <p>
	<button name="button2" value=""><font size="30">送信</font>する</button>
	<input type="reset" value="入力内容をリセットする">
      </p>
    </form>
  </body>
</html>

表示されるページはこんな感じです。

同じところ

  • ボタンをクリックするとデータが送信される
  • フォームにフォーカスが当たっている状態で、エンターキーを打鍵すると、データが送信される
  • ボタンにフォーカスが当たっている状態で、ボタンをクリックすると、データが送信される
  • ボタンにフォーカスが当たっている状態で、エンターキーを打鍵すると、データが送信される

違うところ

buttonはタグであり、囲むことが出来るので、ボタン上のテキスト表示をCSSで変えることが出来る。また画像を表示させることが出来る。