2014-12-06

2014-12-06

ユーザーからの入力を受け取るフォームAdd Star

 

 

フォームとは

  • ブラウザからサーバー側へ情報を送信するための仕組み
  • HTMLタグで作成し、情報を受け取る処理はPHPで記述します

フォームの種類

 

文字を入力する部分 テキストボックス
パスワード用テキストボックス
テキストエリア
選択肢を提示する部分 ラジオボタン
セレクトボタン
チェックボックス
その他 サブミット(送信)ボタン

 


フォームの仕組み

  • formタグを使う
  • action属性:送信先のPHPプログラムを指定する(Webサーバーの「URI」)
  • method属性:送信方法を指定する

 

f:id:web-design-php:20120225155020j:image

 



フォーム作成

  • 入力フォームを表示
  • フォームは通常ひとつのサブミット(実行)ボタンを持つ
  • 「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の場合、コードビュー:シンプル、デザインビュー:アクセシビリティ付加

挿入パネル(フォーム)

 

f:id:web-css-design:20111025223848j:image

 

 

f:id:web-css-design:20111025224928j:image

 


通常はパネルを使用することはありませんが、あえて機能を使うとどうなるのか試してみます。


formを作成

form挿入

f:id:web-css-design:20111026223049j:image


 

f:id:web-css-design:20111026223449j:image

 


 

f:id:web-css-design:20111026223208j:image

 


テキストフィールド挿入

f:id:web-css-design:20111026231016j:image


 

一般で挿入

 

コードビューで挿入する。

 

f:id:web-css-design:20111026230754j:image

 


 

f:id:web-css-design:20111026230807j:image

 


 

アクセシビリティで挿入

 

デザインビューで挿入する。

 

f:id:web-css-design:20111026231045j:image

 


 

f:id:web-css-design:20111026231219j:image

 


p要素で囲むことにより、2行目以降は改行されて表示されます。


テキストエリア挿入

f:id:web-css-design:20111026233943j:image


 

f:id:web-css-design:20111026233530j:image

 


 

f:id:web-css-design:20111026233726j:image

 


ラジオボタン挿入

f:id:web-css-design:20111026234206j:image


チェックボックス挿入

f:id:web-css-design:20111026234353j:image


選択(リスト / メニュー)

f:id:web-css-design:20111026234624j:image