HTML Form

HTML forms are used to collect user input. They are essential for tasks such as user registration, login, and submitting information. A form can include various input elements like text fields, radio buttons, checkboxes, and more.

HTML input element

The HTML <input> element is a versatile and essential part of web forms, allowing users to enter data in various formats. Different types of <input> elements can be used to capture a wide range of user input, from text and numbers to dates and files. Each type of input can have specific attributes to customize its behavior.

Text input

 <form>
	<!-- Text Input -->
	<label for="username">Username:</label><br>
	<input type="text" id="username" name="username" placeholder="Enter your username">
</form>

Username:

Password Input

 <form>
	 <label for="password">Password:</label><br>
     <input type="password" id="password" name="password" minlength="6">
</form>

Password:

Email Input

 <form>
	    <label for="email">Email:</label><br>
        <input type="email" id="email" name="email">
</form>

Email:

Radio Buttons

 <form>
  <label>Gender:</label><br>
        <input type="radio" id="male" name="gender" value="male" checked>
        <label for="male">Male</label><br>
        <input type="radio" id="female" name="gender" value="female">
        <label for="female">Female</label>
</form>

Gender:
Male
Female

Checkboxes

<form>
<label>Hobbies:</label><br>
        <input type="checkbox" id="hobby1" name="hobbies" value="reading">
        <label for="hobby1">Reading</label><br>
        <input type="checkbox" id="hobby2" name="hobbies" value="traveling">
        <label for="hobby2">Traveling</label><br>
        <input type="checkbox" id="hobby3" name="hobbies" value="gaming">
        <label for="hobby3">Gaming</label>
</form>

Hobbies:
Reading
Traveling
Gaming

Dropdown Select

<form>
 <label for="country">Country:</label><br>
        <select id="country" name="country">
            <option value="in">India</option>
            <option value="us">Unites States</option>
            <option value="uk">United Kingdom</option>
            <option value="au">Australia</option>
        </select>
</form>

Country:
India Unites States United Kingdom Australia

File Upload

<form>
<label for="resume">Upload Resume:</label><br>
<input type="file" id="resume" name="resume" accept=".pdf,.doc,.docx">
</form>

Upload Resume:

Number Input

<form>
<label for="age">Age:</label><br>
<input type="number" id="age" name="age" min="18" max="100">
</form>

Age:

Date Input

<form>
<label for="dob">Date of Birth:</label><br>
<input type="date" id="dob" name="dob">
</form>

Date of Birth: