The HTML forms are very important part of web development. If you have ever searched something from Google. You have actually submitted a search form. If you have posted a status on facebook, twitter or any other platform you have just filled another HTML form. Similarly if you have made a purchase sometime online and filled your personal detail you actually filled a HTML form. Similarly surveys, contact forms, calculators, user information forms, article forms and many other types of forms are everywhere on web.
So as we know the forms are really very important part of the web. Similarly we know there are several types of input fields. Like text fields, telephone fields, email fields, date fields, text area, selections, radio, checkboxes and data list now days as well. Let’s try to understand them.
How to make a HTML form
To make a HTML form you just need to wrap up the fields inside <form></form> tags element.
Form tag accepts many types of attributes most important are action="" and method="" as you can see in example below.
The action="" attribute in HTML form actually tells where to submit the form when submission button is clicked on which page to send the data. In our case when button submit would be clicked all information would be sent do thankyou.html.
On other hand method="" attribute accepts two types post and get the only difference between post and get is post submits data hidden while the get submit data in URL. Get method submits data with query strings starting with ? question mark like. http://yoursite.com/?myname=”” here ?myname is being submitted with get method.
<form action="thankyou.html" method="post">
...
</form>Let’s now take a look to some types of HTML form fields before we make our form.
The Input elements
There are various types of input elements in HTML forms. Which you can use which are date, text, tel, number, date, color, and much more.
Note: default input type is text so in case you skip adding type it would be text automatically.
Other input types are listed below from which some we have explained in more detail as well.
<input type="button"><input type="checkbox"><input type="color"><input type="date"><input type="datetime-local"><input type="email"><input type="file"><input type="hidden"><input type="image"><input type="month"><input type="number"><input type="password"><input type="radio"><input type="range"><input type="reset"><input type="search"><input type="submit"><input type="tel"><input type="text"><input type="time"><input type="url"><input type="week">
Text Field
<input type=”text” is used to define the single line text field. If you want to take input of multi lines text then you can use text area. For example if you want to take first name only then text type input field is good.
<lable for="firstName">First Name</label>
<input type="text" name="firstName" id="firstName" />Password Field
You cannot take password in simple text field cause it would be seen by people around while someone entering their password. So you can always use input type password which shows only dots instead of text of password.
<label for="pwd">Password:</label><br>
<input type="password" id="pwd" name="pwd">Input Type Number
The <input type="number"> defines a numeric input field. You can also set restrictions on what numbers are accepted. The following example displays a numeric input field, where you can enter a value from 1 to 10:
<form>
<label for="percentage">Color Percentage 1 to 10:</label>
<input type="number" id="percentage" name="percentage" min="1" max="10">
</form>Date Field
The <input type="date"> defines a date picker. The resulting value includes the year, month, and day.
Tip: Always add the <label> tag for best accessibility practices!
<label for="eventDate">Event on:</label>
<input type="date" id="eventDate" name="eventDate">
Input Type Datetime-local
If you want to take the date and time <input type="datetime-local"> specifies a date and time input field, with no time zone.
Almost all modern browser supports this input type which let you take date and time from user.
<label for="pickupTime">Please select time to pick order:</label>
<input type="datetime-local" id="pickupTime" name="pickupTime">Text Area
When you want to take more than 1 line of text from user then text area is useful. For example the message user want to put is multi lines data while the first name or full name can be single line. So the single line can be taken through input text field but for more lines text area is suitable. Here is how you can create a textarea.
<textarea name="message">
The cat was playing in the garden.
</textarea>
Select or Dropdown
The select or dropdown always starts with <select> element and ends with </select> which have <options> inside to select. See the countries selection example below.
<label for="country">Choose a Country:</label>
<select id="country" name="country">
<option value="japan">Japan</option>
<option value="england">England</option>
<option value="pakistan">Pakistan</option>
<option value="usa">United States of America</option>
</select>If you want your users to select multiple fields from dropdown then use multiple before ending of <select id=”country” name=”country” multiple> see example below.
<label for="country">Select more than 1 country hold CTRL:</label>
<select id="country" name="country" multiple>
<option value="japan">Japan</option>
<option value="england">England</option>
<option value="pakistan">Pakistan</option>
<option value="usa">United States of America</option>
</select>Data lists
Data list is or datalist in html is new type of HTML element. Which is supported by all modern browsers. Its actually an enhanced way to present the dropdown. When you have hundreds of selectable options and want your users to enter few words for autocomplete or send something which is not in the selection field then datalists are useful. See example below.
<label for="browser">Choose your browser from the list:</label>
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>Radio
Radio input type is actually a circle of choice. From various available options user can select only one option. Radio inputs are mostly used when there are just few selections. For example if you want to ask Gender of your user the radio can be good choice which would let only 1 gender option to be selected. See example
<label for="gender">Select Gender</label>
<input type="radio" name="gender" value="male" /> Male <br>
<input type="radio" name="gender" value="female" /> Female <br>
<input type="radio" name="gender" value="n/a" /> Don't wanna tell <br>Checkbox
Checkboxes are used when you think your user can select more than one option. For example for a product there are 3 addons like include ice, include chocolate, include packing. These type of selections are best taken with input checkboxes. See example.
<label for="addons">Select Drink Addons</label>
<input type="checkbox" value="ice" name="addons" /> Ice <br>
<input type="checkbox" value="chocolate" name="addons" /> Chocolate <br>
<input type="checkbox" value="packing" name="addons" /> Packing <br>Submit button
Submit button is of course important without the submit button user would not be able to submit the form. Yes they can submit by clicking enter and there are other javascript methods to post the form. But still the button is ease and understandable thing. The Submit button can be very easy. In which the value is actually the label of button. See example below. The input type submit is actually makes a button to submit.
<input type="submit" value="Send Message!" />Input Type Reset
<input type="reset"> defines a reset button that will reset all form values to their default values. This is just like the Submit button but works to reset form instead submitting it.
<input type="reset" value="Reset Form" />Working Example of an HTML form
I hope now you have established your understanding with HTML forms nicely. Now its time to bring a full form’s working example in action. This is simple form but will let you know how to make a complete form.
<form method="get" action="thankyou.html">
<table align="center">
<tr>
<td>Full Name</td>
<td>
<input type="text" value="" placeholder="Enter name here ..." />
</td>
</tr>
<tr>
<td>Telephone</td>
<td>
<input type="tel" value="" placeholder="Enter phone ..." />
</td>
</tr>
<tr>
<td>Email</td>
<td>
<input type="email" value="" placeholder="your email ..." />
</td>
</tr>
<tr>
<td>
<lable for="password">Password</lable></td>
<td>
<input type="password" name="password" value="" placeholder="Enter name here ..." />
</td>
</tr>
<tr>
<td>Message</td>
<td>
<textarea placeholder="Your message here.."></textarea>
</td>
</tr>
<tr>
<td>Your City</td>
<td>
<select>
<option value="">Select your location</option>
<option value="lahore">Lahore</option>
<option value="sialkot">Sialkot</option>
</select>
</td>
</tr>
<tr>
<td>Your Gender</td>
<td>
Male: <input type="radio" name="yourGender" value="male" /> <br>
Female: <input type="radio" name="yourGender" value="female" /> <br>
Not Knonw: <input type="radio" name="yourGender" value="not_known" /> <br>
</td>
</tr>
<tr>
<td>Accept terms?</td>
<td>
Yes I do: <input type="checkbox" name="acceptTerms" value="1" />
</td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Send my message" /></td>
</tr>
</table>
</form>
Conclusion
As now we know that from searching online to signing in online. Or posting your social media status to writing an article. Posting a comment or submitting a purchase form’s personal information. Everything is related to HTML forms so its very important you know almost everything. The basic usage to pro usage of HTMl is very important to understand. Further how to catch the data from HTML is based on server side scripting languages. Which we will cover later but for now make sure you know almost all HTML related to HTML or Web forms. Please watch the video below for detailed introduction.
If you want to get the full source code of Forms in HTML tutorial please download in link below.
View Simple HTML form example: Introduction to Forms
Download Resource Code : Download Zip File
View Previous Lecture: Tables in HTML – HTML Tutorial – Web Application Development