Form

Introduction

Form is used to collect user input and submit to server.

Form elements:
<form> tag is used to create a form.
<input> tag is used to create an input field.
<textarea> tag is used to create a text area.
<button> tag is used to create a button.
<select> tag is used to create a dropdown list.
<option> tag is used to create an option in dropdown list.

FORM

<form> tag is used to create a form. action and method attributes are used to specify the URL of the page the form is submitted to and the method of submitting the form.

e.g. <form action="submit.php" method="post">
Data is sent to submit.php using POST method.

INPUT

<input> tag is used to create an input field. type attribute is used to specify the type of input field.

e.g. <input type="text" name="name">
Input field with name "name" is created.

TEXTAREA

<textarea> tag is used to create a text area.

e.g. <textarea name="message">
Text area with name "message" is created.

BUTTON

<button> tag is used to create a button.

e.g. <button type="submit">Submit</button>
Submit button is created.

SELECT

<select> tag is used to create a dropdown list.

e.g. <select name="cars">
<option value="volvo">Volvo</option>
<option value="honda">Honda</option>
</select>
Dropdown list with name "cars" and two options is provided.

Demo

<form action="submit.php" method="post">
	Name: <input type="text" name="name">
	Password: <input type="password" name="password">
	
	Interests:
	Coding <input type="checkbox" name=interest value="coding">
	Reading <input type="checkbox" name=interest value="reading">
	Music <input type="checkbox" name=interest value="music">
	
	Gender:
	M <input type="radio" name=gender value=M>
	F <input type="radio" name=gender value=F>

	Age:
	<select name="Age">
		<option value="1">Below 18</option>
		<option value="2">18 or above</option>
	</select>

	<button type="submit">Submit</button>
</form>

Task

Create a form with following fields:
- Username
- Password
- Favorite color (dropdown list)
- Favorite food (multiple selection)
- Today's breakfast (radio button)