JavaScriptでボタンを設置させる方法【初心者向け】

JavaScriptでボタンを設置させる方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

クリックできるボタンは、一般的なサイトでもよく見ると思いますので、覚えておきましょう。

目次

• HTMLでボタンを表示させる方法
• <button>タグの使い方
• 実際に書いてみよう
• まとめ
• JavaScriptを学習中の方へ

そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。

 

 

HTMLでボタンを表示させる方法

はじめに、HTMLだけでボタンを表示させる方法について解説します。

まずはテキストで通常通りに書いていきます。

<img src=”images/ducks.jpg” alt=”あひる”>
<p>あひる5個セット</p>
<p>800円</p>
<p>購入する</p>

 

ここから「購入する」ボタンを作成していきます。

 

ボタンにするには、以下のように記述するだけです。

<input type=”submit” value=”購入する”>

 

ここで「購入する」の文字を変えれば、その文字を使ったボタンになります。

 

適用すると以下の通りです。

<img src=”images/ducks.jpg” alt=”あひる”>
<p>あひる5個セット</p>
<p>800円</p>
<input type=”submit” value=”購入する” >

簡単にできましたね。

設置したボタンをクリックすると、ポップアップウィンドウが表示される表現を加えることもできるのであわせて試してもよいでしょう。

 

 

<button>タグの使い方

HTMLの<button>タグは、HTMLタグの1つです。

フォームの「送信」や「リセット」などの処理を行うボタンを作成するために使います。

<button>タグを使用すると、自動的にボタンの見た目に装飾されたり、検索エンジンに「これはボタンです」と伝えられます。

 

<button>タグの3つのtype属性

<button>タグには、以下の3種類のtype属性が用意されています。

• 1.type=”submit”
• 2.type=”reset”
• 3.type=”button”

※初期値はtype=”submit”です。

これら3つの役割と利用例を解説します。

 

submit:送信ボタン

<button type="submit">送信</button>
送信

type=”submit”と指定すると、送信ボタンとして機能します。

例えば、HTMLの<form>タグを使い「フォームに入力した内容（名前、メールアドレスなど）を送信する」時に使用されます。

<form>タグの使い方は、HTMLでformを使って送信フォームを作成する方法の記事で詳しく解説しているので、こちらもあわせてチェックしてみてください。

 

reset:リセットボタン

<button type="reset">入力を取り消す</button>
入力を取り消す

type=”reset”と指定すると、リセットボタンとして機能します。

例えば、フォームに入力した内容を一括で取り消したい場合などに使用されます。

 

button:押しボタン(初期値では特に何も起こらない)

<button type="button">クリック</button>
クリック

type=”button”と指定すると、デフォルトでは特にクリックしても何も起こりません。

初期設定ではただの「無反応のボタン」ですが、JavaScriptと組み合わせることで汎用性のあるボタンを作れます。
例えば、「ユーザーがボタンをクリックすると、ポップアップ表示を行う」などのギミックを仕掛けられます。

「フォームの送信・リセット」以外の目的の場合は、type=”button”を活用しましょう。

 

[PR] フロントエンドで副業する学習方法を動画で公開中

実際に書いてみよう

では、実際にコードを書いていきましょう。

HTMLの<button>タグとJavaScriptを組み合わせたボタンを作成します。
今回は「5文字以上のテキストが入力されると、送信ボタンが活性化する」といったボタンを作成してみます。

 

disabled属性:クリックしても機能しないボタン

事前準備として、送信ボタンにdisabled属性を付与します。

<button type=”submit” id=”button” disabled>送信</button>

disabled属性を<button>タグに指定すると、ボタンを無効化できます。

 

以下はコード例です。

ご自分のPCでも実際に試してみましょう。

HTML

<form id="form" action="#">
    <input type="text" id="input-text" placeholder="5文字以上入力してください">
    <button type="submit" id="button" disabled>送信</button>
</form>

JavaScript

<script>
    const inputText = document.getElementById('input-text');
    const button = document.getElementById('button');
    inputText.addEventListener('keyup', (e) => {
      if (5 <= e.target.value.length) {
        //入力された文字が5文字以上なら実行される
        button.disabled = false;
      }
    })
</script>

inputフィールドに5文字以上の文字が入力されると、disabled属性がオフになり、送信ができるようになるJavaScriptです。
このようにJavaScriptと組み合わせることで、ユーザーの動作を感知した複雑なフォームを作ることも可能です。

コードの詳しい解説はJavaScriptでフォーム要素にdisabledを設定・解除する方法の記事を参考にしてみてください。

 

まとめ

今回はJavaScriptを使って、HTMLでボタンを表示させる方法を学びました。

• ボタン作成は、HTMLの<button>タグを使う
• 送信ボタンはtype=”submit”を指定する
• type=”button”とJavaScriptを併用することで、複雑な機能を持つボタンが作成できる

 

JavaScriptを学習中の方へ

これで解説は終了です、お疲れさまでした。

• つまずかず「効率的に」学びたい
• 副業や転職後の「現場で使える」知識やスキルを身につけたい

プログラミングを学習していて、このように思ったことはありませんか？

テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を学べます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！