ITコラム

プログラミングノウハウ

2026.07.10

#HTML入門

HTML【フォーム】5～input要素（10）ボタン（submit、reset、button）

この記事の監修者

Kay Arai

プログラマカレッジ講師（元エンジニア）
未経験からプログラミングを学ぶ受講生の方を、数多くサポートしてきました。「プログラミングって難しそう・・」その気持ち、よく分かります。私自身、最初はエラーの意味も分からず心が折れそうになりました。だからこそ、つまずきやすいポイントを一つひとつ丁寧にご説明するよう心がけています。楽しみながら、一緒に「できた!」を増やしていきましょう。

HTMLでは、文字を入力する欄だけでなく、「送信」や「リセット」などのボタンも作ることができます。ボタンはbutton要素で作ることもできますが、ここではまず、input要素での作り方をみてみましょう。

この記事ではHTML初心者の方に向けて、input要素で作るボタンの基本、主な属性、submit・reset・button の使い分けを、サンプルコード付きでやさしく解説します。

フォームについては、こちらのページもご参照下さい。

なお、未経験からITエンジニアへの就職に興味がある方や未経験からプログラミングを効率よく学びたいと考えている方は、就職率98.3％で受講料無料のプログラミングスクールプログラマカレッジもおすすめです。

最終更新日：2026年7月10日

1. ボタンの部品
2. submitでボタンを作成
3. resetでボタンを作成
4. buttonでボタンを作成
5. HTMLのinput要素について、よくある質問
6. まとめ

1. ボタンの部品

<input>要素の「type属性」を以下のように指定することで、様々なボタンを作ることができます。※<input type=”xxxxx”>の形で記述

type属性の値と、作られる部品の種類は次の通りです。

	type属性の値	部品の種類
input要素で作るボタンの部品	type　=　”submit”	データを送信するためのボタン
	type　=　”reset”	入力データをリセットするためのボタン
	type　=　”button”	用途に応じた自由なボタン

ボタン部品も、type属性以外の属性を使うと、さらに機能を追加することができます。

autofocus属性	HTML文書のロード後すぐに、ボタンが選択された状態にする
form属性	form要素の外にボタンを配置して、特定のフォームに関連付けることができる
disabled属性	使用不可の状態にする（ボタンを押せない状態にする）
formaction属性（type=”submit”の場合のみ）	form要素のaction属性を上書きして、送信先をボタンごとに変えることができる
formmethod属性（type=”submit”の場合のみ）	form要素のmethod属性を上書きして、送信方法をボタンごとに変えることができる
formenctype属性（type=”submit”の場合のみ）	form要素のenctype属性を上書きする
formtarget属性（type=”submit”の場合のみ）	form要素のtarget属性を上書きする
formnovalidate属性（type=”submit”の場合のみ）	form要素でnovalidate属性を指定していない場合（バリデート有）に、送信ボタンでバリデート無しの状態にする（フォームに入力チェックがあるときに、その送信ボタンだけ入力チェックなしで送信する）

▲目次へ戻る

2. submitでボタンを作成

■ <input type=”submit”>で送信ボタンを作成すると、ブラウザで次のように表示されます。

上の表示に対するhtmlコードは、以下の通りです。

<input type="submit">

submit は、フォームの内容を送信するためのボタンです。単独で使う場合は、name属性を指定しなくても動作します。

value属性を使うと、ボタンに表示するテキストを指定できます。

上の表示に対するhtmlコードは、以下の通りです。

<input type="submit" value="ここを押すとデータが送信されます！">

■ formnovalidate属性を指定しない場合は、必須入力項目に対してバリデート（入力チェック）が働き、「このフィールドを入力してください」などのメッセージが表示されます。

上の表示に対するhtmlコードは、以下の通りです。

<form>
ID：<input type="text" name="id" required>
<input type="submit">
</form>

このコード例では、input type=”text” で作成した入力欄に required属性が指定されているため、必須入力項目になっています。
form要素にも input type=”submit” にも novalidate属性を指定していないので、ブラウザ標準の入力チェックが有効になっており、何も入力せずに送信ボタンを押すと、入力をうながすメッセージが表示されます。

▲目次へ戻る

3. resetでボタンを作成

type=”reset”で作成されるリセットボタンは、フォームの入力内容を全てリセットする（初期状態に戻す）機能を持っています。
ユーザーが入力してくれた情報が一瞬にして消去されてしまうということを念頭に置いて、慎重に作成する必要があります。

<input type=”reset”>でリセットボタンを作成すると、ブラウザでは次のように表示されます。

上の表示に対するhtmlコードは、以下の通りです。

<input type="reset">

submitと同様に、value属性で表示用のテキストを指定できます。

下の記入欄に文字を入力して、リセットボタンを押すと、入力内容が削除されます。

上の表示に対するhtmlコードは、以下の通りです。

<form>
<input type="text" name="test" placeholder="文字入力→リセット">
<input type="reset">
</form>

現在のWebサイトでは、誤操作による入力内容の消失を防ぐため、リセットボタンを設置しないケースも多くなっています。

▲目次へ戻る

4. buttonでボタンを作成

データを送信する場合や、入力内容をリセットする場合以外にも、ボタンに特定の機能を持たせたいことがあります。たとえば、次のページへ移動したり、メッセージを表示したりするときです。

そのようなときに、type=”button” を使います。type=”button”でボタンを作成する場合には、submit（送信）やreset（リセット）のようにデフォルトでボタンにテキストが表示されないので、value属性で表示用のテキストを指定します。

上の表示に対するhtmlコードは、以下の通りです。

<input type="button" value="あいさつを表示する">

上のソースだけでは、ボタンを押しても何も起こりません。ボタンに機能を持たせるには、JavaScriptなどを使って、押したときの処理を書く必要があります。

下のボタンを押してみて下さい。

上のボタンに対するhtmlコードは、以下の通りです。

<input type="button" value="あいさつを表示する" id="show-message">
<p id="message"></p>

<script>
  const showMessageButton = document.getElementById('show-message');
  const message = document.getElementById('message');

  showMessageButton.addEventListener('click', () => {
    message.textContent = 'こんにちは！';
  });
</script>

この例では、ボタンを押すと、下に「こんにちは！」と表示されます。
addEventListener(‘click’, …) は、「クリックされたときにこの処理を実行してください」という意味です。
textContent は「要素の中の文字」を意味しており、今回はボタンクリック時にその内容を’こんにちは！’に書き換えています。

以前は、以下のような「 onclick属性の中へ直接JavaScriptを書く方法」も、よく使われていました。

<input type="button" value="あいさつを表示する"
 onclick="document.getElementById('message').textContent='こんにちは！'">
<p id="message"></p>

この書き方でも同様に動作はしますが、現在は管理上・セキュリティ上などの理由で、HTMLとJavaScriptを分けて書ける addEventListener() を使う書き方が推奨されています。

いずれにしろ、ボタンはこのようにJavaScriptと組み合わせて使われることが多いです。

▲目次へ戻る

5. HTMLのinput要素について、よくある質問

Q1. input要素は何のために使うのですか？

【A】文字を入力する欄や、送信ボタン・リセットボタンなどのフォーム部品を作るために使います。

Q2. type属性は何を指定するものですか？

【A】input要素で作る部品の種類を指定する属性です。

Q3. input要素とbutton要素の違いは何ですか？

【A】どちらもボタンを作れますが、より自由に中身を書きたい場合は button要素がよく使われます。
大きな違いは「中身に何を入れられるか」です。input要素のボタンはvalue属性で指定した文字列しか表示できませんが、button要素はタグの中にアイコンや画像、装飾用のHTMLなどを自由に入れることができます。
現在のWeb開発では、柔軟なデザインに対応でき、また「ボタンであること」がより明確に伝わるbutton要素を使用する場面が増えています。

▲目次へ戻る

6. まとめ

HTML の input要素について、いかがでしたでしょうか。

「HTMLから始めていつかプログラマーになりたいけど、独力では限界がある！」と感じている方には、「プログラマカレッジ」もおすすめです。
プログラマカレッジは、本気でプログラマーを目指す方のための就職支援付き、受講料無料のプログラミングスクールです。今回ご紹介したHTMLを含む豊富なカリキュラムで、IT初心者からプログラマーとして就職するまで、プロが完全にサポートします。

本気でプログラマーとして就職・転職したいという方は、ぜひ一度のぞいてみて下さいね。
→ 就職支援付き無料プログラミングスクール「プログラマカレッジ」

▲目次へ戻る