Rails 刚刚发现一个 Rails 表单样式设置的小技巧

huacnlee · 2012年08月15日 · 最后由 knox 回复于 2016年08月27日 · 13688 次阅读

我时长会苦恼,表单生成的时候需要对某些字段的文本框设定不同的长度,比如 Email,地址什么的要很长很长,而 姓名,邮编 之类的需要设置短的,还有一些多行的文本框需要设定一定的高宽。

以前我都是在 text_field 后面加 :style => "width:100px" 之类的参数,这样是可以设置,但是很土鳖!

大的问题还是有时候同样的一个表单有可能会出现在前台,后台,或者前台的好几个页面(某些页面需要的字段要少一些),这就得每个用到的地方都要设置 :style 及其土鳖,而且有时候还写出来不统一...


解决方法

我最近发现一个规律可以很好解决上面的难题...

Rails 用 form_for (不管你是用 Formtastic 还是 simple_form 还是 Rails 默认的) 生成表单以后每个表单会有一个固定的 class,每个文本框会有固定的 id

  • form 的 class 是根据 Model 名称转换而来的
  • 文本框的 id 是更具 Model + 字段名出来的

比如这个例子

<%= form_for(@user) %>
  <%= f.text_field :login %>
  <%= f.text_field :password %>
  <%= f.text_field :password_confirmation %>
  <%= f.text_field :email %>
<% end %>

会得到

<form action="/users" method="POST" class="user">
   <input type="text" name="user[login]" id="user_id">
   <input type="text" name="user[password]" id="user_password">
   <input type="text" name="user[password_confirmation]" id="user_password_confirmation">
   <input type="text" name="user[email]" id="user_email">
</form>

然后,其实就只需要在 application.css 里面这么写,那么所有用到的表单都能正确的显示长度了(并且绝对靠谱!)

application.scss

form.user {
  input#user_login,
  input#user_password_confirmation,
  input#user_password { width: 100px; }
  input#user_email { width:200px; }
}

由于用了 form 打头,也就不用担心这么些会影响到其他地方的样式

你赢了。。。。

这样都可以, @huacnlee 还真不是一般的细心啊~ 👍

我一般是给 input 的 width 设置独立的样式,如 .w200, 表示 width:200px, 这样就不用单独为每个 form 写 很样式了

#3 楼 @fresh_fish 你这种方式也是很累的,主要是有些表单前后台多有的,而且 text_field 里面写 class 会让表单看起来乱糟糟的

比如 simple_form 和 Formtastic 要写 class 或 style 得这么写

<%= f.input :login, :input_html => { :class => "w200" } %>

同时,你还不能用这种了

<%= f.inputs :login, :password, :password_confirmation, :email %>

#4 楼 @huacnlee 这个倒是,可能跟我很少用 form_for 有关,一般都这么写 = text_field_tag 'login', @login, :class => 'w200'

#3 楼 @fresh_fish 不赞成这样的样式命名! 要是哪天我想把 .w200 的宽度改成 300px,你是直接 .w200{ width:300px; }呢?还是加一个 .w300{ width:300px; } 再把你用到过的.w200 标签都改成.w300?

form_for 真心方便呀

#4 楼 @huacnlee

form.user {
  #user_login,
  #user_password_confirmation,
  #user_password { width: 100px; }
  #user_email { width:200px; }
}

input 都可以省掉

#7 楼 @luoping0425 试试用用 simple_form 更方便

这样写对于 css 的复用性还是不够,最好还是可以指定一些通用的 css class

<%= f.text_field :login, class: 'long text' %>

#11 楼 @zhex 如果考虑到复用性的话,可以用 class,但不提倡用“long”这类形容词。class 名称应当和表现层脱离——比如,对于颜色的 class,不提倡用“light-grey”,而提倡用"secondary-text",诸如此类的。

确实,长度明显放在 sass 里比较科学,学习了。

谁来说说,simple_form_for 与 form_for 相比,有哪些优势?先谢。

如何限制表单重复提交,token 怎么使用

从某帖连接来的,作为前端来说 rails 的样式和 javascript 大概是前端在搞 rails 项目上面的优势😂

需要 登录 后方可回复, 如果你还没有账号请 注册新账号