Rails - 标签 link 的简单形式不可点击
Rails - simple form for label link not clickable
我为 'agree with policy' 复选框制作了自定义标签。在这个标签中,我做了一个 link ,我想将其设置为用户同意的策略。现在我已经将 link 设置为 root 作为测试。
复选框是可以点击的。然而,自定义标签中的 link 不是吗?
表格:
<div id="signup">
<h2>Sign up</h2>
<%= simple_form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<div class="form-inputs">
<%= f.input :email, required: true, autofocus: true, placeholder: "Email", label: false %>
<%= f.input :first_name, required: true, autofocus: true, placeholder: "First name", label: false %>
<%= f.input :last_name, autofocus: true, placeholder: "Last name", label: false %>
<%= f.input :password, required: true, hint: ("#{@minimum_password_length} characters minimum" if @minimum_password_length), placeholder: "Password", label: false %>
<%= f.input :password_confirmation, required: true, placeholder: "Confirm password", label: false %>
<%= f.input :agree_with_policy, as: :boolean, boolean_style: :inline, label: ("I agree to the #{link_to 'Terms of Service', root_path}.").html_safe %>
</div>
<div class="form-actions">
<%= f.button :submit, "Sign up" %>
</div>
<% end %>
</div>
低于呈现的 HTML:
<div id="signup" style="display: block;">
<h2>Sign up</h2>
<form novalidate="novalidate" class="simple_form new_user" id="new_user" action="/users" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="authenticity_token" value="yagrA8LqprToyfLLZkpfvJ8NALBngVshr9g4MdmqzhfQnaCFpRkfWko3YTVq9f6cyFX5ePqGXa5iAPS4aL2WsQ==">
<div class="form-inputs">
<div class="form-group email required user_email"><input class="form-control string email required" autofocus="autofocus" required="required" aria-required="true" placeholder="Email" type="email" value="" name="user[email]" id="user_email"></div>
<div class="form-group string required user_first_name"><input class="form-control string required" autofocus="autofocus" required="required" aria-required="true" placeholder="First name" type="text" name="user[first_name]" id="user_first_name"></div>
<div class="form-group string required user_last_name"><input class="form-control string required" autofocus="autofocus" placeholder="Last name" type="text" name="user[last_name]" id="user_last_name"></div>
<div class="form-group password required user_password"><input class="form-control password required" required="required" aria-required="true" placeholder="Password" type="password" name="user[password]" id="user_password"></div>
<div class="form-group password required user_password_confirmation"><input class="form-control password required" required="required" aria-required="true" placeholder="Confirm password" type="password" name="user[password_confirmation]" id="user_password_confirmation"></div>
<div class="form-group boolean required user_agree_with_policy"><div class="checkbox"><input name="user[agree_with_policy]" type="hidden" value="0"><input class="boolean required" type="checkbox" value="1" name="user[agree_with_policy]" id="user_agree_with_policy"><label class="boolean required" for="user_agree_with_policy"><abbr title="required">*</abbr> I agree to the <a href="/terms-of-service">Terms of Service</a> and the <a href="/privacy-policy">Privacy Policy</a>.</label></div></div>
</div>
<div class="form-actions">
<input type="submit" name="commit" value="Sign up" class="btn" data-disable-with="Sign up">
</div>
不是在 f.input
中添加标签,而是通过设置 false 简单形式设置 label: false
不会为这个特定字段创建标签,而是我们可以自己创建。然后创建一个正常的 html <label></label>
当它呈现时它的行为也与您当前的视图相同。更新如下:
<label for="resource_agree_with_policy">I agree to the <%= link_to 'Terms of Service', root_path %></label>
<%= f.input :agree_with_policy, as: :boolean, boolean_style: :inline, label: false %>
注意:您可以根据自己的样式更新 HTML 标签。这里要知道的重要事情是 label: false
in f.input :agree_with_policy
.
我为 'agree with policy' 复选框制作了自定义标签。在这个标签中,我做了一个 link ,我想将其设置为用户同意的策略。现在我已经将 link 设置为 root 作为测试。
复选框是可以点击的。然而,自定义标签中的 link 不是吗?
表格:
<div id="signup">
<h2>Sign up</h2>
<%= simple_form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
<div class="form-inputs">
<%= f.input :email, required: true, autofocus: true, placeholder: "Email", label: false %>
<%= f.input :first_name, required: true, autofocus: true, placeholder: "First name", label: false %>
<%= f.input :last_name, autofocus: true, placeholder: "Last name", label: false %>
<%= f.input :password, required: true, hint: ("#{@minimum_password_length} characters minimum" if @minimum_password_length), placeholder: "Password", label: false %>
<%= f.input :password_confirmation, required: true, placeholder: "Confirm password", label: false %>
<%= f.input :agree_with_policy, as: :boolean, boolean_style: :inline, label: ("I agree to the #{link_to 'Terms of Service', root_path}.").html_safe %>
</div>
<div class="form-actions">
<%= f.button :submit, "Sign up" %>
</div>
<% end %>
</div>
低于呈现的 HTML:
<div id="signup" style="display: block;">
<h2>Sign up</h2>
<form novalidate="novalidate" class="simple_form new_user" id="new_user" action="/users" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="authenticity_token" value="yagrA8LqprToyfLLZkpfvJ8NALBngVshr9g4MdmqzhfQnaCFpRkfWko3YTVq9f6cyFX5ePqGXa5iAPS4aL2WsQ==">
<div class="form-inputs">
<div class="form-group email required user_email"><input class="form-control string email required" autofocus="autofocus" required="required" aria-required="true" placeholder="Email" type="email" value="" name="user[email]" id="user_email"></div>
<div class="form-group string required user_first_name"><input class="form-control string required" autofocus="autofocus" required="required" aria-required="true" placeholder="First name" type="text" name="user[first_name]" id="user_first_name"></div>
<div class="form-group string required user_last_name"><input class="form-control string required" autofocus="autofocus" placeholder="Last name" type="text" name="user[last_name]" id="user_last_name"></div>
<div class="form-group password required user_password"><input class="form-control password required" required="required" aria-required="true" placeholder="Password" type="password" name="user[password]" id="user_password"></div>
<div class="form-group password required user_password_confirmation"><input class="form-control password required" required="required" aria-required="true" placeholder="Confirm password" type="password" name="user[password_confirmation]" id="user_password_confirmation"></div>
<div class="form-group boolean required user_agree_with_policy"><div class="checkbox"><input name="user[agree_with_policy]" type="hidden" value="0"><input class="boolean required" type="checkbox" value="1" name="user[agree_with_policy]" id="user_agree_with_policy"><label class="boolean required" for="user_agree_with_policy"><abbr title="required">*</abbr> I agree to the <a href="/terms-of-service">Terms of Service</a> and the <a href="/privacy-policy">Privacy Policy</a>.</label></div></div>
</div>
<div class="form-actions">
<input type="submit" name="commit" value="Sign up" class="btn" data-disable-with="Sign up">
</div>
不是在 f.input
中添加标签,而是通过设置 false 简单形式设置 label: false
不会为这个特定字段创建标签,而是我们可以自己创建。然后创建一个正常的 html <label></label>
当它呈现时它的行为也与您当前的视图相同。更新如下:
<label for="resource_agree_with_policy">I agree to the <%= link_to 'Terms of Service', root_path %></label>
<%= f.input :agree_with_policy, as: :boolean, boolean_style: :inline, label: false %>
注意:您可以根据自己的样式更新 HTML 标签。这里要知道的重要事情是 label: false
in f.input :agree_with_policy
.