An HTML form or Web form is simply a collection of HTML elements inserted within a standard Web page. By adding different types of elements, you can create different form fields, such as text fields, pull-down menus, checkboxes, and so on.
All Web forms start with an opening <form> tag, and end with a closing </form> tag:
Syntax
<form action=”myscript.php” method=”post”>
<!– Contents of the form has been written here — >
</form>
In the above syntax you will see there are two attributes within the opening <form> tag:
- Action attribute – tells the Web browser where to send the form data when the user fills out and submits the form.
- Method attribute – tells the browser how to send the form data.
There are two methods in PHP
1. get – is useful for sending small amounts of data and makes it easy for the user to resubmit the form.
2. Post – is useful to send much larger amounts of form data.
Create an HTML Form
Here, in this example a user will create a Web form that contains a variety of form fields. Save the file as web_form.html in the document root folder, and then open it in the browser.
Example
Code
<!DOCTYPE html>
<html>
<head>
<title>An HTML Form</title>
<link rel=”stylesheet” type=”text/css” href=”common.css” />
</head>
<body>
<h1>An HTML Form</h1>
<form action=”” method=”get”>
<div style=”width: 25em;”>
<label for=”textField”>A text input field</label>
<input type=”text” name=”textField” id=”textField” value=”” /><br/><br/>
<label for=”passwordField”>A password field</label>
<input type=”password” name=”passwordField” id=”passwordField” value=”” /><br/><br/>
<label for=”checkboxField”>A checkbox field</label>
<input type=”checkbox” name=”checkboxField” id=”checkboxField” value=”yes” /><br/><br/>
<label for=”radioButtonField1”>A radio button field</label>
<input type=”radio” name=”radioButtonField” id=”radioButtonField1” value=”radio1” /><br/><br/>
<label for=”radioButtonField2”>Another radio button</label>
<input type=”radio” name=”radioButtonField” id=”radioButtonField2” value=”radio2” /><br/>><br/>
<label for=”submitButton”>A submit button</label>
<input type=”submit” name=”submitButton” id=”submitButton” value=”Submit Form” /><br/><br/>
<label for=”resetButton”>A reset button</label>
<input type=”reset” name=”resetButton” id=”resetButton” value=”Reset Form” /><br/><br/>
<label for=”fileSelectField”>A file select field</label>
<input type=”file” name=”fileSelectField” id=”fileSelectField” value=”” /><br/><br/>
<label for=”hiddenField”>A hidden field</label>
<input type=”hidden” name=”hiddenField” id=”hiddenField” value=”” /><br/><br/>
<label for=”pushButton”>A push button</label>
<input type=”button” name=”pushButton” id=”pushButton” value=”Click Me” /><br/><br/>
<label for=”pullDownMenu”>A pull-down menu</label>
<select name=”pullDownMenu” id=”pullDownMenu” size=”1”>
<option value=”option1”>Option 1</option>
<option value=”option2”>Option 2</option>
<option value=”option3”>Option 3</option>
</select><br/><br/>
<label for=”listBox”>A list box</label>
<select name=”listBox” id=”listBox” size=”3”>
<option value=”option1”>Option 1</option>
<option value=”option2”>Option 2</option>
<option value=”option3”>Option 3</option>
</select><br/><br/>
<label for=”textAreaField”>A text area field</label>
<textarea name=”textAreaField” id=”textAreaField” rows=”4”cols=”50”></textarea><br/><br/>
</div>
</form>
</body>
</html>