用cakephp的formhelper来增加表单

>

原文：http://newsn.net/20090515/422.html

 

 

 

一、关于这篇文章
       这篇文章是我第一次用livewriter来写博客。原来语法高亮插件和wordpress下面的mce好像有点水土不服，总是有这样或者那样的问题，所 以就试试最新流行的livewriter来试试离线发布博客。在livewriter里面写东西和word的感觉很相似。感觉很不错。大家也可以试 试，msn的安装包里面是默认集成的这个东东。官方网址是：http://download.live.com/writer

       今天我想写的内容，是用Cakephp的formhelper来增加表单。增加常用的input，textarea等等出来。不过今天的结论是使用这些helper实在是太痛苦了。不如自己手写代码，早就搞定了。

 

二、基本的语法内容
2.1  创建表单的开始和结束语句

1. $form ->create(string $model = null, array $options = array ())
2. $form -> end ( $options = NULL )

这个是一对form的开始和结尾方法，构成一个完整的form。

1. echo $form ->create();
2. echo $form -> end ();

1. < form id = "AddForm" method = "post" action = "/test/tests/add" >
2.      < fieldset style = "display:none;" >
3.          < input type = "hidden" name = "_method" value = "POST" />
4.      </ fieldset >
5. </ form >

            当不带任何参数的时候，form->create生成了一个post方法的action为当前controller的add方法的form，并且生 成了一个很奇怪的隐藏input，名字是_method,暂时还不知道是干啥子用的。form->end就生成了一个结尾。这显然不是我们所需要 的。form->end负责着生成最后的提交按钮的说。

      所以我们最需要的形式是：

01. echo $form ->create( "" ,
02.      array (
03.        "type" => "get" ,
04.        "id" => "a" ,
05.        "name" => "b" ,
06.        "onsubmit" => "javascript:chk()" ,
07.        "url" => array (
08.          'controller' => 'ControllerName' ,
09.          'action' => 'ActionName' ,
10.          '?' => array (
11.            "id" =>5,
12.            "category" =>3,
13.            "category2" =>5
14.          )
15.        )
16.      )
17.       );
18. echo $form -> end ( "提交" );

1. < form id = "a" name = "b" onsubmit = "javascript:chk()" method = "post" action = "/test/ControllerName/ActionName?id=5&amp;amp;category=3&amp;amp;category2=5" >
2. < fieldset style = "display:none;" >
3. < input type = "hidden" name = "_method" value = "DELETE" />
4. </ fieldset >
5. < div class = "submit" >
6. < input type = "submit" value = "提交" />
7. </ div >
8. </ form >

在上面的例子里面，type=“get”的时候，不会生成对应的<fieldset>里面的隐藏域，其他的“post、put、 delete ” 都会生成这个很奇怪的隐藏域，不知道到底是做啥子用途的。get的时候method会是get，其他的时候都是post，只不过隐藏域会有所不同。还有这 个form的url生成的参数的时候，“&”会被2次转义成“&amp;amp;”。很是奇怪的说。

对于上传附件表单，里面还增加 ‘ENCTYPE’=>’multipart/form-data’ 选项。

这个form的结束语句还可以写成下面的形式，可以定制的选项就更多了。

01. echo $form->end(
02.    array(
03.      'label' => '提交' ,
04.      'name' => 'Whatever' ,
05.      'div' => array(
06.        'class' => 'good'
07.      )
08.    )
09. );

1.    < div class = "good" >
2.      < input type = "submit" name = "Whatever" value = "提交" />
3.    </ div >
4. </ form >

2.2、输入input

1. echo $form ->input( 'birthday' ,
2.      array (
3.          'name' => 'birthday_name' ,
4.          'id' => 'birthday_id_overwrite' ,
5.          'label' => '生日' ,
6.          'value' => "20090310"
7.      )
8. );

1. < div class = "input text" >
2.    < label for = "birthday_id_overwrite" >生日</ label >
3.    < input name = "birthday_name" type = "text" id = "birthday_id_overwrite" value = "20090310" /></ div >

这个里面主要的是第一个参数id，会生成input的id，而且默认的name是data[id]，会涉及到以后的取值问题哦。label就是 input前面的字了，对于非英文状态的页面很是管用，在第二个array中的id和name都是可以指定的。这个需要注意。还可以指定 maxLength="3"使之获得最大长度的属性。

1. echo $form ->input( 'birthday' );

1. < div class = "input text" >
2.      < label for = "birthday" >Birthday</ label >
3.      < input name = "data[birthday]" type = "text" value = "" id = "birthday" />
4. </ div >

2.3、输入password

1. echo $form ->input( 'password' , array ( 'value' => 'fdsa' , 'label' => '邪门的密码框' ));

1. < div class = "input text" >
2.      < label for = "password" >邪门的密码框</ label >
3.      < input name = "data[password]" type = "text" value = "fdsa" id = "password" />
4. </ div >

         这个东东有够邪门的，单独运行还不行。而出现的普通的输入框， 可以选择

    1、放在form->create和end中间，并且在create中指定了第一个参数，从第二个参数中指定id或者name覆盖第一个参数都不行。是不是很邪门。

    2、或者单独运行的话，用type=>’password’来强制变成password类型，不期待他的自动识别。

注：自动识别的话，需要设置第一个参数为 ‘psword’, ‘passwd’, ‘password’ 三个中的某个值，还不一定会识别成功。hoho。真是崩溃。

1. echo $form ->create( '123' , array ( 'name' => '456' , 'id' => '123' ));
2. echo $form ->input( 'password' , array ( 'value' => 'fdsa' , 'label' => '邪门的密码框' ));
3. echo $form -> end ();

01. < form name = "456" id = "123" method = "post" action = "/test/123s/add" >
02.      < fieldset style = "display:none;" >
03.          < input type = "hidden" name = "_method" value = "POST" />
04.      </ fieldset >
05.      < div class = "input password" >
06.          < label for = "123Password" >邪门的密码框</ label >
07.          < input type = "password" name = "data[123][password]" value = "fdsa" id = "123Password" />
08.      </ div >
09. </ form >

2.4、输入textarea

1. echo $form ->input( 'textarea' );
2. echo $form ->input( 'textarea' , array ( 'rows' => '5' , 'cols' => '5' ));
3. echo $form ->input( 'textarea' , array ( 'type' => 'textarea' ));
4. echo $form ->input( 'textarea' , array ( 'cols' =>null, 'rows' =>null, 'type' => 'textarea' ));

01. < div class = "input text" >
02.      < label for = "textarea" >Textarea</ label >
03.      < input name = "data[textarea]" type = "text" value = "" id = "textarea" />
04. </ div >
05. < div class = "input text" >
06.      < label for = "textarea" >Textarea</ label >
07.      < textarea name = "data[textarea]" cols = "5" rows = "5" id = "textarea" >
08.      </ textarea >
09. </ div >
10. < div class = "input textarea" >
11.      < label for = "textarea" >Textarea</ label >
12.      < textarea name = "data[textarea]" cols = "30" rows = "6" id = "textarea" ></ textarea >
13. </ div >
14. < div class = "input textarea" >
15.      < label for = "textarea" >Textarea</ label >
16.      < textarea name = "data[textarea]" cols = "" rows = "" id = "textarea" >
17. </ textarea >

     这个里面和password一样，只写一个参数的时候，识别不出来，出来的是普通的input。而强制制定了type=textarea后，将能正确识 别，或者指定rows或者cols中的某个值，也是能识别出来的。但是我的习惯是不写rows和cols，而是通过css指定其高度宽度什么的。所以，就 出现了最后的那中写法，先清空rows和cols，再指定type。hoho。到现在为止，我觉得有必要的话，需要重写个formhelper了。

2.5、上传文件框file

1. echo $form ->input( 'file_upload' , array ( 'type' => 'file' , 'label' =>false, 'div' =>false));

文件上传的框框，我可不喜欢有label和div跟着，设置label和div都为false ，就没有对应的输出了。真是不错的主意。其他的里面也可以用这个办法去掉默认的label和div 。这个是很常用的。

1. <input type= "file" name= "data[file_upload]" value= "" id= "file_upload" />

2.6、下拉框select

1. echo $form ->input( 'field' , array ( 'options' => array (1,2,3,4,5), 'label' =>false, 'div' =>'false));

1. <select name= "data[field]" id= "field" >
2. <option value= "0" >1</option>
3. <option value= "1" >2</option>
4. <option value= "2" >3</option>
5. <option value= "3" >4</option>
6. <option value= "4" >5</option>
7. </select>

不过这种写法没有办法指定value，所以要改进一下。增加options，value=>text。

01. echo $form ->input(
02.      'field' ,
03.      array (
04.          'options' => array (
05.              '5' => '北京' ,
06.              '10' => '唐山' ,
07.              '18' => '上海' ,
08.              '30' => '美国'
09.          ),
10.          'label' =>false,
11.          'div' =>false,
12.          'onchange' => 'javascript:alert(this.value)'
13.      )
14. );

1. < select name = "data[field]" onchange = "javascript:alert(this.value)" id = "field" >
2. < option value = "5" >北京</ option >
3. < option value = "10" >唐山</ option >
4. < option value = "18" >上海</ option >
5. < option value = "30" >美国</ option >
6. </ select >

当然可以增加个选项，’multiple’=>true 或者 ‘multiple’=>’multiple’ 使之变成多选。

01. echo $form->input(
02.      'field' ,
03.      array(
04.          'options' => array(
05.              '5' => '北京' ,
06.              '10' => '唐山' ,
07.              '18' => '上海' ,
08.              '30' => '美国'
09.          ),
10.          'label' => false ,
11.          'div' => false ,
12.          'multiple' => true
13.      )
14. );

    当没有options的时候，可以强制’type’=>’select’使之呈现为下拉框。

1. echo $form ->input(
2.      'field' ,
3.      array (
4.          'type' => 'select' ,
5.          'label' =>false,
6.          'div' =>false
7.      )
8. );

当然还可以指定’selected’=>options中的vlaue值，使select有默认值，这个函数也很不错，不用自己写循环了。 hoho~。官方还出了个专门用于select制定默认值的参数。 ‘default’=>value ，例如下例中的’selected’=>18就可以是’default’=>18，所以貌似这个参数也是个垃圾参数。

default可以用于radio、select。但是selected不可以用于radio，但是可以用于select和Cakephp特有的时间类型。

01. echo $form->input(
02.      'field',
03.      array(
04.          'options' => array(
05.              '5'=>'北京',
06.              '10'=>'唐山',
07.              '18'=>'上海',
08.              '30'=>'美国'
09.          ),
10.          'selected'=>18,
11.          'label'=>false,
12.          'div'=>false
13.      )
14. );

官方对于select还有个垃圾参数选项，叫做empty。用于设置每个select的最开始的那个“请选择”的空值的option，但是完全可以 通过设置options的第一个值为”=>’请选择’来达到同样的效果，并且官方提供的empty选项还会替换options中的值为空的 option，如：

01. echo $form ->input(
02.      'field' ,
03.      array (
04.          'options' => array (
05.              '5' => '北京' ,
06.              '' => '请选择' ,
07.              '10' => '唐山' ,
08.              '18' => '上海' ,
09.              '30' => '美国'
10.          ),
11.          'selected' =>18,
12.          'label' =>false,
13.          'div' =>false,
14.          'empty' => 'chooseone'
15.      ));

1. < select name = "data[field]" id = "field" >
2. < option value = "5" >北京</ option >
3. < option value = "" >chooseone</ option >
4. < option value = "10" >唐山</ option >
5. < option value = "18" selected = "selected" >上海</ option >
6. < option value = "30" >美国</ option >
7. </ select >

2.7、单选框radio

单选框radio和select的写法基本上一致，就是type=‘radio’就行了。所有属性几乎一致。

01. echo $form->input(
02.      'field' ,
03.      array(
04.          'options' => array(
05.              '5' => '北京' ,
06.              '10' => '唐山' ,
07.              '18' => '上海' ,
08.              '30' => '美国'
09.          ),
10.          'type' => 'radio' ,
11.          'default' =>10,
12.                    'legend' => false ,
13.          'div' => false ,
14.          'onchange' => 'javascript:alert(this.value)'
15.      )
16. );

和select相比，radio能使用default，不能使用selected、multiple、empty。而且对于radio，label一定不要false掉，label在选择东西的时候还是很有用途的。

对于“legend”选项，当不设为false的时候会多个<fieldset><legend>Field</legend>……</field>出来，很是令人崩溃。

2.8、多选框checkbox

多选框和其他的东东很不一样，居然不是通过设置type来获得的，居然是通过设置select的multiple属性来获得的。而且最终出来的代码也不是很理想，有着多余的div，并且js事件也无法获得。所以到时候也许需要对应的css和js进行控制了。

01. echo $form ->input(
02.      'field' ,
03.      array (
04.          'options' => array (
05.              '5' => '北京' ,
06.              '10' => '唐山' ,
07.              '18' => '上海' ,
08.              '30' => '美国'
09.          ),
10.          'type' => 'select' ,
11.          'multiple' => 'checkbox' ,
12.          'default' => array ( "5" , "18" ),
13.          'label' =>false,
14.          'div' =>false
15.      )
16. );

01. <input type= "hidden" name= "data[field]" value= "" />
02.
03. <div class = "checkbox" ><input type= "checkbox" name= "data[field][]" checked = "checked" value= "5" id= "Field5" /><label for = "Field5" class = "selected" >北京</label></div>
04.
05. <div class = "checkbox" ><input type= "checkbox" name= "data[field][]" value= "10" id= "Field10" /><label for = "Field10" >唐山</label></div>
06.
07. <div class = "checkbox" ><input type= "checkbox" name= "data[field][]" checked = "checked" value= "18" id= "Field18" /><label for = "Field18" class = "selected" >上海</label></div>
08.
09. <div class = "checkbox" ><input type= "checkbox" name= "data[field][]" value= "30" id= "Field30" /><label for = "Field30" >美国</label>
10. </div>

而且会生成个多余的hidden东东，很奇怪的说。

2.9、隐藏域hidden

01. echo $form->input(
02.      '' ,
03.      array(
04.          'type' => 'hidden' ,
05.          'id' => 'test_id' ,
06.          'name' => 'test_name' ,
07.          'value' => 'test_value' ,
08.          'label' => false ,
09.          'div' => false
10.      )
11. );

1. <input type= "hidden" name= "test_name" id= "test_id" value= "test_value" />

2.10、提交按钮submit

1. echo $form ->submit( '提交' , array ( "div" =>false));

1. < input type = "submit" value = "提交" />

图像组成的submit

1. echo $form ->button( '' , array ( 'type' => 'image' , 'src' => 'test.jpg' ));

1. < input type = "image" value = "" src = "test.jpg" />

普通按钮button

1. echo $form ->button( '按钮' , array ( 'class' => 'class_name' ));

1. < input type = "button" value = "按钮" class = "class_name" />

三、其他相关东东

貌似还有，再说了。哈哈。以后再研究。