JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

HTMLフォームで送信ボタン（submitボタン）を使う方法をわかりやすく解説

HTMLフォームでは、送信ボタン（submitボタン）をクリックするだけで、フォームの内容が自動的に送信されます。フォームを活用すれば、ユーザーからの入力を簡単に受け取ることができます。

HTMLフォームと送信ボタンの基本

ユーザーの入力を受け取るには<form>タグを使用し、その中に各種フォーム要素を配置します。フォーム要素には、テキスト入力欄、ラジオボタン、送信ボタンなど、さまざまな種類があります。

送信ボタンも<input>タグで作成します。このとき、type属性に「submit」を指定するのがポイントです。これにより、クリックした瞬間にフォームデータが自動的に送信されるボタンになります。

送信ボタンでフォームを送信・リセットする方法

以下のコードを実行すると、送信ボタンでフォームを送信し、リセットボタンで入力内容を初期化できます。action属性には、送信ボタンをクリックした後に遷移させたいファイル（ここではPHPファイル）を指定します。また、getメソッドやpostメソッドを使うことで、入力された値をaction属性で指定したPHPファイルへ送信できます。

コード例

<!DOCTYPE html>
<html>
   <body>
      <form action="/new.php">
         Student Name:<br>
         <input type="text" name="sname">
         <br>
         Student Subject:<br>
         <input type="text" name="ssubject">
         <br>
         <input type="submit" value="Submit">
         <input type="reset" value="Reset">
      </form>
   </body>
</html>

コードのポイント

  • action属性： フォームの送信先となるURL（ファイル）を指定します。上記の例では「/new.php」に入力データが送られます。
  • type="submit"： クリックするとフォームが送信されるボタンを作成します。value属性の値がボタン表面の表示名になります。
  • type="reset"： クリックするとフォーム内の入力内容がすべて初期状態に戻るリセットボタンを作成します。
  • name属性： 各入力欄に名前を付けることで、送信先のPHPファイル側で値を受け取れるようになります。

なお、HTML5以降では<button type="submit">タグを使って送信ボタンを作成することも可能です。<button>タグは内部にテキストや画像を自由に配置できるため、デザイン性の高いボタンを作りたい場合に便利です。用途に応じて<input>タグと使い分けるとよいでしょう。

  1. HTMLの週入力タイプ（type="week"）の使い方をわかりやすく解説

    HTMLでは、<input type=week> を使用することで、週入力タイプ（ウィーク入力フィールド）を実装できます。この入力タイプを使うと、ユーザーが「年」と「週」を選択できるようになります。 週入力フィールドにフォーカスして入力を行うと、日付選択用のポップアップ（ピッカー）が表示され、そこから週と年を簡単に選択できます。 ブラウザ対応状況に注意 注意： 週入力タイプ（type=week）は、Firefox や Internet Explorer ではサポートされていません。動作が確認されているのは Google Chrome などの一部のブラウザです。実装の際は、対象ブラウ

  2. HTMLのformmethod属性の使い方を解説！フォーム送信方法を個別に指定する方法

    formmethod属性とは？formmethod属性は、フォームデータを送信する際に使用するHTTPメソッド（GETまたはPOST）を指定するためのHTML属性です。この属性は、type=submitおよびtype=imageのinput要素と組み合わせて使用されます。formmethod属性の最大の特徴は、form要素自体に設定されているmethod属性を上書き（オーバーライド）できるという点です。これにより、1つのフォーム内で複数の送信ボタンを配置し、ボタンごとに異なるHTTPメソッドや送信先を指定することが可能になります。主な特徴フォーム全体ではなく、特定の送信ボタン単位でHTTPメソ