Rails组件逐个数：Rails Form helpers
其实按归属嚟讲、呢个插件应该属于ActionView入边只控件
呢个插件其实就係负责View入边只Form标签嘅所有方法、点解Form唔响View果度讲晒佢、因为
传统嘅html页面、负责用户数据交互其实就係基于Form形式嘅、所以单独嚟讲呢件嘢、非常之重要嘅一件嘢嚟噶
依家首先讲讲佢嘅最简写法、
<%= form_tag do %>
Form contents
<% end %>
不带任何参数、相当之简洁、迩将佢放响任何View模版页都会成效、会转化成
<form accept-charset="UTF-8" action="/en/products" method="post">
<div style="margin:0;padding:0;display:inline">
<input name="utf8" type="hidden" value="✓"/>
<input name="authenticity_token" type="hidden" value="4ihHZIXcTSfP9soDHyo3sfOojTy4VNzUobzCSvPqBTs="/>
</div>
Form contents
</form>
当然对于莪地嚟讲、只会响浏览器过度睇到Form contents呢几个字母、但实际上、、Rails已经为莪地渲染成佐以上嘅代码、
其中嘅div係隐匿嘅、唔会显示任何嘢、但冇佐佢却係不会令rails服务器产生回应、所以佢地係非常之重要的、
第一个input指定佐成只form只能使用utf8嘅编码嚟解析文字、无论係post方法或者get方法、
而第二个input则是指定佐一种加密嘅方式、其中"authenticity_token"係指定rails援用这种"cross-site request forgery protection"加密方式、
OK简单咁就介绍到呢度、
跟住莪地就讲下常见嘅搜索框架、无非就係由一个带get方法嘅form、入边有只label标签、写住搜索栏、后边跟住只形式为text嘅input标签同埋只按钮、
submit、因此莪地用到嘅rails元素就係
form_tag,
label_tag,
text_field_tag,
submit_tag
写响ERB模版页就係
1 <%= form_tag("/search", :method => "get") do %>
2 <%= label_tag(:q, "Search for:") %>
3 <%= text_field_tag(:q) %>
4 <%= submit_tag("Search") %>
5 <% end %>
转化成嘅代码
<form accept-charset="UTF-8" action="/search" method="get"> <div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"/></div> <label for="q">Search for:</label> <input id="q" name="q" type="text"/> <input name="commit" type="submit" value="Search"/> </form>
ok、都係非常之简单噶、就唔多讲了
如果迩嘅html知识比较差嘅话、迩会唔明只label嘅for属性係乜、迩冇误会成for係id、其实唔係、佢係一个方便用户操作嘅方法
当迩点击lable标签果度、光标就会定义到去id为q嘅元素、响呢度、即係搜索栏、OK、明白了未、唔明白自己试下删除佐只属性试下D区别
然之后莪地讲下Rails嘅view同controller之间嘅一些互动、解释下它们嘅数据交换、
当迩响form输入值或者选择radio或者checkbox、然后禁只提交只制、controller就会根据迩只_tag嘅id创建同名数组并储存着数据、
例如check_box_tag(:pet_dog)呢D就係嗌做id、跟住迩若果想摞翻只值只需要对应嘅id名写params[:id]咁就得了
form helpers写着好多方法、都係以xxx_tag嚟命名嘅
下边再讲下form嘅主元素checkbox同埋radio、变换成rails嘅help方法便是
check_box_tag,
radio_button_tag
checkbox:
<%= check_box_tag(:pet_dog) %> <%= label_tag(:pet_dog, "I own a dog") %> <%= check_box_tag(:pet_cat) %> <%= label_tag(:pet_cat, "I own a cat") %>
渲染后就係
<input id="pet_dog" name="pet_dog" type="checkbox" value="1" />
<label for="pet_dog">I own a dog</label>
<input id="pet_cat" name="pet_cat" type="checkbox" value="1" />
<label for="pet_cat">I own a cat</label>
当然入边只参数就非常简单了、就係对应嘅id同埋name标签
跟住係radiobutton
<%= radio_button_tag(:age, "child") %>
<%= label_tag(:age_child, "I am younger than 21") %>
<%= radio_button_tag(:age, "adult") %>
<%= label_tag(:age_adult, "I'm over 21") %>
渲染成HTML就係
<input id="age_child" name="age" type="radio" value="child" /> <label for="age_child">I am younger than 21</label> <input id="age_adult" name="age" type="radio" value="adult" /> <label for="age_adult">I'm over 21</label>
同checkbox唔同嘅係佢指定着value只值、同埋id同name生成嘅方式、radio生成id係由第一个参数同都二个参数之间接着下划线组成嘅
而name则係直接由第一个参数生成嘅、因为name响表格form入边具有特性、相同name嘅radio将会作为同一个组看待、就係讲、相同
name属性嘅radio、只能有一个radio被选中、这就係radiobutton需要两个参数嘅原因了
仲有其它Dhelper嘅、
<%= text_area_tag(:message, "Hi, nice site", :size => "24x6") %> <%= password_field_tag(:password) %> <%= hidden_field_tag(:parent_id, "5") %> <%= search_field(:user, :name) %> <%= telephone_field(:user, :phone) %> <%= url_field(:user, :homepage) %> <%= email_field(:user, :address) %>
渲染成html
<textarea cols="24" id="message" name="message" rows="6">Hi, nice site</textarea> <input id="password" name="password" type="password" /> <input id="parent_id" name="parent_id" type="hidden" value="5" /> <input id="user_name" name="user[name]" size="30" type="search" /> <input id="user_phone" name="user[phone]" size="30" type="tel" /> <input id="user_homepage" name="user[homepage]" size="30" type="url" /> <input id="user_address" name="user[address]" size="30" type="email" />
注意啦！！type为search、url、email呢D迩可能好奇怪、其实呢D类型係html5标签、需要最新嘅浏览器支持（其实都唔使最新啦、基本上2010年中下旬以后嘅浏览器都支持）、 若果
迩嘅用户好不幸係国内嘅万年IE6一族嘅话、莪地可以提供以下嘅解决方案 Modernizr 同埋yepnope、呢D插件係用JS同CSS嘅方式嚟实现以上标签嘅作用、亦就係外挂式嘅html5、番鬼
佬称为HTML5 polyfill、至于点做迩就细细研究了、其实html5浏览器亦越嚟越普及了、呢D工具迟早会没落、哈哈~~~
提下text_area_tag嘅属性:size => "24*6"、其实就係cols="24" rows = "6"嘅简化写法、非常之方便！
而从search_field到email_field係一组嘅、由:user属性嚟定义、所以由此产生嘅name係user[xxx]咁嘅值、、
