HTML Form Element
HTML form elements are essential components used to create interactive
forms on web pages. They allow users to input data and interact with the
website. Here are some commonly used form elements in HTML:
<input>
element is versatile and can be used for various types of user input, such
as text, passwords, checkboxes, radio buttons, and more.Syntax:
<input type="text" name="username" id="username">
<input type="password" name="password" id="password">
<input type="checkbox" name="subscribe" id="subscribe">
<input type="radio" name="gender" id="male" value="male">
<input type="radio" name="gender" id="female"
value="female">
2. Label: Provides a label for an
<input>, <textarea>, or <select> element, improving accessibility and usability.Syntax:
<label for="username">Username:</label>
3. Textarea: Allows for multiline text input.
Syntax:
<textarea name="message" id="message" rows="4"
cols="40"></textarea>
4. Select: Creates a dropdown list for selecting
one or more options.
Syntax:
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="tata nexon">Tata Nexon</option>
<option value="maruti fronx">Maruti
Fronx</option>
<option value="audi">Audi</option>
</select>
5. Button: Represents a clickable button, often used to
submit a form or trigger a JavaScript function.
Syntax:
<button type="submit">Submit</button>
<button type="button" onclick="alert('Hello!')">Click
Me!</button>
6. Fieldset and Legend: Used to group related form
elements and provide a caption (legend) for the group.
Syntax:
<fieldset>
<legend>Personal Information</legend>
<!-- form elements go here -->
</fieldset>
7. Form: Defines an HTML form for user input.
Syntax:
<form action="/submit-form" method="post">
<!-- form elements go here -->
</form>
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>HTML Form Example</title>
</head>
<body>
<h2>Sample HTML Form</h2>
<form action="/submit-form" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username"
required><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"
required><br><br>
<label for="subscribe">Subscribe to
Newsletter:</label>
<input type="checkbox" id="subscribe"
name="subscribe"><br><br>
<fieldset>
<legend>Gender:</legend>
<label for="male">Male</label>
<input type="radio" id="male" name="gender"
value="male">
<label
for="female">Female</label>
<input type="radio" id="female" name="gender"
value="female">
</fieldset><br>
<label
for="message">Message:</label><br>
<textarea id="message" name="message" rows="4"
cols="40"></textarea><br><br>
<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
<option
value="volvo">Volvo</option>
<option value="tata nexon">Tata
Nexon</option>
<option value="maruti fronx">Maruti
Fronx</option>
<option
value="audi">Audi</option>
</select><br><br>
<button type="submit">Submit</button>
</form>
</body>
</html>
Output:
More topic in HTML
