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
