CodeIgniter Form の履歴(No.3)

• 履歴一覧
• 差分 を表示
• 現在との差分 を表示
• ソース を表示
• CodeIgniter Form へ行く。
  • 1 (2011-05-20 (金) 05:29:59)
  • 2 (2011-05-20 (金) 06:09:06)
  • 3 (2011-05-21 (土) 00:38:20)
  • 4 (2011-05-21 (土) 12:09:45)

CodeIgniter

Form†

データ入力のユーザーインターフェースを作る。
決まりきった形式なので、悩む余地なし＝時間をかける場所じゃない。一瞬で実装すべし。

（参考）

• HTMLタグ/フォームタグ - TAG index Webサイト
  http://www.tagindex.com/html_tag/form/

• <FORM>－HTMLタグリファレンス
  http://www.htmq.com/html/form.shtml

• Form ヘルパ - CodeIgniter ユーザガイド 日本語版
  http://codeigniter.jp/user_guide_ja/helpers/form_helper.html

HTML†

通常のHTMLで表記する場合（復習）
http://www.tagindex.com/html_tag/form/

#code(html){{

form method="post" action="formmail.cgi">

p>お名前：<input type="text" name="name" size="50"></p>

p>メッセージ：<br>

textarea name="message" cols="50" rows="5"></textarea></p>

p><input type="submit" value="送信する"></p>

/form>
}}

フォーム全体の指定†

• <form action=""> 入力フォームを作る
• <form method="" action=""> データの送信形式と送信先を指定する

  #code(html){{

  form method="post" action="example.cgi"> ～ </form>
  }}

  属性	値	説明
  method=""	get	URIの形式でデータを送信 （初期値）
  	post	本文としてデータを送信
  action=""	URI	データの送信先（プログラム）のURIを指定

  form要素に method="" を追加すると、データの送信形式を指定することができます。
  また、action="" でデータの送信先を指定することができます。
  form要素にはaction属性が必須となります。
  POST形式 … フォームのデータを本文として送信します（一度に大量のデータを送信することができます）
  GET形式 … フォームのデータをURLの末尾に追加して送信します（送信できるデータ量には制限があります）

• <form method="" action="" target=""> 結果が表示されるウィンドウを指定する
• <form method="post" action="" enctype=""> 送信時のデータ形式を指定する

フォームの部品†

• <input type="text"> テキストの入力欄を作る

  #code(html){{

  input type="text" name="example2" size="30" maxlength="30" value="サンプル">
  }}

  • <input type="password"> パスワード形式の入力欄を作る
  • <input type="radio"> ラジオボタンを作る
  • <input type="checkbox"> チェックボックスを作る
  • <input type="file"> ファイルの送信欄を作る
  • <input type="hidden"> 隠しデータを送信する

    #code(html){{

    input type="hidden" name="example" value="隠しデータ">
    }}

    • <textarea cols="" rows=""> 複数行のテキスト入力欄を作る
      • <textarea cols="" rows="" wrap=""> テキストの折り返しを制御する
    • <select><option> セレクトボックスを作る

      #code(html){{

      select name="example" size="3" multiple>

       <option value="サンプル1" selected>サンプル1</option>
       <option value="サンプル2">サンプル2</option>
       <option value="サンプル3">サンプル3</option>

      /select>
      }}

ボタン†

• <input type="submit"><input type="reset"> 送信ボタンとリセットボタンを作る

  #code(html){{

  input type="submit" name="button1" value="送信する">

  input type="reset" name="button2" value="リセット">
  }}

• <input type="image"> 画像で送信ボタンを作る

  #code(html){{

  input type="image" name="button1" src="button.gif" alt="送信する">

  input type="image" name="button2" src="button.gif" alt="送信する" align="middle">
  }}

  input要素に type="image" を指定すると、画像を使った送信ボタンを作成することができます。

• <input type="button"> 汎用的なボタンを作る（1）

  #code(html){{

  p><input type="button" value="アラート" onclick="alert('これはテストです')"></p>
  }}

  input要素に type="button" を指定すると、汎用的に使える押しボタンを作成することができます。
  この押しボタンは、主にJavaScriptなどで使用することになります。

• <button type=""> 汎用的なボタンを作る（2）

  #code(html){{

  button type="button">ボタンの内容</button>

  button type="submit" name="example" value="ボタン">ボタンの内容</button>
  }}

button要素で、3タイプのボタン（送信ボタン、リセットボタン、汎用ボタン）を作成することができます。

属性	値	説明
type=""	submit	送信ボタンを作成 （初期値）
	reset	リセットボタンを作成
	button	汎用ボタンを作成
name=""	文字列	ボタンの名前を指定
value=""	文字列	送信される文字列を指定

Formヘルパー†

CodeIgniterのFormヘルパーを活用
http://codeigniter.jp/user_guide_ja/helpers/form_helper.html

• ヘルパのロード
  このヘルパは次のコードを使ってロードします:

  $this->load->helper('form');

• form_open() 関数

  echo form_open('email/send');

  ↓

  #code(html){{

  form method="post" accept-charset="utf-8" action="http:/example.com/index.php/email/send" />
  }}

バリデーション†

http://codeigniter.jp/user_guide_ja/libraries/form_validation.html