読者です 読者をやめる 読者になる 読者になる

Webデザインの勉強 | フェリカテクニカルアカデミーWebサイト制作科サポートブログ

入力フォームの作成

テキストの入力フォームを作成

  • formタグ内に、inputタグを使用する
  • 入力内容の送り先を指定する
  • データの送り方を決める
formタグ
  • 入力するエリアを作る
  • action:どこにデータを送るか「check.php
  • method:どんな形式で送るか「POST」
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>レシピの入力フォーム</title>
</head>
<body>
<h1>レシピの入力</h1>
<form action="check.php" method="post">
<p>料理名:<input type="text" name="recipe_name"></p>
<p><input type="submit" value="送信"></p>
</form>
</body>
</html>


《プレビュー》

f:id:webmaster-web:20160717220905p:plain

入力フォームの拡張
  • いろいろな入力を可能にします
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>レシピの入力フォーム</title>
</head>
<body>
<h1>レシピの入力</h1>
<form action="check.php" method="post">
<p>料理名:<input type="text" name="recipe_name"></p>
<p>カテゴリ:
<select name="category">
<option value="">選択してください</option>
<option value="1">和食</option>
<option value="2">中華</option>
<option value="3">洋食</option>
</select>
</p>
<p>難易度:
<input type="radio" name="difficulty" value="1">簡単
<input type="radio" name="difficulty" value="2" checked>普通
<input type="radio" name="difficulty" value="3">難しい
</p>
<p>予算:<input type="number" min="1" max="9999" name="budget"></p>
<p>作り方:
<textarea name="howto" cols="50" rows="4" maxlength="160"></textarea>
</p>
<p><input type="submit" value="送信"></p>
</form>
</body>
</html>


セレクトメニューを作成する

  • selectタグ
  • name属性は「category」
  • 複数のオプションから選択する
  • 値は「数値」でデータの処理をしやすくする


《プレビュー》

f:id:webmaster-web:20160717230118p:plain


ラジオボタンを作成する

  • type属性の値が「radio」
  • name属性は「difficulty」
  • 複数の項目から一つだけ選択する
  • 初期に選択されている項目を指定する「checked」


《プレビュー》

f:id:webmaster-web:20160717231810p:plain


数字専用の入力欄を作成する

  • type属性の値が「number」
  • 1行50文字、4行で最大値「160」
  • name属性は「howto」


《プレビュー》

f:id:webmaster-web:20160717233115p:plain


テキストエリアの入力欄を作成する

  • textareaタグ
  • 最小値「1」最大値「9999」
  • name属性は「budget」


《プレビュー》

f:id:webmaster-web:20160717233634p:plain