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 スクリーンショット 2020-09-29 13.14.53.png

HTML

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

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

Recommended Posts

A memo to simply create a form using only HTML and CSS in Rails 6
[Rails 6] How to create a dynamic form input screen using cocoon
How to create a query using variables in GraphQL [Using Ruby on Rails]
How to easily create a pull-down in Rails
How to convert A to a and a to A using AND and OR in Java
[Rails 6] How to set a background image in Rails [CSS]
[Rails] Create sitemap using sitemap_generator and deploy to GAE
Create a drag-and-drop markdown editor in Rails 6 (using Active Storage, SimpleMDE and Inline Attachment)
How to implement a circular profile image in Rails using CarrierWave and R Magick
I want to create a form to select the [Rails] category
Apply CSS to a specific View in Ruby on Rails
Click the [rails] button to create a random alphanumeric password and enter it in the password field
Preparing to create a Rails application
Create a new app in Rails
Implement a contact form in Rails
Install Rails in the development environment and create a new application
Inexperienced create a weather app using OpenWeatherMap and deploy it to Netlify
[Rails] I want to send data of different models in a form
[Ruby on Rails] How to log in with only your name and password using the gem devise
How to insert a video in Rails
Try to create a browser automatic operation environment using Selenide in 5 minutes
[Docker] How to create a virtual environment for Rails and Nuxt.js apps
Steps to set a favicon in Rails
[Rails] [Memo] When to add = to <%%> and when not
[rails] How to create a partial template
[Rails] How to create a table, add a column, and change the column type
Have a tool to create and open a new canvas in Mac preview
[Rails / JavaScript / Ajax] I tried to create a like function in two ways.
How to store data simultaneously in a model associated with a nested form (Rails 6.0.0)
[Spring sample code included] How to create a form and how to get multiple records
How to create an Excel form using a template file with Spring MVC
Create authentication function in Rails application using devise
Convert to a tag to URL string in Rails
[Rails] rails new to create a database with PostgreSQL
Try to create a bulletin board in Java
A memo when fumbling and developing using JavaFX
How to create a theme in Liferay 7 / DXP
How to implement a like feature in Rails
[Rails] How to create a Twitter share button
How to make a follow function in Rails
Implement a reservation system using Rails and simple calendar! Let's add validation to datetime!
Until you create a Spring Boot project in Intellij and push it to Github
[Personal application work memo] How to display a bar graph and a line graph in one graph
Create a private key / public key in CentOS8.2 and connect to SSH with VS Code
I tried using Wercker to create and publish a Docker image that launches GlassFish 5.
[No need for Gem! !! HTML & CSS only] Easy way for beginners to create drop-down menus
Docker command to create Rails project with a single blow in environment without Ruby
Place "Create a to-do list using Rails API mode and React Hooks" on docker
Create a Java Servlet and JSP WAR file to deploy to Apache Tomcat 9 in Gradle
Create a portfolio app using Java and Spring Boot
[Introduction] Try to create a Ruby on Rails application
How to create a Java environment in just 3 seconds
[Rails] How to create a signed URL for CloudFront
How to implement a like feature in Ajax in Rails
Change date and time to Japanese notation in Rails
Reasons to include ActiveModel :: Model to create a Form object
How to create a Spring Boot project in IntelliJ
I want to use a little icon in Rails
A memorandum when trying to create a GUI using JavaFX
Throw raw SQL to a read replica in Rails
I tried to create a Clova skill in Java