性格診断フォームを作ろう

💻 この課題はPCで実際にコードを書いて取り組みましょう
1

HTMLファイルを作成しよう

shindan.html を作成し、HTMLの基本構造を書きましょう。

💡 ヒント
VS Codeで shindan.html を作成し、基本構造を書きます
📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

<!DOCTYPE html>
<html lang="ja">
<head><meta charset="UTF-8"><title>性格診断</title></head>
<body>
</body>
</html>
2

タイトルとフォームの枠を作ろう

bodyの中に見出しとformタグを書きましょう。

💡 ヒント
h1タグでタイトル、formタグでフォーム全体を囲みます

参考: HTML レッスン5

📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

<h1>🔮 性格診断</h1>
<form>
  <!-- ここに質問を書く -->
</form>
3

質問1をラジオボタンで作ろう

formの中に最初の質問を書きましょう。ラジオボタンの name を揃えるのがポイントです。

💡 ヒント
同じ質問のラジオボタンには同じname属性を指定します
📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

<p><strong>Q1. 休日の過ごし方は？</strong></p>
<label><input type="radio" name="q1" value="a"> 友達と出かける</label><br>
<label><input type="radio" name="q1" value="b"> 家でゆっくり</label>
4

質問2を追加しよう

2つ目の質問を追加しましょう。name="q2" にして別グループにします。

💡 ヒント
質問2のname属性はq2にします（q1とは別のグループ）
📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

<p><strong>Q2. 好きな教科は？</strong></p>
<label><input type="radio" name="q2" value="a"> 体育・音楽</label><br>
<label><input type="radio" name="q2" value="b"> 数学・理科</label>
5

送信ボタンを追加しよう

フォームの最後に送信ボタンを追加しましょう。

💡 ヒント
buttonタグまたはinput type='submit'で送信ボタンを作ります
📝 模範解答を見る

⚠️ まず自分で考えてから見よう！

<button type="submit">診断する</button>
🎯

📚 使う技術を学ぶ

⚠️ つまずいたら