入力フォームの項目を増やす

テキスト P.90〜P.97

セレクトメニュー（プルダウンメニューから一択）
ラジオボタン（複数の選択肢から一択）
数字の入力（数字入力のみ）
テキストエリア（改行を含む複数行）

name 属性

値を次のページに運ぶためには「name属性」の指定が必須

value 属性

valueで選択された項目を数字で管理する

required 属性

「必須」であることを表示します

ラジオボタンはlabelを追記

「label」タグを追加することにより、ボタンと文字が選択肢やすくなります

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>入力フォーム</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
  <h1>入力フォーム</h1>
  <form method="post" action="receive.php">
    <dl>
      <dt>料理名：</dt>
      <dd><input class="field" type="text" name="recipe_name" required></dd> 
      <dt>カテゴリ：</dt>
      <dd>
        <select name="category">
          <option hidden>選択してください</option>
          <option value="1">和食</option>
          <option value="2">中華</option>
          <option value="3">洋食</option>
        </select>
      </dd>
      <dt>難易度：</dt>
      <dd>
        <label class="radio"><input type="radio" name="difficulty" value="1">簡単</label>
        <label class="radio"><input type="radio" name="difficulty" value="2" checked>普通</label>
        <label class="radio"><input type="radio" name="difficulty" value="3">難しい</label>
      </dd>
      <dt>予算：</dt>
      <dd><input class="field" type="number" min="1" max="9999" name="budget" required>円</dd>
      <dt>作り方：</dt>
      <dd>
        <textarea name="howto" cols="40" rows="4" maxlength="320"></textarea>
      </dd>
      </dl>
    <p class="btn"><input type="submit" value="送信"></p>
  </form>
</div><!-- /.container -->
</body>
</html>

style.css

@charset "UTF-8";

/* -------------------------------------
  reset
------------------------------------- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ul {
  list-style: none;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  max-width: 100%;
  vertical-align: bottom;
}
html {
  font-size: 100%;
}

/* -------------------------------------
  body
------------------------------------- */
body {
  background-color: #fff;
  color: #333;
  font-size: 1.0rem;
  font-family: sans-serif;
}

/* -------------------------------------
  layout
------------------------------------- */
.container {
  max-width: 400px;
  margin: 50px auto;
}
h1 {
  margin-bottom: 10px;
}
dl {
  display: grid;
  grid-template-columns: 20% 80%;
}
dt, dd {
  margin-bottom: 10px;
}
.field, textarea {
  margin-right: 10px;
  padding: 4px 8px;
}
.radio {
  margin-right: 10px;
}
.btn {
  text-align: center;
}
.btn > input {
  padding: 6px 16px;
}