[RUBY] Ein Memo zum Erstellen eines einfachen Formulars, das nur HTML und CSS in Rails 6 verwendet
Einführung
Rails verwendet keine CSS-Frameworks wie Bootstrap, und ich kann keinen einfachen Code finden, also dieses Memo
Annahme
Es gibt ein Empfangsmodell, bei dem die Spalten Namen und Zwecke sind.
Ziel
Schreiben Sie ein so einfaches Formular nur mit HTML und CSS
HTML
- Es gibt 3 Felder: 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: "Bitte geben Sie Ihren Namen ein" %>
</li>
<li>
<%= f.label :purpose, "Bitte wählen Sie Ihre Anfrage" %>
</li>
<li>
<%= f.select :purpose,
(
[
["Für ein Interview", 'Interview'],
["Für ein Interview", 'Interview'],
["Für ein Treffen", 'Treffen'],
["Andere", 'Andere']
]
), {}, size: "4"
%>
</li>
<li>
<%= f.submit 'Senden' %>
</li>
</ul>
<% end %>
CSS
- Rubys form_witth-Methode generiert ein Formular-Tag
- Zeigen Sie eine Liste von ul und li an
- Durch Angabe des Auswahl-Tags im 4. Argument der Größe: "4" können 4 Optionen angezeigt und auf den Status gesetzt werden.
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%;
}
Zusammenfassung
Ich denke, es gibt einen besseren Weg, es zu schreiben, also benutze es bitte als Referenz.
Nachtrag
Richtige Tippfehler
Recommended Posts