Welcome to the second article in TheITStuff’s HTML tutorial series. In this article, we will look at forms in HTML and how you can use various types of inputs to get user data from a webpage.
We have discussed several types of elements like paragraphs, headings, images etc. They display data on web-pages. But input elements are different from normal elements. Input elements allow users to input some data in them. This data can then be sent to the website’s server. Every time you type in a post on Facebook or a tweet on twitter, it is an input element that takes data from you and sends it to the server.
Input tags can be used to input text, number, files, emails, passwords etc. We will see some input tags later in this article. Input tags are empty tags so you do not need to close them. An input tag has a syntax similar to this
<input type=”text” name=”first_name”>
Forms & the form tag
Forms are the collection of input elements in HTML, The form tag(<form>) acts as the parent container for a form. Forms are often used to send a group of related data to the server.
Below is an example code for a form.
<form method=”POST” action=”formdata.php”>
<input type="text" name="username"> <br>
<input type="password" name="password"> <br>
Male<input type="radio" name="gender" value="Male">
Female<input type="radio" name="gender" value="Female"><br>
<input type="checkbox" name="age" value="18+">Above 18<br>
<input type="checkbox" name="nationality" value="Indian">Indian <br>
<input type="submit" value="Submit">
Copy the code to your HTML file and you should see the following output.
Let us now have a look at all the various input types that we have used in the above form.
- Text – To take simple text input from the user.
- Password -To take password inputs that are hidden
- Radio – To choose one from multiple options.
- Checkbox – To select multiple options.
- Submit – To submit the contents of the form, works as a button.
Also in the form tag, you can see some additional properties like
action=”formdata.php”. This means that the form will send the data via the POST method to the file named formdata.php. You may not understand this right now but don’t worry as this comes in the server part.
There are many more input types and with HTM5, input elements have become very flexible. Some of them are as follows.
- Number – Used to take numerical inputs only.
- Textarea – This is not an empty tag and you need to close it, it is often used to input longer chunks of texts.
- Color – New in HTML5, lets you choose a color by Hex-Code.
- Date & Time – Let you choose a date and time by providing a calendar’s GUI.
HTML can be used to create forms and accept user’s data. There are various different types of input elements that HTML offers to accept different types of data. These elements when grouped together are called forms. I hope you get the idea of how input elements and forms work in HTML if you have any questions let me know in the comments section and I’ll be there for you.