フォーム内のボタン
CoddyのHTMLジャーニー「基礎」セクションの一部。レッスン 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"で、placeholderに「Enter your message」と表示するテキスト入力欄。
- テキストが"Send"の送信ボタン（
<button type="submit">）を追加します。 - テキストが"Clear"のリセットボタン（
<button type="reset">）を追加します。 - テキストが「Click Me」で、
type属性のないボタン（<button>）を追加します。フォーム内では、typeのないボタンもフォームを送信します。
自分で試してみよう
<!DOCTYPE html>
<html>
<body>
<!-- ここにコードを書いてください -->
</body>
</html>
腕試しこのレッスンには短いクイズがあります。レッスンを始めて解答し、進捗を記録しましょう。
基礎のすべてのレッスン
自分で練習してみよう: Webプレイグラウンド