ログイン
問題14

inputではなくbuttonでボタンを作ってみよう

この問題では、テキストや画像を使ったボタンを作成することのできるbuttonタグについて学習します。 button(ボタン)タグはそのままの意味なので非常に覚えやすいタグですね。 inputタグで作るボタンと何が違うのか?についても理解していきましょう。

アイコン画像

本のアイコンbuttonタグとは

buttonタグとは、formタグで作成したフォームの中で汎用的にボタンを作ることができるHTMLのタグです。
buttonタグで囲ったテキストや画像などはボタン上に表示されます。

本のアイコンinputタグとbuttonタグの違い

HTMLでは、inputタグを使った場合でも同じ機能を持ったボタンの作成が可能です。

inputとbuttonの違いはbuttonの場合、疑似要素を使用する事ができる事に対し、
inputの場合は疑似要素が使えずデザインや動きに限界があります。

hoverアクションを使ったボタンの実装も主流となってきているので
buttonを使ってボタンを作成できるようにしておくといいです。

HTMLの問題に挑戦しよう!

以下の問題に挑戦し、実際に手を動かして学習していきましょう。
無事に問題が解けて理解できれば、HTMLマスターへの第一歩となるでしょう。

問題14:inputではなくbuttonでボタンを作ってみよう

buttonタグを使用して送信ボタンを作成しましょう。
また、送信ボタンの横にフォーム内容をクリアするリセットボタンも作成しましょう。
※name属性を付けましょう

作成イメージは期待する画面を確認してください。

エディターのアイコンあらかじめエディタに書くコード

                <form>
  <textarea name="comment" rows="4"></textarea>
</form>
¥HTML¥
              

ブラウザのアイコン期待する画面

解答の見本画像

タグアイコン解答ソースコード

              <form>
  <textarea name="comment" rows="4"></textarea>
  <button type="submit" name="send">送信</button>
  <button type="reset" name="reset">リセット</button>
</form>
¥HTML¥
            

コメントのアイコン解説

buttonタグで送信ボタンを作成する場合は、inputと同様にtype属性を付与します。
type属性の値は送信ボタンの場合「submit」、リセットボタンは「reset」を指定します。

ボタンを識別するためのname属性も必ず付与しておきましょう。

最後にボタンに表示されるテキストをbuttonタグの間に書けば完成です。
ログインして解答を見る
HTMLを学ぶなら現役エンジニア監修「甲賀コース」
キャンペーン

閉じる