In this post, we are going to learn how to create aa forms on a web page. Many times, we need to add forms to a web page. Let us learn how to add forms to a web page.
Forms
The forms are used to make interactive web pages in HTML. A form allows taking input from a user on a web page. We fill out many types of forms in our day-to-day life, for example, filling up a form for joining a summer camp during summer vacations, filling up a form for admission in a school/collages, and many more.
HTML forms are required when you want to collect some data from the visitors of a website. For example, during user registration, you would like to collect information such as name, e-mail address, house address, and many more. A form can have different types of input fields that are specified at the time of designing a form and the users fills-in prior to submitting the form.
A webform or HTML form on a web page allows a user to enter data that is sent to a server for processing. Forms provide an interface for collecting, displaying, delivering information, and are a key component of HTML. There are various tags like text fields, drop-down menus, radio buttons, checkboxes, etc., using which forms can improve web pages, by adding means to exchange information between a client and a server. Let us learn about the working of forms.
Creating A Forms
The FORM and the INPT tags are used to create a form. Let us learn about them.
The <FORM> tag defines and creates HTML forms.
Syntax: <FORM>Form Tags</FORM>
HTML forms may contain different FORM tags.
FORM tags or control are different types of input tags, checkboxes, radio buttons, submit buttons, and more that are used to collect data in a form.
The <INPUT> tag is used to create various form controls like text box input, radio buttons, checkboxes, and many more.
HTML Forms Controls
There are different types of form controls that are used to collect data using an HTML form:
1. Text Input Controls
2. Checkboxes Control
3. Radio Button Controls
4. Select Box Controls
5. Button Controls
Let us learn about them one by one.
Text Input Controls
The control is used to collect text inputs. There are three types of text input used on the forms.
Single-line text input controls: This control is used for items that require only one line of the user input, such as search boxes or names. They are created using HTML <INPUT> tag.
Example:
<HEAD>
<TITLE> Example of Text Input Control</TITLE>
</HEAD>
<BODY>
<FORM>
First Name: <input type="text" name="first_name"/>
<BR>
Last Name: <input type="text" name="last_name"/>
</FORM>
</BODY>
</HTML>
Password Input Controls: This is also a single-line text input but it encrypts the character as soon as a user enters it. It is used to accept passwords. They are also created using HTML <INPUT> tag, but the TYPE attribute is set to passwords.
Example:
<HTML>
<HEAD>
<TITLE> Example of Password Input Controls</TITLE>
</HEAD>
<BODY>
<FORM>
User ID: <input type="text " name="user _id"/>
<BR>
Password: <input type="password" name="password"/>
</FORM>
</BODY>
</HTML>
Multi-line text input controls: This is used when the user is required to give details that may be longer than a single sentence. Multi-line input controls are created using HTML <TEXTAREA> tag.
Example:
<HTML>
<HEAD>
<TITLE> Example of Multi-Line Input Control</TITLE>
</HEAD>
<BODY>
<FORM>
Description: <BR>
<TEXTAREA rows ='5' cols='50' name="description">
Enter description here...
</TEXTAREA>
</FORM>
</BODY>
</HTML>
Checkbox Controls
The checkboxes are used when more than one option is required to be selected. They are also created using HTML<INPUT> tag, but the TYPE attribute is set to checkboxes.
Emample:
<HTML>
<HEAD>
<TITLE> Example of Checkboxes Controls</TITLE>
</HEAD>
<BODY>
<FORM>
<input type="checkbox" name="maths" value="on"> Maths
<input type="checkbox" name="physics" value="on"> Physics
</FORM>
</BODY>
</HTML>
Radio Button Controls
The radio buttons are used when out of many options, just one is required to be selected. They are also created using HTML<INPUT> tag, but the TYPE attribute is set to the radio.
Example:
<HTML>
<HEAD>
<TITLE> Example of Radio Box Control</TITLE>
</HEAD>
<BODY>
<FORMS>
<input type="radio" name="gender" value="Male"> Male
<input type="radio" name="gender" value="Female"> Female
</FORM>
</BODY>
</HTML>
Select Box Control
The select box, also called drop-down box provides an option to list down various options in the form of a drop-down list, from where a user can select one or more options.
Example:
<HTML>
<HEAD>
<TITLE> Example of Select Box Control</TITLE>
</HEAD>
<BODY>
<FORM>
<select name="dropdown">
<option value="Maths" selected>Maths</option>
<option value="Physics">Physics</option>
</select>
<FORM>
</BODY>
</HTML>
Button Controls
There are various ways in HTML to create clickable buttons. You can also create a clickable button using the <INPUT> tag by setting its type attribute to the button. The TYPE attribute can take the following values.
Example:
<HTML>
<HEAD>
<TITLE> Example of Button Control</TITLE>
</HEAD>
<BODY>
<FORMS>
<input type="submit" name="submit" value="Submit"/>
<input type="reset" name="reset" values="Reset"/>
</FORM>
</BODY>
</HTML>
We will again meet in another post. Stay Safe. Keep Learning. Keep Growing