A memo to simply create a form using only HTML and CSS in Rails 6
Introduction
Rails doesn't use CSS frameworks such as bootstrap, and I can't find any plain code, so that memo
Premise
There is a Reception model, the columns are names and purposes.
Target
Write such a simple form simply using only HTML and CSS
HTML
- There are 3 fields: text_field, select_field, submit
html
<%= form_with model: @reception do |f| %>
<ul>
<li>
<%= f.label :name, "name" %>
</li>
<li>
<%= f.text_field :name, placeholder: "Please enter your name" %>
</li>
<li>
<%= f.label :purpose, "Please select your request" %>
</li>
<li>
<%= f.select :purpose,
(
[
["For an interview", 'interview'],
["For an interview", 'interview'],
["For a meeting", 'meeting'],
["Other", 'Other']
]
), {}, size: "4"
%>
</li>
<li>
<%= f.submit 'Send' %>
</li>
</ul>
<% end %>
CSS
- Ruby's form_witth method generates a form tag
- Display a list of ul and li
- By specifying the select tag in the 4th argument of size: "4", 4 options can be displayed and set to the state.
css
form {
width: 60%;
margin: auto;
padding-top: 1%;
}
ul {
list-style: none;
padding-left: 0;
width: 100%;
text-align: center;
}
label {
font-size: 25px;
}
input[type=text], select {
text-align: center;
width: 55%;
font-size: 20px;
border: 1px solid #CCC;
border-radius: 1rem;
margin-bottom: 20px;
padding: 1%;
}
input[type=submit] {
text-align: center;
width: 55%;
font-size: 20px;
border: 1px solid #CCC;
border-radius: 1rem;
margin-bottom: 20px;
padding: 1%;
}
Summary
I think there is a better way to write it, so please use it as a reference.
Postscript
Correct typographical errors