Question

我有这个我想要使用的注册页面片段。我的问题是我正在使用我的rails应用程序设计，所以我不确定如何在保留样式的同时使用ruby代码替换代码段中的字段。

这是我视图中的设计代码

<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
      <%= devise_error_messages! %>
        <div class="field">
          <%= f.label :email, :class=>'formlabel' %><br />
          <%= f.email_field :email, autofocus: true %>
        </div>

        <div class="field">
          <%= f.label :password, :class=>'formlabel' %>
          <% if @minimum_password_length %>
          <em>(<%= @minimum_password_length %> characters minimum)</em>
          <% end %><br />
          <%= f.password_field :password, autocomplete: "off" %>
        </div>

        <div class="field">
          <%= f.label :password_confirmation, :class=>'formlabel' %><br />
          <%= f.password_field :password_confirmation, autocomplete: "off" %>
        </div>

        <div class="actions">
          <%= f.submit "Sign up" %>
        </div>
      <% end %>

      <%= render "teachers/shared/links" %>

这是片段

<div class="container-fluid stylish-form">
  <h2 class="text-center">Stylish Signup Page Using Bootstrap</h2>
  <div class="row mar20">
    <div class="col-md-12 col-sm-12 col-xs-12">
      <div class="inner-section">
        <form method="POST" action="https://google.co.in">
          <div class="mar20 inside-form">
            <h2 class="font_white text-center">SIGN UP</h2>
            <ul>
              <li class="icon-holder dsp-flex">
                <i class="fa fa-facebook "></i>
              </li>
              <li class="icon-holder dsp-flex">
                <i class="fa fa-twitter "></i>
              </li>
              <li class="icon-holder dsp-flex">
                <i class="fa fa-instagram "></i>
              </li>
            </ul>
            <div class="input-group">
              <span class="input-group-addon"><i class="fa fa-pencil "></i></span>
              <input type="text" class="form-control" name="text" placeholder="First Name...">
            </div>
            <div class="input-group">
              <span class="input-group-addon"><i class="fa fa-envelope "></i></span>
              <input type="email" class="form-control" name="text" placeholder="Email...">
            </div>
            <div class="input-group">
              <span class="input-group-addon"><i class="fa fa-lock "></i></span>
              <input type="password" class="form-control" name="text" placeholder="Password...">
            </div>
            <div class="footer text-center">
              <a href="http://vijender.in/" class="btn btn-neutral btn-round btn-lg">Get Started</a>
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
  <h2 class="text-center font_white">Thank You For Visiting This Snippet</h2>
</div>

Answer 1

只需替换代码段中的<input>标记即可。在原始表单上使用<%= f.email_field :email, autofocus: true %>。添加任何其他缺少的选项，如占位符等。

比较生成的HTML，最终它将是相同的。

如何用代码片段替换设计表单？

1 个答案: