//
you're reading...
Codes, Design, Rails, Webs

HTML và RHTML

Để thuận tiện cho việc viết mã trong phần View, Rails đã tích hợp cú pháp của mình thành các mã RHTML để thể hiện các mã HTML tương ứng trong phần View. Dưới đây là danh sách mã RHTML của Rails tương ứng với các thẻ HTML cổ điển.

Input Text:

HMTL:

<input id="p_name" name="p[name]" size="30" type="text" />

RHTML:

<%= text_field :p , :name %> 

HTML:

<input class="login" id="p_name" name="p[name]" size="20" type="text" />

RHTML:

<%= text_field :p , :name, :class=>'login', :size=>'20' %>

Password Input:

HMTL:

<input id="p_name" name="p[name]" size="30" type="password" />

RHTML:

<%= password_field :p , :name%> 
<%= password_field :p , :name, :class=>'login', :size=>'20' %>

Hidden:

HMTL:

<input id="p_name" name="p[name]" type="hidden" />

RHTML:

<%= hidden_field :p , :name%>

File:

HMTL:

<input id="p_name" name="p[name]" size="30" type="file" />

RHTML:

<%= file_field :p , :name %>

Radio:

HMTL:

<input id="p_name_value" name="p[name]" type="radio" value="value" />

RHTML:

<%= radio_button :p , :name,'value' %>

Checkbox:

HMTL:

<input id="p_name" name="p[name]" type="checkbox" value="1" />

RHTML:

<%= check_box :p , :name,:valeur_on=>1, :valeur_off=>0 %>

Image:

HMTL:

<img alt="Image" src="/images/image.jpg" />

RHTML:

<%= image_tag '/image.jpg'%>

Button To:

HMTL:

<form method="post" action="/controller/action/value_id" class="button-to"><div><input type="submit" value="title" /></div></form>

RHTML:

<%= button_to 'title' :controller=>'controller', :action=>'action', :id=>'value_id' %>

Submit Tag:

HMTL:

<input name="commit" type="submit" value="title_button" />

RHTML:

<%= submit_tag 'title_button'%>

Image Submit Tag:

HMTL:

<input src="/images/rails.png?1175454202" type="image" />

RHTML:

<%= image_submit_tag 'rails.png'%>

~Theo Developez~

Advertisements

Discussion

One thought on “HTML và RHTML

  1. Very Interesting and helpful. I have a web design blog to, check it out at http://tkgblog.wordpress.com

    Posted by tkgword | 04.08.2010, 18:58

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: