Today’s Creating Forms in HTML and Creating Input Elements in HTML. 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.
Creating Forms in HTML
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 into 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
Input tags can be used to input text, numbers, 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"></form>
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 method=”POST” and 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 GUI.
Conclusion
HTML can be used to create forms and accept user’s data. There are various types of input elements that HTML offers to accept different types of data. These elements when grouped 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.
