HTML Form Elements
The HTML form have different types of input Elements such as text area, button, fieldset,etc.
Form Elements :
<input>
<label>
<select>
<textarea>
<button>
<fieldset>
<legend>
<datalist>
<output>
<option>
<optgroup>
The <input>
Attribute
The value Attribute. The input value attribute specifies an initial value for an input field
<form action="index_page.php">
<label> name </label>
<input type="text" id="name" name="name">
</form >
The <label>
Attribute
The <label>
tag in HTML is used to provide a usability improvement for mouse users i.e, if a user clicks on the text within the <label>
element, it toggles the control.
<form action="index_page.php">
<label for="name"> name </label>
<input type="text" id="name" name="name">
</form >
The <select>
Attribute
The <select>
element defines a drop-down list.
<form>
<label> Select Your favourite programming Language </label>
<select id="language" name="language">
<option value="C++" > C++ </option>
<option value="Java" > Java </option>
<option value="PHP" > PHP </option>
<option value="Python" > Pyhton </option>
</select>
</form >
The <textarea>
Attribute
The <textarea>
element defines a multi-line input field (a text area)
<form action="index_page.php">
<textarea name="message" row="10" cols="40">
</form >
The <button>
Attribute
The <button>
element defines a clickable button
<form action="index_page.php">
<button type="button" onclick="alert('The button is clicked \n press OK to close' )"> Click Me! </button>
</form >
The <fieldset>
& <legend>
Element
The <fieldset>
element is used to group related data in a form.
The <legend>
element defines a caption for the <fieldset>
element.
<form action="index_page.php">
<fieldset>
<legend> Personal Details </legend>
<label> name </label>
<input type="text" id="name" name="name">
<label> Mobile Number </label>
<input type="number" id="mobile_no" name="mobile_no">
</fieldset>
</form >
The <datalist>
Attribute
The <datalist>
element specifies a list of pre-defined options for an <input>
element.
<form action="index_page.php">
<input list="cars" name="cars">
<datalist id="cars">
<option value="Fiat">
<option value="Audi">
<option value="Tesla">
<option value="Mercedes">
<datalist>
</form >
The <output>
Element
The <label>
tag in HTML is used to provide a usability improvement for mouse users i.e, if a user clicks on the text within the <label>
element, it toggles the control.
<form action="index_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>
</form >