HTML
LINEでログイン
Googleでログイン
Twitterでログイン
buttonタグとは
buttonタグとは、formタグで作成したフォームの中で汎用的にボタンを作ることができるHTMLのタグです。
buttonタグで囲ったテキストや画像などはボタン上に表示されます。
inputタグとbuttonタグの違い
HTMLでは、inputタグを使った場合でも同じ機能を持ったボタンの作成が可能です。
inputとbuttonの違いはbuttonの場合、疑似要素を使用する事ができる事に対し、
inputの場合は疑似要素が使えずデザインや動きに限界があります。
hoverアクションを使ったボタンの実装も主流となってきているので
buttonを使ってボタンを作成できるようにしておくといいです。
HTMLの問題に挑戦しよう！
以下の問題に挑戦し、実際に手を動かして学習していきましょう。
無事に問題が解けて理解できれば、HTMLマスターへの道の第一歩となるでしょう。
問題14：inputではなくbuttonでボタンを作ってみよう
buttonタグを使用して送信ボタンを作成しましょう。
また、送信ボタンの横にフォーム内容をクリアするリセットボタンも作成しましょう。
※name属性を付けましょう
作成イメージは期待する画面を確認してください。
また、送信ボタンの横にフォーム内容をクリアするリセットボタンも作成しましょう。
※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¥
完了にする！
活動記録をTweetする
type属性の値は送信ボタンの場合「submit」、リセットボタンは「reset」を指定します。
ボタンを識別するためのname属性も必ず付与しておきましょう。
最後にボタンに表示されるテキストをbuttonタグの間に書けば完成です。