演習課題「汎用ボタンを作成しよう」
現在、ブラウザでは、あるデザイン事務所のプロジェクトを管理するためのページが表示されています。button要素を用いて、下書き保存ボタンを追加します。「下書き保存」が併記されたbutton要素のtype属性にbuttonを指定することで、形式的な下書き保存ボタンを作成してください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
演習課題「リセットボタンを作成しよう」
現在、ブラウザでは、あるデザイン事務所のプロジェクトを管理するためのページが表示されています。
前問に引き続いて、button要素を用いて、リセットボタンを追加します。「リセット」が併記されたbutton要素のtype属性にresetを指定することで、リセットボタンを作成してください。
採点の前にはファイルを保存してください。
採点して、ジャッジに正解すれば演習課題クリアです！
＃08:ボタン(button)
このチャプターでは、ボタンについて学習します。
button要素は、クリック可能なボタンを生成するために使用します。<input type="submit"> と似ていますが、より柔軟な表現が可能です。button要素の主なtype属性値は以下の通りです。
・submit: フォームを送信します（デフォルト値）。
・reset: フォームの入力内容をリセットします。
・button: デフォルトの動作を持たない汎用的なボタンです。JavaScriptと組み合わせてカスタムの動作を実装する際によく使われます。button要素は、内部にテキストだけでなく画像や他のHTML要素を含むことができるため、凝ったデザインのボタンを作成しやすいという利点があります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ボタン</title>
<meta name="viewport" content="width=device-width initial-scale=1">
<link rel="stylesheet" href="style01.css">
</head>
<body>
<form action="">
<p>
<label>名前<br>
<input type="text" name="name">
</label>
</p>
<p>
<label>メールアドレス<br>
<input type="text" name="email">
</label>
</p>
<p>
<button type="submit">送信</button>
<button type="reset">リセット</button>
<button type="button">汎用ボタン</button>
</p>
</form>
</body>
</html>
MDN web docs - <button>: ボタン要素
https://developer.mozilla.org/ja/docs/Web/HTML/Element/button