0% found this document useful (0 votes)
8 views

HTML Forms

Uploaded by

Muthamil0593
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
8 views

HTML Forms

Uploaded by

Muthamil0593
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

HTML Forms

An HTML form is used to collect user input and send it to a server for processing.
It allows interaction with the user through various input elements such as text
fields, buttons, checkboxes, and dropdowns.

Common Form Elements


Element Description
<input> Used to create various input fields (text, password, etc.).
<textarea> Creates a multi-line text input.
<button> Defines a clickable button.
<select> and <option> Creates a dropdown list.
<label> Associates a label with a form element for accessibility.
<fieldset> Groups related elements in a form.
<legend> Adds a caption for a <fieldset>.

Attributes of <form>
Attribute Description
action Specifies the URL where the form data will be sent.
method Defines how the form data should be sent. Values: GET (default)
or POST.
enctype Specifies how the form data should be encoded. Common for file
uploads.
target Specifies where to display the response (_self, _blank, _parent,
_top).
autocomplete Enables or disables autofill for input fields (on, off).
novalidate Disables form validation before submission.

Ex:
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your name"
required>
<br><br>

<!DOCTYPE html>
<html>
<head>
<title>HTML Form Example</title>
</head>
<body>
<h1>Registration Form</h1>
<form action="/submit-form" method="POST">
<label for="name">Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your name"
required>
<br><br>

<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your email"
required>
<br><br>

<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
<br><br>

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

<label for="hobbies">Hobbies:</label>
<input type="checkbox" id="sports" name="hobbies" value="Sports"> Sports
<input type="checkbox" id="reading" name="hobbies" value="Reading"> Reading
<br><br>

<label for="country">Country:</label>
<select id="country" name="country">
<option value="india">India</option>
<option value="usa">USA</option>
<option value="uk">UK</option>
</select>
<br><br>

<label for="message">Message:</label>
<textarea id="message" name="message" rows="5" cols="30" placeholder="Your
message"></textarea>
<br><br>

<button type="submit">Submit</button>
<button type="reset">Reset</button>
</form>
</body>
</html>

You might also like