CodeIgniter

Form

CodeIgniterのFormヘルパーを利用して、データ入力のユーザーインターフェースをつくろう。
決まりきった形式なので、悩む余地なし=時間をかける場所じゃない。一瞬で実装すべし!

リンク

HTML

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

  1
  2
  3
  4
  5
  6
<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=""> データの送信形式と送信先を指定する
      1
    
    <form method="post" action="example.cgi"> ~ </form>
    属性説明
    method=""getURIの形式でデータを送信 (初期値)
    post本文としてデータを送信
    action=""URIデータの送信先(プログラム)のURIを指定

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

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

フォームの部品

  • <input type="text"> テキストの入力欄を作る
      1
    
    <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"> 隠しデータを送信する
      1
    
    <input type="hidden" name="example" value="隠しデータ">
  • <textarea cols="" rows=""> 複数行のテキスト入力欄を作る
    • <textarea cols="" rows="" wrap=""> テキストの折り返しを制御する
  • <select><option> セレクトボックスを作る
      1
      2
      3
      4
      5
    
    <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"> 送信ボタンとリセットボタンを作る
      1
      2
    
    <input type="submit" name="button1" value="送信する">
    <input type="reset" name="button2" value="リセット">
  • <input type="image"> 画像で送信ボタンを作る
      1
      2
    
    <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)
      1
    
    <p><input type="button" value="アラート" onclick="alert('これはテストです')"></p>

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

  • <button type=""> 汎用的なボタンを作る(2)
      1
      2
    
    <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');
      1
    
    <form method="post" accept-charset="utf-8" action="http:/example.com/index.php/email/send" />

バリデーション

CodeIgniter バリデーション


トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS
Last-modified: 2011-07-31 (日) 17:36:40 (3051d)