2014-10-14 2014-12-06 2014-12-06 ユーザーからの入力を受け取るフォーム Form フォームとは ブラウザからサーバー側へ情報を送信するための仕組み HTMLタグで作成し、情報を受け取る処理はPHPで記述します フォームの種類 文字を入力する部分 テキストボックス パスワード用テキストボックス テキストエリア 選択肢を提示する部分 ラジオボタン セレクトボタン チェックボックス その他 サブミット(送信)ボタン フォームの仕組み formタグを使う action属性:送信先のPHPプログラムを指定する(Webサーバーの「URI」) method属性:送信方法を指定する フォーム作成 入力フォームを表示 フォームは通常ひとつのサブミット(実行)ボタンを持つ 「method 属性」で指定した転送方法で、「action 属性」で指定したアクションを呼び出す 文字を入力する部品 form要素のaction属性に送信先「request.php」を設定する 送信方法は「post」 name属性を指定することが必須 <formaction="request.php"method="post"> 名前<br> <inputtype="text"name="name"><br> パスワード<br> <inputtype="password"name="password"><br> 備考<br> <textareaname="note"cols="40"rows="5"></textarea> </form> 選択肢の中からひとつ選択する部品 複数の選択肢から「1つ」選択してもらう場合は、「ラジオボタン」を指定する 選択肢が多い場合は「セレクトボックス」を指定する 送信方法は「post」 name属性を指定することが必須 選択肢のvalue属性は数字にすると、データベースで扱いやすくなります <formaction="request.php"method="post"> 性別<br> <inputtype="radio"name="sex"value="1"> 男性 <inputtype="radio"name="sex"value="2"> 女性 <inputtype="radio"name="sex"value="9"> 解答しない <br> 都道府県<br> <selectname="pref"> <optionvalue="1"> 北海道 </option> <optionvalue="2"> 青森県 </option> <optionvalue="3"> 岩手県 </option> <!-- 中略 --> <optionvalue="47"> 沖縄県 </option> </select> </form> 選択肢の中から複数選択する部品 複数の選択肢から複数選択してもらう場合は、「チェックボックス」を指定する type属性に「checkbox」を指定します name属性に角括弧(ブラケット)を指定し、配列形式で受け取れるようにします <formaction="request.php"method="post"> 趣味<br> <inputtype="checkbox"name="hobby[]"value="1">インターネット <inputtype="checkbox"name="hobby[]"value="2"> 読書 <inputtype="checkbox"name="hobby[]"value="3">ショッピング <inputtype="checkbox"name="hobby[]"value="4">サイクリング <inputtype="checkbox"name="hobby[]"value="5">音楽鑑賞 </form> 送信ボタン 送信ボタンを用意することで、利用者にフォームを送信してもらうことができます type属性に「submit」を指定します <formaction="request.php"method="post"> <inputtype="submit"name="submit"value=" 送信 "> </form> Dreamweaverでformを作成 Dreamweaver 挿入ツールの使い方 コードビューとデザインビューでは挿入されるタグが違う formの場合、コードビュー:シンプル、デザインビュー:アクセシビリティ付加 挿入パネル(フォーム) 通常はパネルを使用することはありませんが、あえて機能を使うとどうなるのか試してみます。 formを作成 form挿入 テキストフィールド挿入 一般で挿入 コードビューで挿入する。 アクセシビリティで挿入 デザインビューで挿入する。 p要素で囲むことにより、2行目以降は改行されて表示されます。 テキストエリア挿入 ラジオボタン挿入 チェックボックス挿入 選択(リスト / メニュー)