HTML Forms 📌

---

In this lecture, we are going to discuss about how to create a form in html.

---

What are forms?

Forms are used to gather information for a specific purpose. They are used to create order forms, surveys, and feedbacks in a webpage. HTML allows you to create such forms easily using the <form> tag.

Lets look into some basic syntax for text fields, buttons and checkboxes.

Input Tag

            
<form>
        Name
    <input type = "text">
        DOB
    <input type = "text">
</form>
            

From the above example we see that the starting of a form starts with the <form> tag. Text fields are used when you require the user to enter data in the form. This will generate a form which will look like:

Radio buttons

            
<form>
    <input type = "radio" name="gender" value="male">Male
    <input type = "radio" name="gender" value="female">Female
</form>
            

Radio buttons are used to select one of a limited number of choices. The name attribute gives the name for the field to represent in the form. The value attribute represents the value that the field is holding. This will generate a form which will look like:

Check Boxes

            
<form>
    Programming Languages
    <input type = "checkbox" name="c++">C++
    <input type = "checkbox" name="java">Java
    <input type = "checkbox" name="python">Python
</form>
            

Checkboxes are used to select one or more options of a limited number of choices. This will generate a form which will look like:

Select

            
<form>
    Year of study
    <select name="year of study">
    <option value="First">First
    <option value="Second">Second
    <option value="Third">Third
    <option value="Fourth">Fourth
    </select>
</form>
            

The select element creates a drop down list. Each choice offered by the menu is represented by an option element. This will generate a form which will look like:

Button

            
<form>
    <button type="button">Submit</button>
</form>
            

The button tag is used to create a button in the webpage. Adding it inside a <href=""> will link it to redirect to another site. This will generate a button which will look like: