Scribd
Upload
5 views

HTML Forms

Uploaded by

vanshthakral2004
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
5 views

HTML Forms

Uploaded by

vanshthakral2004
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 8

HTML Forms


HTML Forms use the <form> tag to collect user input through
various interactive controls. These controls range from text fields,
numeric inputs, and email fields to password fields, checkboxes,
radio buttons, and submit buttons.
Table of Content
 Form Elements
 Commonly Used Input Types in HTML Forms
 HTML Forms Example
o Basic HTML Forms
o Advance HTML Forms
Syntax:
<form>
<!--form elements-->
</form>
Form Elements
The HTML <form> comprises several elements, each serving a
unique purpose. For instance, the <label> element defines labels for
other <form> elements. On the other hand, the <input> element is
versatile and can be used to capture various types of input data
such as text, password, email, and more simply by altering its type
attribute.
Elements Descriptions

<label> It defines labels for <form> elements.

It is used to get input data from the form in various types such as text,
<input>
password, email, etc by changing its type.

It defines a clickable button to control other elements or execute a


<button>
functionality.

<select> It is used to create a drop-down list.


Elements Descriptions

<textarea> It is used to get input long text content.

It is used to draw a box around other form elements and group the related
<fieldset>
data.

<legend> It defines a caption for fieldset elements

<datalist> It is used to specify pre-defined list options for input controls.

<output> It displays the output of performed calculations.

<option> It is used to define options in a drop-down list.

<optgroup> It is used to define group-related options in a drop-down list.

Commonly Used Input Types in HTML Forms


In HTML forms, various input types are used to collect different
types of data from users. Here are some commonly used input
types:
Input Type Description

<input type=”text”> Defines a one-line text input field

<input
Defines a password field
type=”password”>

<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.


Input Type Description

<input Allows the user to enter a number. You can specify min, max,
type=”number”> and step attributes for range.

<input
Used for checkboxes where the user can select multiple options.
type=”checkbox”>

<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.

HTML Forms Example


Example 1: Basic HTML Forms
Example: This HTML form collects user personal information such
as username and password with a button to submit the form.
HTML
<!DOCTYPE html>
<html lang="en">

<head>
<title>Html Forms</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>

</html>
Output:
Basic HTML Form

Example 2: Advance HTML Forms


This HTML form collects user personal information, including name,
email, password, gender, date of birth, and address. It features
proper styling for input fields and submission buttons.
HTML
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>HTML Form</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
form {
width: 400px;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

fieldset {
border: 1px solid black;
padding: 10px;
margin: 0;
}

legend {
font-weight: bold;
margin-bottom: 10px;
}

label {
display: block;
margin-bottom: 5px;
}

input[type="text"],
input[type="email"],
input[type="password"],
textarea,
input[type="date"] {
width: calc(100% - 20px);
padding: 8px;
margin-bottom: 10px;
box-sizing: border-box;
border: 1px solid #ccc;
border-radius: 4px;
}

.gender-group {
margin-bottom: 10px;
}

.gender-group label {
display: inline-block;
margin-left: 10px;
}

input[type="radio"] {
margin-left: 10px;
vertical-align: middle;
}

input[type="submit"] {
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>

<body>
<form>
<fieldset>
<legend>User Personal Information</legend>
<label for="name">Enter your full name:</label>
<input type="text" id="name" name="name" required />
<label for="email">Enter your email:</label>
<input type="email" id="email" name="email" required />
<label for="password">Enter your password:</label>
<input type="password" id="password" name="pass" required
/>
<label for="confirmPassword">Confirm your
password:</label>
<input type="password" id="confirmPassword"
name="confirmPass" required />
<label>Enter your gender:</label>
<div class="gender-group">
<input type="radio" name="gender" value="male"
id="male" required />
<label for="male">Male</label>
<input type="radio" name="gender" value="female"
id="female" />
<label for="female">Female</label>
<input type="radio" name="gender" value="others"
id="others" />
<label for="others">Others</label>
</div>
<label for="dob">Enter your Date of Birth:</label>
<input type="date" id="dob" name="dob" required />
<label for="address">Enter your Address:</label>
<textarea id="address" name="address" required></textarea>
<input type="submit" value="Submit" />
</fieldset>
</form>
</body>

</html>
Output:

HTML Forms Example Output

Here are some of the key attributes that can be used with
the <form> element:
1. action: This attribute specifies where to send the form-data when
a form is submitted. The value of this attribute is typically a URL.
2. method: This attribute defines the HTTP method used to send
the form-data. The values can be “get” or “post”.
3. target: This attribute specifies where to display the response
received after submitting the form. The values can be “_blank”,
“_self”, “_parent”, “_top”, or the name of an iframe.
4. enctype: This attribute is used when method=“post”. It specifies
how the form-data should be encoded when submitting it to the
server. The values can be “application/x-www-form-
urlencoded”, “multipart/form-data”, or “text/plain”.
5. autocomplete: This attribute specifies whether a form should
have autocomplete on or off. When autocomplete is on, the
browser automatically completes values based on values that the
user has entered before.
6. novalidate: This Boolean attribute specifies that the form-data
should not be validated on submission.

You might also like