| Attribute | Details |
|---|---|
| <input> | The input field specified as using where a user can enter data |
| <textarea> | The HTML <textarea> tag is used within a form to declare a textarea element - a control that allows the user to input text over multiple rows |
| <label> | The HTML tag is used to add a Captons(label) to a form control like text, textarea |
| <select> | The HTML select tags define a select element - a form control with a menu of options. |
| <option> | The <option> tag in HTML is used to choose an option from a Drop-Down menu. |
| <button> | Clickable button, used to submit forms or anywhere in a document for accessible, standard button functionality. |
| <fieldset> | The HTML element is used to group several controls as well as labels within a web form |
| <legend> | <legend> tag used to insert a title or caption to its parent element such as <fieldset>. |
| <datalist> | The HTML <datalist> tag is an HTML5 element that defines a list of suggested values for an <input> tag. |
| <output> | The output element represents the output of a calculation or process, performed usually by a script. |
Input element is one of the most used form element.
The input element has a typed attribute usually associated with a data type that allows users to edit its value. This element providing many different types of fields, according to the value present in the type attribute
<form method="post" action="form_action.php">
<label for="fname">First name:</label>
<input type="text" id="fname" name="firstName" required><br><br>
<label for="email">Email:</label>
<input type="text" id="email" name="email" required><br><br>
<input type="submit">
</form>
The input type attribute are covered in the next chapter: HTML Input Type
The HTML <textarea> element represents a multi-line plain-text editing Vield, useful when you want to allow users to enter a multiple line of comment or message text,
for example a comment on a review or feedback form.
<textarea id="story" name="story"
rows="5" cols="33">
You can write multiple lines
</textarea>
The HTML <label> element used as label for several form elements.
<label> element is usefull for screen reader , when screen reader will read label reader will read out loud the label when the user focus on the input element.
The <label> component additionally facilitate users who have issue clicking on terribly little regions (such as radio buttons or checkboxes) - as a result of once the user clicks the text inside the <label> element, it toggles the radio button/checkbox.
<label for="male">Male</label>
<input type="radio" id="male" name="gender">
<label for="female">Female</label>
<input type="radio" id="female" name="gender">
<p>Click on label and ratio button will toggle automatically</p>
The element defines a dropdown list:
<label for="language">Choose a Programming Language:</label>
<select id="language" name="language">
<option value="Javascript">Javascript</option>
<option value="Java">Java</option>
<option value="PHP">PHP</option>
<option value="Swift">Swift</option>
</select>
<option>element define an option that can be selected.
One option is selected by default.
You can select by default option with our choice by adding selected attribute in the option you want to set by default.
<option value="Javascript">Javascript</option>
We learn more about input elements attribute in the next chapter : HTML Input Type
Clickable button, used to submit forms or anywhere in a document for accessible, standard button functionality.
<button onclick="alert('Hello')">Click me</button>
How browser display above button code.
The element is used to group related data in a form.
The <legend>element defines a title(caption) for the fieldset element.
<form method="post" action="form_action.php">
<fieldset>
<legend>Details:</legend>
<label for="fname">First name:</label>
<input type="text" id="fname" name="firstName" required><br><br>
<label for="email">Email:</label>
<input type="text" id="email" name="email" required><br><br>
<input type="submit">
</fieldset>
</form>
The element specifies a list of predefined options for an input element.
Users are presented with a drop-down list of pre-defined options when entering data in the input field
<h2>The datalist Element</h2>
<form method="post" action="form_action_datalist.php">
<input list="language" name="language">
<datalist id="language">
<option value="Javascript">
<option value="Java">
<option value="PHP">
<option value="Swift">
</datalist>
<input type="submit" value="Submit">
</form>
The output element represents the output of a calculation or process, performed usually by a script.
<p>Change or enter value in input field and output will be display in output tag</p>
<form action="/action_page.php" oninput="x.value=parseInt(a.value)+parseInt(b.value)">
0
<input type="range" id="a" name="a" value="50">
100 +
<input type="number" id="b" name="b" value="50">
=
<output name="x" for="a b"></output>
<br><br>
</form>
Share TDB SCHOOL
Share this E-Learning Website on social media platforms with your friends and followers