－HTML Living Standard リファレンス

<input type=submit> …… フォーム送信ボタンを表す
Internet Explorer

<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>はありません。

■関連項目

<form> …… フォームを表す
<label> …… フォーム入力欄のキャプションを表す
<input> …… フォーム入力欄を表す

<input type=hidden> …… 非表示データを表す
<input type=text> …… 1行プレーンテキストの入力欄を表す
<input type=search> …… 検索用テキストの入力欄を表す
<input type=tel> …… 電話番号の入力欄を表す
<input type=url> …… URLの入力欄を表す
<input type=email> …… 電子メールアドレスの入力欄を表す
<input type=password> …… パスワードの入力欄を表す
<input type=date> …… 日付の入力欄を表す
<input type=month> …… 月の入力欄を表す
<input type=week> …… 週の入力欄を表す
<input type=time> …… 時刻の入力欄を表す
<input type=datetime-local> …… ローカル日時の入力欄を表す
<input type=number> …… 数値の入力欄を表す
<input type=range> …… レンジ入力欄を表す
<input type=color> …… 色の入力欄を表す
<input type=checkbox> …… チェックボックスの入力欄を表す
<input type=radio> …… ラジオボタンの入力欄を表す
<input type=file> …… 選択ファイルを表す
<input type=submit> …… フォーム送信ボタンを表す
<input type=image> …… 画像ボタンを表す
<input type=reset> …… リセットボタンを表す
<input type=button> …… 汎用ボタンを表す
<input maxlength=文字数> …… 入力を許容する最大文字数を指定する
<input minlength=文字数> …… 入力を許容する最小文字数を指定する
<input size=サイズ> …… 入力欄のサイズを指定する
<input readonly> …… 読み取り専用にする
<input required> …… 入力必須にする
<input multiple> …… 複数選択可にする
<input pattern=入力パターン> …… 入力を許容するパターンを指定する
<input min=数値> …… 入力を許容する最小値を指定する
<input max=数値> …… 入力を許容する最大値を指定する
<input step=ステップ値> …… 入力のステップ値を指定する
<input list=データリストID> …… データリストを紐づける
<input placeholder=入力ヒント> …… 入力の際のヒントを表す

<button> …… ボタンを表す
<select> …… セレクトボックスを表す
<datalist> …… 選択肢のデータリストを表す
<optgroup> …… 選択肢グループを表す
<option> …… 選択肢を表す
<textarea> …… 複数行プレーンテキストの入力欄を表す
<output> …… 実行結果の出力を表す
<progress> …… タスクの進行状況を表す
<meter> …… 既知の範囲内の測定値を表す
<fieldset> …… フォームグループを表す
<legend> …… フォームグループのキャプションを表す

★HTML Living Standard リファレンス

■属性

■使用例

HTMLソース

ブラウザ上の表示

■使用例

HTMLソース

ブラウザ上の表示

■使用例

HTMLソース

ブラウザ上の表示

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

■関連項目

Lorem Ipsum is simply dummy text