我时长会苦恼,表单生成的时候需要对某些字段的文本框设定不同的长度,比如 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 打头,也就不用担心这么些会影响到其他地方的样式