トップページ  > HTML Living Standard  > <input>  > type=submit

★HTML Living Standard リファレンス

<input type=submit> …… フォーム送信ボタンを表す
Internet Explorer Microsoft Edge Google Chrome Safari Firefox Opera
広告

<input type=submit>は、フォーム送信ボタンを表す際に使用します。

input要素のtype属性の値に submit を指定すると、 フォーム送信ボタンを表します。

formaction属性、formenctype属性、formmethod属性、formnovalidate属性、formtarget属性は、 フォーム送信コントロールに使用する属性です。

■属性

name属性
フォーム部品に名前をつけます。
value属性
要素の値を表します。 input type=submitの場合、value属性で指定した値はボタンのラベルに使用されます。 value属性を省略すると、ボタンのラベルはブラウザがデフォルト表示する「送信」などの文字列となります。
formaction属性
フォーム送信に使用するURLを指定します。
formenctype属性
フォーム送信に使用するエントリリストのエンコードタイプを指定します。
formmethod属性
フォーム送信に使用するバリアントを指定します。
formnovalidate属性
フォーム送信時に入力必須などの制約の検証を省略します。 formnovalidate属性を指定すると、フォーム入力欄に関する制約の検証をしない送信ボタンを作成できます。
formtarget属性
フォーム送信のターゲット先を指定します。

■使用例

以下のサンプルは、input要素のtype属性の値に submit を指定して、フォームの送信ボタンを作成しています。 このinput要素はvalue属性を指定していないので、ボタンのラベルはブラウザによってデフォルト表示されます。 一般的なブラウザでは「送信」と表示されるようですが、ブラウザの種類やバージョンによっては別の表記となるかもしれません。

HTMLソース

<form method="get" action="search.cgi">
 <p><label>検索ワード: <input type=search name="q"></label></p>
 <p><input type=submit></p>
</form>
↓↓↓

ブラウザ上の表示

■使用例

以下のサンプルでは、input要素のtype属性の値に submit を指定して、フォームの送信ボタンを作成しています。 このinput要素はvalue属性の値に「▶ 再生」を指定しているため、ボタンのラベルにその値が使用されます。

HTMLソース

<form action="courseselector.dll" method="get">
 <p>視聴コースを選択して再生ボタンを押してください。
 <p><label>コース:
  <select name="c">
   <optgroup label="8.01 物理 I: 古典力学">
    <option value="8.01.1">講義 01: パワーズ・オブ・テン
    <option value="8.01.2">講義 02: 運動学
    <option value="8.01.3">講義 03: ベクトル
   <optgroup label="8.02 電気と磁気">
    <option value="8.02.1">講義 01: 世界を結びつけているもの
    <option value="8.02.2">講義 02: 電界
    <option value="8.02.3">講義 03: 電気束
   <optgroup label="8.03 物理 III: 振動と波">
    <option value="8.03.1">講義 01: 周期現象
    <option value="8.03.2">講義 02: うなり
    <option value="8.03.3">講義 03: 強制振動
  </select>
 </label>
 <p><input type=submit value="▶ 再生">
</form>
↓↓↓

ブラウザ上の表示

視聴コースを選択して再生ボタンを押してください。

■使用例

以下のサンプルには、2つの入力必須フィールドと、2つのSubmitボタンがあります。 「論文を提出する」ボタンでフォーム送信するには、2つの必須フィールドに入力する必要があります。

一方、「保存」ボタンにはformnovalidate属性が指定されているので、フォーム送信時の検証が省略されます。 データを完全に入力していなくても「保存」ボタンでフォーム送信できるので、 ユーザーが入力途中の状態を保存しながら続きを入力できるようにできます。

HTMLソース

<form action="editor.cgi" method="post">
 <p><label>名前: <input required name=fn></label></p>
 <p><label>論文: <textarea required name=essay></textarea></label></p>
 <p><input type=submit name=submit value="論文を提出する"></p>
 <p><input type=submit formnovalidate name=save value="保存"></p>
</form>
↓↓↓

ブラウザ上の表示

input要素の終了タグについて

HTMLの仕様では、input要素には終了タグ</input>はありません。

■関連項目

広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ