HTML Form
When someone fills out an HTML form, he enters information or makes choices using the form controls. When the user submit the form, the browser collects all the data from the form and sends it to the URL specified as the form's action. It's up to the program residing at that URL to process the form input and create a response for the user. You need to know about the form element and the attributes you see within the opening tag. Obviously, form begins the element and indicates that you're creating an HTML form.
<form> Tag
Creates an HTML form. You can have multiple forms within a document, but you cannot nest the forms. To accept input from a user, you must wrap all of your input fields inside a <form> tag. The purpose of the <form> tag is to indicate where and how the user's input should be sent.
Attribute
The action attribute specifies the URL to the server-side script (including the filename) that will process the form when it's submitted.
The next attribute is method, which can accept one or two possible values: post and get. These values define how form data is submitted to your web server. The post method includes the form data in the body of the form and sends it to the web server. The get method appends the data to the URL specified in the action attribute and most often is used in searches.
Syntax
<form action = "someaction" method = "get or post">
<input> Tag
The input element consists of an opening tag with attributes, no other content, and no closing tag:
<input attributes />
The most important of these is type, which is specifies what kind of form control to display. For all controls, except Submit and Reset buttons, the buttons, the name attribute is recommended. It associates a name with the data entered in that field when the data is sent to the server. To create a text input field, create an input element and choose text as the value for the type attribute. Make sure to give your control an id so that the server script will be able to process to value:
Syntax
<form>
Enter your school name <input type = "text" name = "school name">
</form>
<label> Tag
Whenever you enter text that describes a form field, you should use the <label> tag and use the for attribute to tie it to the control it labels. To create a label, begin with the opening label tag and enter the for attribute. The value of this attribute, when present, must match the id or name attribute for the control it labels. Next, enter text that will serve as the label and then close the element with the end label tag.
Syntax
<form>
<label for = "book"> What is your favorite book? </label>
<input type = "text" name = "book" id = "book">
</form>
<button> Tag
A button you create using the button element is similar to the buttons you create with the input element that content included between the opening and closing button tags appears on the button. You can create three different types of button:
- Submit
- Reset
- Custom
Syntax
<form>
<button type = "submit"><b>Submit button</b></button>
</form>
<textarea> Tag
The textarea element create a large text entry field where people can enter as much information as they like. To create a textarea, use the <textarea> tag. To set the size of the field, use the attributes are:
- rows
- cols
Syntax
<form>
<label for = "comment">Your comments</label>
<textarea name = "comment" rows = "15" cols = "55">Enter your answer here</textarea>
</form>
<select> Tag and <option> Tag
The select element creates a menu that can be configured to enable users to select one or more options from a pull-down menu or a scrollable menu that shows several options at once.
- The <select> tag defines how the menu will be displayed and the name of the parameter associated with the field.
- The <option> tag used to add selections to the menu
Syntax
<form>
<label for = "subject">Please select your subject</label>
<select id = "subject">
<option>Mathematics</option>
<option>Physics</option>
<option>Chemistry</option>
<option>Computer</option>
</form>
<fieldset> Tag and <legend> Tag
The fieldset element organizes form controls into groupings that appear in the web browser. The legend element displays a caption for the fieldset. To create a fieldset element, start with the opening fieldset tag, followed by the legend element.
Syntax
<form>
<fieldset>
<legend>How many Alphabets are there in English?</legend>
<label><input type = "radio" name = "25"> 25 </label>
<label><input type = "radio" name = "26"> 26 </label>
<label><input type = "radio" name = "27"> 27 </label>
</fieldset>
</form>
Example - Form Tag
<!DOCTYPE html>
<html>
<head>
<title> HTML Form Tag </title>
</head>
<body>
<h1> Registration Form </h1>
<form action = "/register" method = "post">
<label for = "name"> Name </label>
<input id = "name" type = "text"><br>
<label for = "email"> Email </label>
<input id = "email" type = "text"><br>
<label for = "userpassword"> Password </label>
<input id = "userpassword" type = "password"><br>
<label for = "phone"> Phone no </label>
<input id = "phone" type = "text"><br>
<label for = "country"> Country </label>
<input id = "country" type = "text"><br>
<label for = "gender"> Gender </label>
<label><input id = "gender" type = "radio" name = "gender" value = "male">Male </label>
<label><input id = "gender" type = "radio" name = "gender" value = "female">Female </label>
<br><label for = "comment">Your comments</label>
<textarea name = "comment" rows = "6" cols = "40"></textarea><br>
<button type = "submit" value = "submit"><b>SUBMIT</b></button>
</form>
</body>
</html>
NOTES
Most forms won't work if they are not on a web server. And if the URL in the action attribute does not exist, the form won't work when you submit it.
