HTML FORM ELEMENTS: HTML form has different elements.They are as follows:
| Tag | Description |
|---|---|
| <button> | specifies a clickable button |
| <datalist> | defines a list of pre-defined options |
| <form> | specifies an HTML form for user input |
| <input> | specifies input control |
| <label> | specifies a label for an <input> element |
| <textarea> | specifies multiple input control |
| <fieldset> | Groups similar elements in a form |
| <legend> | specifies a caption for <fieldset> element |
| <select> | specifies a drop-down list. |
| <optgroup> | specifies a group of related options in a drop-down list |
| <option> | specifies an option in the drop-down list |
| <output> | specifies the result of a calculation |
Form <input> element
<input> element is the important element in the HTML forms.It can be dispalyed in different ways but it depends on the type attribute.The type attribute may be text,number or symbols.By default it takes text as its type attribute.
Example:
<!DOCTYPE html> <html> <body> <h2>The input Element</h2> <form action="/action_page.php"> Enter your name: <input name="Address" type="text"> <br><br> <input type="submit"> </form> </body> </html>
Form <select> element
The <select> element defines a drop-down list.In a drop-down list, the first item in the list gets displayed by default. In order to select a pre-defined option use a selected attribute.
Example: Using <option> element.<option> element specifies an option that can be selected.
<!DOCTYPE html>
<html>
<body>
<h2> Select Element</h2>
<p>Programming Languages:</p>
<form action="/action_page.php">
<select name="language">
<option value="HTML">HTML</option>
<option value="CSS">CSS</option>
<option value="CPP">CPP</option>
<option value="JAVA">JAVA</option>
</select>
<br><br>
<input type="submit">
</form>
</body>
</html>
Example 2: Using the selected attribute. This defines a pre-selected option.
<!DOCTYPE html>
<html>
<body>
<h2>Pre-selected Option</h2>
<p>Programming Languages:</p>
<form action="/action_page.php">
<select name="language">
<option value="HTML">HTML</option>
<option value="CPP">CPP</option>
<option value="JAVA" selected>JAVA</option>
<option value="CSS">CSS</option>
</select>
<br><br>
<input type="submit">
</form>
</body>
</html>
Example 3: Using size attribute. This defines a number of visible values.
<!DOCTYPE html>
<html>
<body>
<h2>Visible Option Values</h2>
<p>Programming Languages</p>
<form action="/action_page.php">
<select name="language" size="3">
<option value="HTML">HTML</option>
<option value="CPP">CPP</option>
<option value="JAVA">JAVA</option>
<option value="CSS">CSS</option>
</select>
<br><br>
<input type="submit">
</form>
</body>
</html>
Example 4: Using multiple attributes. This allows the user to select more than one value.
<!DOCTYPE html>
<html>
<body>
<h2>Multiple Seletcions</h2>
<p>Programming Languages</p>
<form action="/action_page.php">
<select name="languages" size="2" multiple>
<option value="HTML">HTML</option>
<option value="CPP">CPP</option>
<option value="JAVA">JAVA</option>
<option value="CSS">CSS</option>
</select>
<br><br>
<input type="submit">
</form>
<p>Hold down the Ctrl for windows / Command for Mac button to select multiple options.</p>
</body>
</html>
Form <textarea> element
The <textarea> element specifies a multi-line input fields.It contains attributes such as rows and cols. The rows attribute defines the number of lines in a text area. The cols attribute defines the width of the text area.
Example:
<!DOCTYPE html> <html> <body> <h2>Textarea</h2> <form action="/action_page.php"> <textarea name="note" rows="15" cols="30">HTML Tutorial.</textarea> <br> <input type="submit"> </form> </body> </html>
Form <button> element
The <button> element specifies a clickable button.Below is the example for <button> element.
Example:
<!DOCTYPE html>
<html>
<body>
<h2>Button Element</h2>
<button type="button" onclick="alert('Thank you!')">Click Here</button>
</body>
</html>