webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

ウェブデザインを勉強中

php 課題 その2

formを構成する要素

  • inputは閉じタグがない。
  • <input type="text" name=" " value=" ">
  • <input type="radio" name=" " value=" ">
  • <input type="checkbox" name=" " value=" ">

 

  • これらの要素に、絶対に必要な属性は「type」「name」「value」
  • データは「name」=「value」の用に記録される。

 

  • 「select」と「textarea」は閉じタグが必要
  • <select name=" "><option value="  "></option> </select>
  • 「select」の場合は、「select」タグにname属性、「option」タグにvalue属性を記述する。
  • 「textarea」にはvalue属性を書かなくて良い。name属性は必須。
  • 「textarea」には行数、列数、文字数を指定できる。

以上を踏まえて、まずはフォームを作る。

<body>
<div class="container">
<form action="getform.php" method="post">
<table>
<tr>
<th>レシピの名前</th>
<td>
<input type="text" name="recipe_name" placeholder="レシピ名" class="name">
</td>
</tr>
<tr>
<th>カテゴリー</th>
<td>
<select name="category">
<option value="">以下より選択してください</option>
<option value="1">和食</option>
<option value="2">中華</option>
<option value="3">洋食</option>
</select>
</td>
</tr>
<tr>
<th>難易度</th>
<td>
<input type="radio" name="difficulty" value="1" checked>簡単
<input type="radio" name="difficulty" value="2">普通
<input type="radio" name="difficulty" value="3">難しい
</td>
</tr>
<tr>
<th>予算</th>
<td>
<input type="number" min="500" max="9999" name="budget" placeholder="予算">
</td>
</tr>
<tr>
<th>作り方</th>
<td>
<textarea name="howto" cols="40" rows="5" maxlength="200" placeholder="作り方" class="budget"></textarea>
</td>
</tr>
</table>
<p><input type="submit" value="送信する"></p>
</form>
</div><!--container-->
</body>
</html>