How to make this field in a form work with the spans'in ERB

rubyonrails-talk
1

Hello

I found a wunderfull template where I wan to borrow a form from. A field in a form is in html :

<div class="group">
          <input type="text" name="name" id="name" required>
          <span class="highlight"></span>
          <span class="bar"></span>
          <label>Name</label>
        </div>

now I know I can use a form.text_field
but how do I get the span into the form.text_field

2

You should be able to do this:

<div class="group">
    <%= form.text_field :name %>
    <span class="highlight"></span>
    <span class="bar"></span>
    <%= form.label :name %>
</div>

The span elements in you example are not inside the text field itself, so the above code should generate the desired HTML. Be aware that you might need to adjust the id of the text field though, since the generated id will be “<your_model_name>_name”. So if the id “name” is referenced in your template, you should adjust it to match the generated id.

Hope it helps! :slight_smile:

3

I did that but on the html that rails produced the spans are not shown.

<div class="group">
              <%= form.label(:title)%>
              <%= form.text_field :title do %>
                <span class="highlight"></span>
                <span class="bar"></span>
              <% end %>
            </div>

produces here

<form class="new_article" id="new_article" action="/articles" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="4ANO_aCCkWDaWZJd_-8RnqG-9qrwRppevXqomiJujyL5nfzsXeHC8ioGLW2rrsMSDAmuJM5Of2uXQsRgBzjq0Q" />
        <div class="row">
          <div class="col-12 col-md-6">
            <div class="group">
              <label for="article_title">Title</label>
              <input type="text" name="article[title]" id="article_title" />            </div>
          </div>
       </div>
</form>    </div>
  </div>
4

Input tags can’t contain other HTML elements.
I think you’re reading the example you posted in your original post as:

<input type="text" name="name" id="name" required>
          <span class="highlight"></span>
          <span class="bar"></span>
</input>

But note that input tags don’t have a closing tag

<input type="text" name="name" id="name" required> # The input tag closes here
<span class="highlight"></span>
<span class="bar"></span>

The span elements should be at the same level as your input element in the DOM. So wrapping the span elements in the text_field form helper like this:

<%= form.text_field :title do %>
      <span class="highlight"></span>
     <span class="bar"></span>
<% end %>

will just get rid of the span elements. Instead move the span tags out of the text_field tag like this

<%= form.text_field :title %>
<span class="highlight"></span>
<span class="bar"></span>
5

Thanks, its working now.

1 Like
6

I hope I may ask a second question here

How do I convert this :

<button type="submit" class="btn original-btn">Reply</button>

in erb

I tried submit and button_to but both makes a <input ...> of it

7

You have 2 options:

  1. Modify your template to apply the relevant CSS rules to input elements with the specified classes.
  2. Submit your form with a button instead of an input element by doing this:
<%= form_with model: @article do |form| %>
    
    # Other form fields 
 
    <%= button_tag "Reply", type: "submit" %>
<% end %>
8

Thanks a lot. The page looks almost as I want it