In this article, you will create a web form. Form is generally used to collect user data. For example, you might have seen a login page. It is a form containing many different input types to collect
Forms will go inside the body tag. Examples of form tag are shown below
1 – Text
The <input type=”text”> gives you the field to input text.
<form>
<input type = "text">
</form>2 – Labels and Placeholder
Placeholder is displayed before user enters anything.
Label defines label for form elements. The for attribute should be equal to id of input type to bind them together.
<form>
<label for="first">First Name</label><br>
<input id = "first" type = "text" placeholder="First Name"><br>
<label for="second">Last Name</label><br>
<input id = "second" type = "text" ><br>
</form>Output of the program is given below
3 – Submit Button
When the input type is submit, then it defines a button which is used to submit the data to a page. You can add submit button using <input type=”submit”>. For example
<form>
<label for="first">First Name</label><br>
<input id = "first" type = "text" placeholder="First Name"><br>
<label for="second">Last Name</label><br>
<input id = "second" type = "text" ><br>
<input type="submit" value = "Submit">
</form>The output of the above program will be rendered as
4 – Radio and Check boxes Button
We can have radio and check boxes. When we need to select any one from a series, we use radio button and if we need to select multiple we should use checkboxes. For example,
<p>Select Gender</p>
<form>
<input type="radio" id="male">
<label for="male">Male</label><br>
<input type="radio" id="female" >
<label for="female">Female</label><br>
<input type="radio" id="other">
<label for="other">Other</label>
</form> The output of the program is as follows
id of input should be equal to for of label.
Check box example
<p>What can you make?</p>
<form>
<input type="checkbox" id="cake">
<label for="cake">Cake</label><br>
<input type="checkbox" id="ice-cream">
<label for="ice-cream">Ice-Cream</label><br>
<input type="checkbox" id="bread">
<label for="bread">Bread</label>
</form> The output of the above program will be
You can set radio or checkbox to default by adding checked as shown below
<input type="checkbox" id="cake" checked>5 – Action Attribute
When you click the submit button, the data needs to be sent to a proper location. This is done using action attribute. Action is a form attribute. It is written as
<form action="submit_data.php">...</form>So, the data is sent to submit_data.php file. This file then saves the data or displays the data according to the functionality.
If the data is left blank, then the action is taken by the same page.
6 – Name-Value Attributes
Name Value is used when the data is submitted. When you click submit button, the value goes in the form of Name-Value pair. In all the above example, you did not have any name-value pair, so you won’t get any data submitted. So, it is better to have a name for the data you want to submit and its value.
<form action="/submit_data.php">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</form>In the above case, for First name, name is “fname” and the value you will be the value you will insert into the text box.
<form action="/submit_data.php">
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label><br>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br>
<input type="submit" value="Submit">
</form>In this name is “gender” and the value will be what you select from the two, i.e. either “male” or “female” and submit. So, radio buttons have same name and different key and any one of them selected.
Checkboxes have different name-value pair. And the selected ones are passed to the submit page.
You can try your forms here.