HTML Forms
What’s the big deal about forms?
HTML forms are one of the reasons why HTML is so important for both frontend and backend development (Specifically Ruby on Rails). In this blog post, we are going to go over how an HTML form works and what attributes it comes with. Let’s get into it!
What are HTML Forms?
An HTML form is made up of <form> tags and <input> tags that allow the user to submit information to the application. This section of the HTML document allows users to interact with the application upon arriving at your website. For example, on most applications, you have a signup or login form. These are essential for obtaining the information of the user, finding them in the database, and displaying their information on the page that is specific to that user. A signup form, it’s responsible for making sure the data being saved to the database is good data through protection you wrote in your code and save their information to the database was confirmed the user input the appropriate/expected inputs.
So how are forms important for backend development? Well, you can imagine that we have said a social media website like Instagram. Users are able to browse and follow other users because they created an account and their information was saved to the database. Saved to the database how? Through the signup form of course! When a user signs up with an application, their input values are first checked to make sure they are sending good data to the backend. What is good data? Good data is data that you expect to be sent so properly formatted and the appropriate attributes for each user. Someone can always go into dev tools and change attributes and try to save them to the database however if you use strong params it’ll protect your database and prevent any bad data from saving to your database. Now that your information was successfully sent to the database and saved, you can now log in and see other users who have an account with the application and follow them! Forms are the reason why we can see the information only for us and have the ability to comment, like, or block particular features or even users.
HTML Form and Input Attributes
Attributes describe the characteristics or properties that an element will take. An HTML form has a variety of attributes that you can utilize but the more common ones especially for login/signup forms are the action and method attributes. The action attribute describes the action that is to be performed when a form is submitted. Typically this action is the URL that processes the submission. The method attribute specifies the HTTP method that is utilized when submitting a form. So say for this signup form, you would have a form tag that looks like this <form action="/signup" method="POST"></form> . You need to send a post request so that the controllers in your backend can process the data input in the form.
Okay so how do you even build out a form? To build out a form we, of course, need the <form> tags but to actually have the user input their data we need the <input> tags! The <input> tags are typically written as children of the <form> tags like such:
<form action="/signup" method="POST">
<input />
</form>To define properties of the input tag, we need to add attributes such as type="" , name="" , value="" . There are a variety of input attributes that can shape an input but we will specifically focus on the ones mentioned. For starters, the type attribute will define the type of input the user will interact with. For instance, if type="text" the user will see a textbox to type in. The type="integer" will only allow the user to type in a number and you can set bounds to either only be between 0 to 100 and so on. The next attribute is the name attribute and this defines the name of the key when saved to the database. This is essential when trying to display the information the user puts into the database. The value is important, especially in React, to update the state whenever a change is made on the form. Make sure to look at the list of attributes for the <input> tag in order to determine which one you should use for your form!
Try It Out!
Now that we went over some of the basics of building out a form, try it on your own! There are a lot of other attributes I didn’t go over and the way in which you build out a form is also dependent on the framework you use, so make sure you understand how to send requests using your specific framework/language! Forms are fun and are essential for web development. As always, happy coding!
