Clean • Professional
Forms consist of various elements that collect, organize, and submit user input. This category focuses on elements beyond basic <input> fields.
<textarea> – Multi-line Text InputUsed to collect longer text input such as comments, messages, or descriptions.
Unlike <input type="text">, it can span multiple lines.
Attributes: rows, cols, placeholder, maxlength, required.
Example:
<label for="message">Your Message:</label><br>
<textarea id="message" name="message" rows="5" cols="40" placeholder="Write your message here"></textarea><button>Can have custom text or HTML content inside.
Types: submit, reset, button.
Example:
<button type="submit">Submit Form</button>
<button type="reset">Reset Form</button>
<button type="button" onclick="alert('Hello!')">Click Me</button><select> & <option>Creates a dropdown menu to select one or more options.
multiple attribute allows selecting multiple items.
Example:
<label for="country">Choose your country:</label>
<select id="country" name="country">
<option value="usa">USA</option>
<option value="uk">UK</option>
<option value="india">India</option>
</select><datalist>Provides an autocomplete dropdown for an input field.
Example:
<label for="browser">Choose your browser:</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Edge">
<option value="Safari">
</datalist>c) <optgroup> – Group OptionsThe <optgroup> tag is used to group related <option> elements within a <select> dropdown.
It improves readability and organization of long lists of options.
<select>
<optgroup label="Asia">
<option>India</option>
<option>China</option>
</optgroup>
<optgroup label="Europe">
<option>Germany</option>
<option>France</option>
</optgroup>
</select><fieldset> & <legend><fieldset> groups related form elements.
<legend> provides a title or caption for the group.
Improves form organization, accessibility, and readability.
Example:
<fieldset>
<legend>Personal Info</legend>
<label for="fname">First Name:</label>
<input type="text" id="fname" name="fname">
</fieldset><output> – Display CalculationsThe <output> element is used to display the result of a calculation or user action within a form.
It is often updated using JavaScript when values from inputs change.
Example:
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="number" id="a" value="5"> +
<input type="number" id="b" value="10"> =
<output name="result"></output>
</form><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Form Elements Example</title>
</head>
<body>
<h2>HTML Form Example</h2>
<form>
<!-- Personal Info -->
<fieldset>
<legend>Personal Info</legend>
<label for="fname">First Name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="bio">Biography:</label><br>
<textarea id="bio" name="bio" rows="3" cols="30"></textarea><br><br>
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob">
</fieldset>
<br>
<!-- Account Info -->
<fieldset>
<legend>Account Info</legend>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label>Gender:</label>
<input type="radio" id="male" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" id="female" name="gender" value="female">
<label for="female">Female</label><br><br>
<label>Hobbies:</label>
<input type="checkbox" id="reading" name="hobby" value="reading">
<label for="reading">Reading</label>
<input type="checkbox" id="sports" name="hobby" value="sports">
<label for="sports">Sports</label><br><br>
<label for="country">Country:</label>
<select id="country" name="country">
<optgroup label="Europe">
<option value="uk">UK</option>
<option value="france">France</option>
</optgroup>
<optgroup label="Asia">
<option value="india">India</option>
<option value="china">China</option>
</optgroup>
</select><br><br>
</fieldset>
<br>
<!-- Buttons -->
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>
</body>
</html>Output :
