Skip to content
Antonio Pagano edited this page Jan 26, 2018 · 3 revisions

The form helper allows you to build forms into your HTML, meaning you can do things like:

<%= form({action:"/talks/3", method: "PUT"}) { %>
<div class="row">
  <div class="col-md-12">
    <%= f.InputTag({name:"Title", value: talk.Title }) %>
  </div>

  <div class="col-md-6">
    <%= f.TextArea({value: talk.Abstract, hide_label: true }) %>
  </div>

  <div class="col-md-6">
    <%= f.SelectTag({name: "TalkFormatID", value: talk.TalkFormatID, options: talk_formats}) %>
    <%= f.SelectTag({name: "AudienceLevel", value: talk.AudienceLevel, options: audience_levels }) %>
  </div>

  <div class="col-md-12">
    <%= f.TextArea({name: "Description", value: talk.Description, rows: 10}) %>
  </div>
  <div class="col-md-12">
    <%= f.TextArea({notes:"Notes", value: talk.Notes, rows: 10 }) %>
  </div>

</div>
<% } %>

And you will get output similar to this:

<form action="/talks/3" method="POST">
  <input name="authenticity_token" type="hidden" value="e0c536b7a1a7d752066727b771f1e5d02220ceff5143f6c77b">
  <input name="_method" type="hidden" value="PUT">
  <div class="row">
    <div class="col-md-12">
      <div class="form-group">
        <input class=" form-control" name="Title" type="text" value="My Title">
      </div>
    </div>
    <div class="col-md-6">
      <div class="form-group">
        <textarea class=" form-control">some data here</textarea>
      </div>
    </div>

    <div class="col-md-6">
      <div class="form-group">
        <select class=" form-control" name="TalkFormatID">
          <option value="0" selected>Talk</option>
          <option value="1">Lightning Talk</option>
          <option value="2">Workshop</option>
          <option value="3">Other</option>
        </select>
      </div>
      <div class="form-group">
        <select class=" form-control" name="AudienceLevel">
          <option value="All" selected>All</option>
          <option value="Beginner">Beginner</option>
          <option value="Intermediate">Intermediate</option>
          <option value="Advanced">Advanced</option>
        </select>
      </div>
    </div>

    <div class="col-md-12">
      <div class="form-group">
        <textarea class=" form-control" name="Description" rows="10">some data here</textarea>
      </div>
    </div>

    <div class="col-md-12">
      <div class="form-group">
        <textarea class=" form-control" notes="Notes" rows="10">some data here</textarea>
      </div>
    </div>
  </div>
</form>
Clone this wiki locally