1. Home
  2. HTMLタグ
  3. フォームタグ
  4. 送信ボタンとリセットボタンを作る

送信ボタンとリセットボタンを作る


<input type="submit"> <input type="reset">


input要素type="submit" を指定すると送信ボタンを、type="reset" を指定するとリセットボタンを作成できます。



<input type="submit" value="送信する">

<input type="reset" value="リセット">


属性 説明
type="" submit 送信ボタンを作成
reset リセットボタンを作成
name="" 文字列 部品の名前を指定
value="" 文字列 ボタンに表示される文字列を指定

■type="submit" (送信ボタンを作成)

type属性の値に submit を指定すると、送信ボタンを作成できます。

■type="reset" (リセットボタンを作成)

type属性の値に reset を指定すると、リセットボタンを作成できます。

■name="" (部品の名前を指定)

フォーム部品を識別するための名前を指定します。

この属性の値は、value属性の値とセットで送信されることになります。

■value="" (ボタンに表示される文字列を指定)

この属性の値が、ボタン上に表示されることになります。

この属性を指定しなかった場合は、デフォルトの文字列が表示されます。(デフォルトの文字列は、ブラウザにより異なります)

[ボタンの表示例]

【送信ボタンとリセットボタン】

  • 送信ボタン … 入力した内容を送信するためのボタンです。
  • リセットボタン … 入力した内容をキャンセルして、初期状態に戻すためのボタンです。

【送信ボタンが複数ある場合】

状況によっては、複数の送信ボタンを使用する場合があります。(押されたボタンにより処理を振分ける場合など)

そのような場合には、各送信ボタンに name="" を追加して、それぞれの部品名を指定しておきます。

<input type="submit" name="button1" value="送信する">


【その他の属性】

以下の属性で、部品の無効化を指定することができます。(主に、JavaScript等と組み合わせて使用することになります)

属性 説明
disabled 値は不要 部品を無効化する

■disabled (部品を無効化する)

この属性が指定されたボタンは、クリックすることができなくなります。

メモ

ボタンのサイズや背景色等は、スタイルシートでアレンジすることができます。指定方法の詳細は「関連ページ」をご覧ください。


使用例

■value属性を指定した例


<form method="post" action="example.cgi">

<p><input type="text" name="example" size="50"></p>

<p>
<input type="submit" value="送信する">
<input type="reset" value="リセット">
</p>

</form>

表示例

※サンプルのため送信できません。


■value属性を指定しない例


<form method="post" action="example.cgi">

<p><input type="text" name="example" size="50"></p>

<p>
<input type="submit">
<input type="reset">
</p>

</form>

表示例

※サンプルのため送信できません。


■複数の送信ボタンを使用した例


<form method="post" action="example.cgi">

<p><input type="text" name="example" size="50"></p>

<p>
<input type="submit" name="button1" value="送信ボタン1">
<input type="submit" name="button2" value="送信ボタン2">
<input type="submit" name="button3" value="送信ボタン3">
<input type="reset" value="リセット">
</p>

</form>

表示例

※サンプルのため送信できません。


■ボタンを無効化した例


<form method="post" action="example.cgi">

<p><input type="text" name="example" size="50"></p>

<p>
<input type="submit" value="送信する" disabled>
<input type="reset" value="リセット" disabled>
</p>

</form>

表示例

※サンプルのため送信できません。


フォームタグ

ページの先頭へ