HTML - SPLessons

HTML Form Elements

Chapter 35

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

HTML Form Elements

HTML Form Elements

shape 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

HTML Elements

shape 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

shape 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.

<!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>

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.

<!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>

Result
By running the above code in a preferred browser user can get the following output as shown in below image.

textarea Element

shape 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.

<!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>

Result
By running the above code in a preferred browser user can get the following output as shown in below image.

button Element

shape Description

Button elements defines a clickable button which takes some action on the web page, the code below demonstrates the <button> element.

<!DOCTYPE html>
<html>
	<body>
		<button type="button" onclick="alert('SPLessons!')">Click Me!</button>
	</body>
</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.

Summary

shape Key Points

  • HTML Form elements are the mainly input elements.
  • Option element is used to select the options.