Introduction
This chapter demonstrates about the HTML Form Elements mainly these elements are the input elements. Following are the concepts covered in this chapter.
- HTML Elements
Description
HTML Form elements are defined as the input elements. User can define the input elements in many ways depends on the type attribute here are some HTML Form elements.
- Select Element
- textarea Element
- button Element
Description
<select> element is used to determine the drop-down list in which <option> element is used, the code below demonstrates the use of <select> is as shown.
[html]
<!DOCTYPE html>
<html>
<body>
<form action="action_page.php">
<select name="Tutorials">
<option value="html5">html</option>
<option value="html">html5</option>
<option value="svg">svg</option>
</select>
<br><br>
<input type="submit">
</form>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
User can also add the selected attribute in the drop down box by adding the select attribute the code is as shown below.
[html]
<!DOCTYPE html>
<html>
<body>
<form action="action_page.php">
<select name="Tutorials">
<option value="html" selected>html</option>
<option value="html5">html5</option>
<option value="svg">svg</option>
</select>
<br><br>
<input type="submit">
</form>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Description
<textarea> element is used to define a multi-line input filed for these user can give the multiple lines of input. The code below demonstrates the <textarea> element.
[html]
<!DOCTYPE html>
<html>
<body>
<form action="action_page.php">
<textarea name="message" rows="10" cols="30">Simple Programming Lessons Tutorials</textarea>
<br>
<input type="submit">
</form>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Description
Button elements defines a clickable button which takes some action on the web page, the code below demonstrates the <button> element.
[html]
<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="alert('SPLessons!')">Click Me!</button>
</body>
</html>
[/html]
Result
By running the above code in a preferred browser user can get the following output as shown in below image.
Now click on the above button then user will get a dialogue box as shown in below image.
Key Points
- HTML Form elements are the mainly input elements.
- Option element is used to select the options.