[RUBY] Un mémo pour créer un formulaire simple en utilisant uniquement HTML et CSS dans Rails 6
introduction
Rails n'utilise pas de frameworks CSS tels que bootstrap, et je ne trouve aucun code brut, donc ce mémo
supposition
Il existe un modèle de réception, où les colonnes sont des noms et des objectifs.
Cible
Écrivez un formulaire aussi simple en utilisant uniquement HTML et CSS
HTML
- Il y a 3 champs: text_field, select_field, soumettre
html
<%= form_with model: @reception do |f| %>
<ul>
<li>
<%= f.label :name, "Nom" %>
</li>
<li>
<%= f.text_field :name, placeholder: "S'il vous plaît entrez votre nom" %>
</li>
<li>
<%= f.label :purpose, "Veuillez sélectionner votre demande" %>
</li>
<li>
<%= f.select :purpose,
(
[
["Pour une interview", 'entretien'],
["Pour une interview", 'entretien'],
["Pour une réunion", 'réunion'],
["Autre", 'Autre']
]
), {}, size: "4"
%>
</li>
<li>
<%= f.submit 'Envoyer' %>
</li>
</ul>
<% end %>
CSS
- La méthode form_witth de Ruby génère une balise form
- Afficher une liste de ul et li
- En spécifiant la balise de sélection dans le 4ème argument de taille: "4", 4 options peuvent être affichées et définies sur l'état.
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%;
}
Résumé
Je pense qu'il existe une meilleure façon de l'écrire, veuillez donc l'utiliser comme référence.
Postscript
Corriger les fautes de frappe