Let’s say we have a simple website. On this website we list news articles that are submitted by our users. We need to have a way to take in that information from the user so let’s create a simple form. Here is how you do it…
What is happening here? First things first, anything that you want to be included in your form will be wrapped up in opening and closing
Let’s take a look at the first line of this.
In this line we are specifying to different things.
action="/articles'is saying, when the submit button has been clicked, take the information gathered from this form and send it over to the page
method="post"is saying, when you get to the page that is designated in
i.e /articles) we want to take the information gathered and append it to something (store it on our server).
The form is going to want to do something with submitted information, this is why we designate a destination for the information and then, just as important, is what TO DO with the information. We do not want to
GET the information, we want to store it.
GET would simply display it, we want first store it with a
POST method and then later we can call on it from its new location if we want to later display it on some other page.
Label does something for us that will enhance user experience, what is that? If you click on the text
Title: the input box will get highlighted and direct you to submit information. If you look at the line below it, we see that the attributes of
name both share the same value as
for in our
label tag. When we see
for="insertValue" in a label tag it will be pointing towards an
input tag, but more specifically towards the
name attribute of that
input tag. This way they are now linked up nicely.
For this example we have 3 fields we want to be submitted, “name, url and description“. We will have
label tags associated with each
input field. The final touch to this is of course our
submit button. This is straightforward and does exactly what we want it to do. If you want to get fancy and rename
submit to display some other type of text on the button you can add an attribute to the input field like this:
and there you have it.
If you were wondering about what happens with our information, here is an idea of what you could expect to see on our
So here, we have taken our data and redirected it back to
/articles. We already have an
/articles method in our
server.rb file but our form has designated this information to be a
POST so we create a
POST method for that page like so.
If you were to throw in a
binding.pry here (highly recommended to get used to how data is being transferred and shared) you could type into your terminal
params . This would return a Hash of values. This is going to be the information inputted by the user.
The problem with params is that the Hash is temporary. If we do not store it somewhere, it will purge itself once the redirect is complete. So, we create variables and assign them to each key/value pair inside of our
This is then appended to a
CSV file and then we are redirected back to
/articles which we are actually already on, but this time it will be a
GET method that picks it up and not
POST since we did not designate it to be a
POST in our redirect.
From there we will be able to call on our
CSV file and display it if we like. Congratulations, you just created a simple form and successfully stored user data on your localhost server!