<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>
表示例
※サンプルのため送信できません。
- サイト内検索