フォーム内のボタン
CoddyのHTMLジャーニー「Fundamentals」セクションの一部 — レッスン 45/60。
ボタンはフォームにおいて重要な役割を果たし、データの送信やフィールドのリセットを助けます。それらがどのように機能するか見てみましょう：
送信ボタン:
<form>
<input type="text" name="username" placeholder="Enter username">
<button type="submit">Submit</button>
</form>
type="submit": フォームデータをサーバーに送信します。
リセットボタン:
<form>
<input type="text" name="name" value="John Doe">
<button type="reset">Reset</button>
</form>
type="reset": すべてのフィールドをクリアし、それらをデフォルト値にリセットします。
チャレンジ
簡単異なる種類のボタンを含むフォームを持つHTMLドキュメントを作成してください。フォームには以下の要素を含める必要があります：
- name属性が "message" で、プレースホルダーに "Enter your message" と表示されるテキスト入力フィールド。
- "Send" というテキストを持つ送信ボタン (
<button type="submit">) を追加します。 - "Clear" というテキストを持つリセットボタン (
<button type="reset">) を追加します。 - "Click Me" というテキストを持つ汎用ボタン (
<button>) を追加します。
チートシート
フォーム内のボタンには、特定の機能に応じた異なるタイプがあります：
送信ボタン (Submit Button):
<button type="submit">Submit</button>type="submit": フォームデータをサーバーに送信します
リセットボタン (Reset Button):
<button type="reset">Reset</button>type="reset": すべてのフィールドをクリアし、デフォルト値にリセットします
汎用ボタン (Generic Button):
<button>Click Me</button>- 特定のフォーム動作を持たないデフォルトのボタン
自分で試してみよう
<!DOCTYPE html>
<html>
<body>
<!-- ここにコードを書いてください -->
</body>
</html>
腕試しこのレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。
