HTML Forms
HTML forms, defined using the <form> Tags are essential for
collecting user input on web pages. They incorporate a variety
of interactive controls such as text fields, numeric inputs, email
fields, password fields, checkboxes, radio buttons, and submit
buttons. Over 85% of websites rely on forms to gather data from
users, making them a fundamental component of modern web
development.
Syntax:
<form>
<!--form elements-->
</form>
Basic HTML Forms Example
<!DOCTYPE html>
<html>
<head>
<title>HTML</title>
</head>
<body>
<h2>HTML Forms</h2>
<form>
<label for="username">Username:</label><br>
<input type="text" id="username" name="username"><br><br>
<label for="password">Password:</label><br>
<input type="password" id="password" name="password"><br><br>
<input type="submit" value="Submit">
</form>
</body>
Advance HTML Forms
This HTML form collects users personal information,
including name, email, password, gender, date of birth,
and address. It features proper styling for input fields and
submission buttons.
Form Elements
Elements Descriptions
<label> It defines labels for <form> elements.
It is used to get input data from various types such as
<input>
text, password, email, etc by changing its type.
It defines a clickable button to control other elements or
<button>
execute a functionality.
<select> It is used to create a drop-down list.
<textarea> It is used to get input long text content.
It is used to draw a box around other form elements and
<fieldset>
group the related data.
<legend> It defines a caption for fieldset elements
It is used to specify pre-defined list options for input
<datalist>
controls.
<output> It displays the output of performed calculations.
<option> It is used to define options in a drop-down list.
It is used to define group-related options in a drop-down
<optgroup>
list.
Commonly Used Input Types in HTML Forms
Input Type Description
<input type="text"> Defines a one-line text input field
<input type="password"> Defines a password field
<input type="submit"> Defines a submit button
<input type="reset"> Defines a reset button
<input type="radio"> Defines a radio button
<input type="email"> Validates that the input is a valid email address.
Allows the user to enter a number. You can specify
<input type="number">
min, max, and step attributes for range.
Used for checkboxes where the user can select
<input type="checkbox">
multiple options.
<input type="date"> Allows the user to select a date from a calendar.
<input type="time"> Allows the user to select a time.
<input type="file"> Allows the user to select a file to upload.
Thank You