Forms are the most popular way to make web pages interactive. A form on a web page allows the user to enter requested information and submit it for processing.
A form is simply an area that can contain form fields. Form fields are objects that allow the visitor to enter information - for example text boxes, drop-down menus or radio buttons.
A form is starts with the <form> tag. and end with </form> tag. The form elements comes inbetween these two tags.
The form tag contains 3 major attributes. Namely,
=> name - form name
=> action - performed action when you subit the form
=> method - way of data transfer get or post.
Form's Name Attribute
name attribute is nothing but name of the form.
Form's Action Attribute
When the user clicks on the "Submit" button, the content of the form is sent to another file. The form's action attribute defines the name of the file to send the content to. Usually the file defined in the action attribute does something with the received input.
Form's Method Attribute
Method attribute specifies which HTTP method will be used to submit the form data set. Possible values are "get" (the default) and "post".The values are case-insensitive. One can specify two different submission methods for a form in HTML. The difference between METHOD="GET" (the default) and METHOD="POST" is primarily defined in terms of form data encoding.
Get method: With the HTTP "get" method, the form data set is appended to the URL specified by the action attribute with a question-mark ("?") as separator and this new URL is sent to the processing agent.
Post method: With the HTTP "post" method, the form data set is included in the body of the form and sent to the processing agent.
Advantage of post method:
1. This is the best way of submitting forms to the web server.
2. There is no limitation on the number of Variables passed from the form.
3. This is a transparent way of transmitting variables to the webserver where hidden variable are always hidden!
Text Field
Text fields are used when you want the user to type something(letters, numbers, etc.) in a form. The <input> has a few attributes that you should be aware of.
=> type - Determines what kind of input field it will be. Possible choices are text, submit, and password.
=> name - Assigns a name to the given field so that you may reference it later.
=> size - Sets the horizontal width of the field. The unit of measurement is in blank spaces.
=> maxlength - Dictates the maximum number of characters that can be entered.
Example:
<form method="post" action="/gotonext.jsp"> Name: <input type="text" size="10" maxlength="40" name="name"> <br/> Location: <input type="text" size="10" maxlength="10" name="location"> </form>
Output:
Password Field
Password fields are a special type of <input /> tag. All that we need to do is change the type attribute from text to password.
Example:
<form> Enter Password<input type="password"><br/> Confirm Password<input type="password" size="5" maxlength="5"> </form>
Output:
Radio Buttons
Radio Buttons are used when you want the user to select one of a limited number of choices.
Example:
<form> <input type="radio" name="sex" value="male"> Male <input type="radio" name="sex" value="female"> Female </form>
Output:
Checkboxes
Checkboxes are used when you want the user to select one or more options of a limited number of choices.
Example:
<form> <input type="checkbox" name="html"> html <input type="checkbox" name="java"> java <input type="checkbox" name="css"> css </form>
Output:
DropDown List Box
Drop down menues are created with the <select> and <option> tags. <select> is the list itself and each <option> is an available choice for the user.
Example:
<form method="post" action="/gonextpage.jsp"> Select your primary language. <select name="language"> <option>Select Here </option> <option>English</option> <option>French</option> <option>Hindhi</option> <option>Tamil</option> </select> </form>
Output:
Selection List
Selection list is basically just another type of way to get input from the user. The size attribute selects how many options will be shown at once before needing to scroll, and the selected option tells the browser which choice to select by default.
Example:
<form>
Html Form Components:<br>
<select multiple name="from_elements" size="4">
<option>Text field</option>
<option>Radio button</option>
<option>Text area</option>
<option>Submit button</option>
<option>List box</option>
<option>Drop down lsit</option>
<option>Check box</option>
</select>
</form>
Output:
HTML Text Areas
Text areas serve as an input field for viewers to place their own comments onto. Forums and the like use text areas to post what you type onto their site using scripts. For this form, the text area is used as a way to write comments to somebody.
Rows and columns need to be specified as attributes to the <textarea> tag. Rows are roughly 12pixels high, the same as in word programs and the value of the columns reflects how many characters wide the text area will be. i.e. The example below shows a text area 5 rows tall and 20 characters wide. Another attribute to be aware of is the wrap. Wrap has 3 values.
wrap = "off"
wrap = "virtual"
wrap = "physical"
Virtual means that the viewer will see the words wrapping as they type their comments, but when the page is submitted to you, the web host, the document sent will not have wrapping words. Physical means that the text will appear both to you, the web host, and the viewer including any page breaks and additional spaces that may be inputed. The words come as they are. Off of course, turns off word wrapping within the text area. One ongoing line.
Note: Text placed between the opening and closing textarea tags will show up inside the text area when the browser views it.
Example:
<form method="post" action="/gonextpage.jsp"> <textarea rows="5" cols="20" wrap="physical" name="comments"> Enter Your Comments Here </textarea> </form>
Output:
Submit Button
The submit button will send all input form data to the destination declared in the form action command. If you do not give your submit button a value the button will display Submit Query by default. Placing any other text in the value will display within the button.
Example:
<form> First name: <input type="text" name="firstname"> <br> Last name: <input type="text" name="lastname"> <br> <input type="submit" value="Submit Here"> </form>
Output: