HTML
HTML Forms
HTML forms are interactive web page units that collect user data and submit it to the server. It comprises various interactive controls such as text fields, checkboxes, email, password, radio buttons, and more. Through HTML forms, users provide personal details, fill out online survey forms, share customer feedback, search queries, etc.
<body>
<p>HTML Form</p>
<form>
<input type="text" name="name">
<input type="email" name="email">
<input type="submit" value="Submit">
</form>
</body>
HTML Form Elements
Various HTML elements can be used to collect user input. These include:
HTML <form> Element
The form element is a container that has other form elements. It creates a form for user input. It can be a text field, submit button, or radio button.
<form>
<input type="text" name="username">
<input type="submit" value="Submit">
</form>HTML <input> Element
The input tag creates a form that gathers user input from a webpage. This input could be an email, text, or password.
<input type="text" name="fullname" placeholder="Enter your name">
HTML <label> Element
The label elements tag or create a label for form elements in the user’s interface. These elements add a label to the form to perform a specific function. They include text, textarea, checkbox, radio button, and many more.
<label for="email">Email:</label>
<input type="email" id="email" name="email">
HTML <select> Element
To create a dropdown option in the HTML forms, the <select> tag is used. You can make a dropdown option anywhere in the HTML form using this element.
<label for="country">Choose your country:</label>
<select id="country" name="country">
<option value="usa">United States</option>
<option value="canada">Canada</option>
<option value="uk">United Kingdom</option>
</select>HTML <button> Element
To create an interactive button within HTML, the <button> tag is used. It is clickable and controls other elements of HTML form.
<button type="submit">Submit</button>HTML <fieldset> Element
The field set is used to group related data within a webpage and combine several controls, making them easy for the end user to understand.
<fieldset>
<legend>Billing Address</legend>
<label for="address">Address:</label>
<input type="text" id="address" name="address">
</fieldset>
HTML <legend> Element
This tag defines a caption or title for the <fieldset> tag.
<fieldset>
<legend>Personal Information</legend>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
</fieldset>
HTML <datalist> Element
It contains a pre-defined list for users to pick from all the available options. The <datalist> tag adds recommended options as input control.
<label for="browser">Choose a browser:</label>
<input list="browsers" id="browser" name="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Edge">
<option value="Opera">
</datalist>
HTML <output> Element
It is a flexible element that shows the output of calculations. It is related to the results.
<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
<label for="a">Number 1:</label>
<input type="number" id="a" name="a" value="0">
<label for="b">Number 2:</label>
<input type="number" id="b" name="b" value="0">
<p>Result: <output name="result" for="a b">0</output></p>
</form>
HTML <option> Element
It either contains options in a dropdown list for users to select from or an autocomplete data list.
<label for="fruit">Choose a fruit:</label>
<select id="fruit" name="fruit">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="cherry">Cherry</option>
</select>
HTML <textarea> Element
To add editing control in long text content.
<label for="message">Your Message:</label>
<textarea id="message" name="message" rows="4" cols="50" ></textarea>
HTML forms provide interactive controls to collect user input on a website. Understanding these elements is essential to create effective and user-friendly HTML forms.