【HTML入門】ボタンの設置方法とは?要素ごとの使い分け方も解説

2021.09.15
ボタン html

Webサイトのフォームにボタンを置きたいと思ったことはありませんか?

ボタンの設定の仕方は複数あって、どれを使えば良いのか判断が難しいですよね?

今回は、HTMLにボタンを設置したい方のために、button要素を中心に紹介していきます。

  • button要素とは何か?
  • button要素で指定できる属性
  • a要素、input要素との違いとは?

この記事を読めば、HTMLにボタンを設置する具体的な方法がわかるようになりますよ。ぜひ最後まで読んでくださいね。

button要素とは?使い方を説明

HTMLのbutton要素は、ページ内にボタンを作成したい場合に使います。

お問い合わせフォームやアンケートなどの送信ボタンとして使われることが多いですね。

クリックすることで、入力情報の送信やリセットができます。

JavaScriptで記述した処理を実行させたい場合にも利用されます。

button要素には、処理方法を設定するための属性がいくつかあります。

今回は、実際によく使われる以下の属性について紹介していきます。

  1. type属性について
  2. autofocus属性について
  3. disabled属性について
  4. formnovalidate属性について
  5. name属性とvalue属性について
  6. form属性について

それぞれの属性を見ていきましょう。

type属性について

まずは、type属性について説明します。

type属性では、ボタンをクリックしたときに、どのような処理を実行するのか指定することができます。

指定できる値は3つです。

  1. submit(送信ボタン)
  2. reset(リセットボタン)
  3. button(何もしない)

こちらも1つずつ紹介していきます。

submit(送信ボタン)

type=”submit”を指定すると、送信ボタンとしての処理を行います。

送信ボタン
<form action="">
<label for="name">名前入力</label>
<input type="text" name="yourname" id="name">
<button type="submit">送信</button>
</form>

クリックすると、フォーム内の入力情報をサーバーに送信します。

ユーザーの入力ではなく、もともとボタンに設定されていた値を送信するときにも使われます。

reset(リセットボタン)

type=”reset”を指定すると、リセットボタンが作成できます。

リセットボタン
<form action="">
<label for="name">名前入力</label>
<input type="text" name="yourname" id="name">
<button type="reset">リセット</button>
</form>

リセットボタンをクリックすると、フォームに入力された情報がすべてリセットされます。

ユーザーが入力を間違えたときなどにまとめてリセットするボタンとして用意できます。

button(何もしない)

type=”button”を指定すると、クリックしても何も処理をしないボタンを作成できます。

何も処理をしないボタン
<form action="">
<label for="name">名前入力</label>
<input type="text" name="yourname" id="name">
<button type="button" onclick="buttonClick()">クリック</button>
</form>

何も機能を足さなければ反応がないボタンです。

クリックすることで、JavaScriptの処理を呼び出したいときなどに利用します。

上記では、onclick=”buttonClick()”を追加しました。クリックすることでJavaScript内で記述したbuttonClick()関数が呼び出されます。

関数の中で、処理の仕方を記述します。

直接Webサーバーに送信するためのボタンでない場合は、必ずtype=”button”にする必要があるので注意しましょう。

そうしておかないと、クリックした際にデータの送信・レスポンスが実行されてしまい、予期せぬ表示がなされてしまう可能性があります。

autofocus属性について

autofocus属性は、ボタンのフォーカスを指定する属性です。

autofocus属性
<button type="submit" autofocus>送信する</button>

この属性を指定していた場合、ページを読み込んだときにボタンが選択された状態になります。

そのままEnterキーを押すとボタンの処理が実行される状態ですね。

このautofocus属性はページの中で1つしか設定できません。複数ある場合は機能しなくなります。

ページを訪れたユーザーが他の部分をクリックすれば、フォーカスは外れるようになっています。

disabled属性について

disabled属性は、ボタンをクリックしても処理が実行されない状態にできます。

disabled属性
<form action="">
<label for="name">お名前(必須)</label>
<input type="text" name="yourname" id="name" oninput="checkName()">
<button type="submit" disabled>送信する</button>
</form>

JavaScriptを用いて、入力必須の項目に入力された場合に、disabledを削除してボタンの処理ができるように変更する、という方法などが有効です。

上記コードでは、名前の項目に入力されると、checkName()関数を呼び出して、disabledが削除されるようになっています。

formnovalidate属性について

formnovalidate属性を指定することで、入力項目に設定しておいたrequiredなどのバリデーションが無効になります。

formnovalidate属性
<form action="">
<input type="text" required>
<button type="submit" formnovalidate>保存</button>
</form>

入力フォームが長く、途中で入力情報を保存させたい場合などに、使用されます

最終的な送信ボタンとは別に作成しましょう。

name属性とvalue属性について

name属性とvalue属性を指定することで、ボタンを押すだけで値を送信できます。

name属性とvalue属性
<form action="">
<button type="submit" name="sub" value="good">いいね</button>
</form>

ユーザーが情報を入力するのではなく、ボタンをクリックしてもらいたいときなどに設定します。

name属性ではボタンの名前、value属性では値を指定できます。

ボタンがクリックされると、name属性とvalue属性の値の組み合わせがサーバーに送信されます。

上記のコードでは、sub=goodがサーバーに送られますね。

form属性について

form属性を指定すると、button要素とform要素を関連付けることができます。

HTML
<form action="" id="myform">
<input type="text">
</form>
<button type="submit" form="myform">送信</button>

button要素のform属性とform要素のid属性に、同じ値を指定する必要があります。

同じものを指定すると、上記のようにform要素の外側にボタンを設置しても、ボタンクリックで入力情報の送信ができます

同じHTML文書内であれば、form要素とbutton要素が離れていても機能します。


アプリケーションWEBサービス作成に興味のある方へ!
DMM WEBCAMP】は、独学では挫折率の高いプログラミング学習を徹底サポートします。
✔受講生の97%が未経験からのスタート!
✔一人一人に合わせた学習計画で進められるため、仕事や学校と両立できる!
✔基礎知識をゼロから丁寧に学習できるコースを用意!

あなたに合ったカリキュラムを紹介

似たような動作をする要素との比較

buttonを使えば、簡単にボタンを設定できることがわかっていただけたでしょうか?

HTMLには、button以外にもボタンの機能がある要素があります。

ここでは、a要素とinput要素について、buttonとの違いを解説していきます。

どちらを選ぶべきなのか、互いの要素のメリットデメリットなども紹介しますね。

a要素との使い分け方

リンクを作成するa要素のスタイルを変更することでも、button要素のようなボタンを作ることができます。

button要素とは何が違うのでしょうか?

リンク先を指定する場合、a要素の方がコードがシンプルになります。

a要素
<a href="リンク先のURL">移動します</a>

上記のように、href属性にリンク先のURLを指定するだけで、処理が実装できます。

button要素の場合は、

button要素
<button type="button" onclick="location.href='リンク先のURL'">移動します</button>

とリンク指定をする必要があります。

a要素の方がカスタマイズが容易にできるので、別のページへのリンクではa要素を使用することをおすすめします。

button要素は、すでにボタンとしてのスタイルが指定されており、細かいデザインをする際には、既定のスタイルを打ち消す必要が出てきます。

代わりに、a要素はフォームの送信ボタンとしては利用できないので、その場合はbutton要素を使いましょう。

クリックでJavaScriptの処理を実行したい場合にも、button要素は便利です。

<input type=”button”>との使い分け方

入力フォームのinput要素のtype属性をbuttonとすることでも、ボタンとして使用することができます。

input要素はbutton要素同様、フォーム内で使用できますが、特別な理由がない限りbutton要素を使った方が良いでしょう。

button要素には、

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

というように、開始タグと終了タグがあります。

中に子要素を持つことができるため、CSSでのカスタマイズに融通が利きやすくなります。

子要素の他に::beforeや::afterなどの擬似要素も加えることができます。

input要素では、複雑な指定ができないのであまり推奨できないです。

まとめ:ボタンを作るときには、何をしたいのか明確にする

ここまで、HTMLでボタンを設置する方法について紹介してきました。

ボタンを作るときには、送信ボタンなのかリセットボタンなのか、それともJavaScriptを実行するためのものなのか、明らかにすることが重要になります。

別ページへのリンクを張りたいだけなら、a要素の方が適しているので、そういう見極めも大事になってきます。

button要素は属性の指定によって、いろいろな処理を実装できるので、そちらも1つ1つ試してみてくださいね。

実際にコードを書いてみることが習得の近道です。

ボタンを作成する上で、今回の記事が少しでも参考になれば幸いです。


未経験からホームページWEBアプリケーションが作れるようになりたい方へ!
国内最大級のプログラミングスクール【DMM WEBCAMP】は
✔︎実践的なスキルが身に付くカリキュラムを用意!
✔分からないことは、チャットやビデオ通話で講師に好きなだけ質問可能!
✔通学不要!スキマ時間でプログラミング学習ができる!

生活スタイルに合わせて選べる3コース

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

PAGE TOP

© 2021 WEBCAMP MEDIA Powered by AFFINGER5