Forms

The world wide web(www) was designed to be an interactive technology. Html forms allow the users to enter parameters which will be posted to the server and the server responds to it accordingly. By this way a dynamic behaviour will be added to the website. To interact with the server we need the server side programming languages such as Asp, Java, Jsp, Php and other programming languages.

Text Field Element

If we need to feed the parameters into a web page, insert a text field element. To do this, use <input>element with the type attribute set to "text"

The text input given by the user can be read by a client side application coded in JavaScript or other client side application.

<form> element

The <form>..</form> element is used to encapsulate the related text fields and other form elements.

Note

- We can include as many form elements. - <form> elements cannot be nested one inside the other. - To distinguish a

attributes of text field element

The text field element has attributes other than the name and type.

disabled - It is use to disable the text field. The user cannot select the text field and the content of the field cannot be send to the server. maxlength - It is used to define the maximum number of characters that can be typed. The possible values are positive integers. readonly - It is used to prevent the user from changing the content of the text field. size - It is used to define the length of the text field in characters. if the size is less than maxlength, a horizontal scroll bar may appear. The possible values are positive integers. value - to set the initial value or default, value of the text field; the possible values are double quoted strings.

attributes of the <form> element

The attributes of the <form> element.

The <form> element can be used by client-side or server-side applications to read data entered by the user and write the results from the web applications.

action - to define the receiver of the form data. If the attribute is missing, the web page itself us consider to be the receiver. The possible values are - The url of the web application to process the data(www.rookienerd.com/css/stylesheet.css) - A valid email address to send the data via mailto protocol (eg: "mailto:contactus@rookienerd.com) - method to define the method used to send the form data. The possible values are = GET - to attach data to the URL string using name/ value syntax (default setting) = POST - to send data to the server in a separate transaction. - enctype - to define the method used to encode data before sending it to the server. - target - to define a new browser window in which the results will appear.

Encoding the data

The browser encodes the forms data before sending it to the receiver. The technique used to encode depends on the value of the enctype attribute. The possible values of this attributes are

- "application/x-www-form-urlencoded" used in conjunction with the GET method(default settings) - the data is sent as a list of name=value pairs separated by and symbols. - Any white space is replaced by a +symbol. - Any non-alphanumeric character is replaced by % plus the ASCII code for that character. - Line brakes are replaced by %0D%0A% (CR/ LF) - "text/plain" used in conjunction with the mailto action for sending data by e-mail. This case is similar to the preceding case, but the white spaces are not by +symbols. -"multiform/form-data" used in conjunction with the POST method to send images or files to the server (i.e uploading)

Sending form data by email

To send the data to the receiver from the user filled data of the form fields, a submit button must be included in the <form> element.

<input type="submit">

attributes of the submit button element

The following are the attributes of the submit button.

disabled - disables the submit button. name - it is the identifier for the element. value -represents the label that will appear on the button (default value is Submit Query)

Note

- A default button sends the form data but does not send the data about itself. - A named button sends the form data and includes data about itself (see "cus=Send Data")

password element

The password element is similar to the text field and accepts the same attributes.

The value for the type attribute is "password" The value attribute of this element is required. When the user fills this field, the characters are not sown (* symbol appears in the field for each character typed) When the data is submitted, the real string of characters typed by the user will be sent to the server.

hidden element

The hidden element is a special form element. It is special because it exists in the code of the page but it not rendered by the browser. It is used in the following way.

- To pass information between web application pages. - To add an identifier to the form the element belongs to .

To insert a hidden element into a form, use the <input> element with the type attribute set to a "hidden". Two other attributes are required name and value.

checkbox

The checkbox is an <input> element that can be selected or deselected by the user. Only the selected checkboxes are included in the submitted by the browser. The submitted checkboxes follow the standard syntax name1=value1 & name2=value2

name1 - the value of the name attribute of the checkbox <input> element and value1 - the value of the value attribute of the same checkbox <input> element. To insert a checkbox, use the <input> element with the type attribute set to "checkbox". There is another attribute that can be used in conjunction with the checkbox element. checked for when the default state of the checkbox element is selected

Note

It is possible to have more than one checkbox with the same name. All these elements are submitted if the user selects them. If the value attribute is not included, only the selected checkboxes will be submitted to the receiver, using a syntax like: "checkbox_name=on". It is recommended that you avoid this situation.

radio button element

The radio button is very similar to the checkbox. It uses the same syntax and attributes.

- The value of the type attribute is "radio" - The user can select only one radio button in a group at a time(radio button are grouped according to the name attribute) - The browser renders them in the radio button style.

Note

If none of the radio button in a group is selected, then no data is sent from the group. If an element in a group of radio elements is selected and this element has a value attribute, data is submitted using the syntax: "radio_button_name=radio_button_value" If an element in a group of radio elements is selected and this element doesn't have a value attribute, data is submitted using the syntax "radio_button_name=on". It is recommended that you avoid this scenario.

<textarea> element

The <textarea> element allows you to attach a multiline text field to a block. To do this, include a <textarea>..</textarea> element inside the <form> block.

attributes for the <textarea> element

The following are attributes of the <textarea> element

disabled - to disable the element so the user cannot select it and the browser doesn't submit its value. readonly - the user cannot change its content cols - to determine the horizontal size in characters of the visible area allocated to the element (if the line typed doesn't fit a horizontal scrolling appears) rows - to determine the number of lines allocated to the element for the visible area (if the typed text doesn't fit a vertical scroll bar will appear) wrap - to determine how CR/ LF characters (line breaks) are handled. THe possible values are - off - so the user can insert the CR/ LF characters. These characters will be submitted as %0D%0A% - soft or virtual (default value) - the text is visually wrapped inside the text area element, but only the user -entered CR/ LF characters will be submitted. - hard or physical - the text is visually and automatically wrapped and the CR/ LF sequences are automatically inserted. These automatically inserted sequences will be submitted together with other similar sequences inserted by the user.

The reset button

HTML allows to add other kind of buttons to a form element.

To clear the content of the form fields and reset them to their values (clear any changes made by the user), use a reset button. This can be added to a form element by including an <input> element with the type attribute set to "reset".

The following are the attributes of the reset button.

disabled - disables the submit button. name - it is the identifier for the element. value -represents the label that will appear on the button (default value is "Reset")

generic <input> button

To attach a generic button without any default behaviour to a form, use the <input> element with the type attribute set to "button".

Note

Notes All the <input> button attributes (disabled, name and value) apply to this button. More than one generic button can be attached to the same <form> element. Name attribute is used to differentiate them. To add specific behaviour to an <input> button, use javascript or another client side javascript programming language is used. Generic <input> buttons do not add name=value pairs to the forms data sent by the browser, but submit buttons do.

The image button

We can add an image button to a form by using the <input> element with the type attributes set to "image". Other useful attributes for the image button ate

src - to specify the URL of the image name - to identify the image align - to align the image relative to the other elements disabled - to disable the element

Note

Each time the user clicks on the image, the form data is submitted, so the submit button is not needed. The data submitted by the image button is in the format element_name.x=x-coordinate, element_name.y=y-coordinate where - element_name - the vaue of the name attribute element assigned to the image element - x-coordinate and y-coordinate are the x and y coordinates respectively The image button is is a server side image map and the server should have an application that reads and processes the data submitted. More than one image button can be attached to the same element. Name attribute must be used to differentiate them.

The <button> button

We can use the <button>..</button> element instead of <input> inside the html form element to create the button.

Note

The <button> button has the attributes as the <input> button (name, value, type & disabled) The type attribute determines the behaviour of the button. The possible values are - button (default value) - reset - submit - We can add content (text, images, formatting styles, etc.) to the body of the <button> button to create custom-made buttons. Only the clicked button adds a name=value pair to the data submitted by the form. The reset button doesn't submit any data (it resets the default values for the forms fields) Only the reset button doesn't submit the form's data.

Uploading a file

The <input> element allows you to attach a file from the local system to the form and submit it together with the form's field data. It is done using the <input> element with the type attribute set to "file"

Note

The file can be any type. The form will render a text field (to enter a file name and associated path) and a Browse button(to navigate the directory structure to the file) Both allow you to identify which will be uploaded. More than one file can be uploaded using a <form> element. The name attribute must be used to distinguish them. The <form> element must have the these attributes. -method="POST" -enctype="multiform/form-data" -action=URL of the server application that will get and process the files.

The <select> list

The <select> list allows you to group related items into a list, In this way, the <select> list is similar to a group of check boxes or radio buttons.

If only one list item is visible at a time, the <select> list is rendered similarly to a pop-up menu, and only one list item can be selected at a times. If many list items are visible at a time, the <select> list is rendered similarly to a scrolling list. In this case, only one list item can be selected at a time(default behaviour and is similar to a radio button group), or multiple items can be attached(similar in behaviour to a checkbox group) To define a <select> list, use the <select>..</select> element. To define list items, inset <option> elements into the body of the <select> element.

Note

To uniquely identify which list items are selected, add a name attribute to the <select> element and a value attribute to each <option> element. The enduing tag for the <option> element is optional in HTML and required in XHTML. By default, a <select> list is rendered with a single item visible (similar to a popup menu). To change this setting, add a size attribute to the <select> element to define the number of visible items (in this case, the list is rendered as a scrolling list) For each item selected, a name=value pair is added to the form's data, where name is the value of the name attribute <select> list and value is the value attribute of the selected list element. You can insert many <select> lists into the same <form> element.

The multiple <select> list

Only one item on the <select> list can be selected at a time and submitted with the forms data. To change this setting, add the multiple attribute to the <select> tag. To select a range of list elements, the user must hold down the SHIFT key and click on the first and the last items in the range. To select the only the required particular items, the user must hold down the CRL key and click on each item to be included.

Note

The multiple attribute works only if the size attribute is set to a value greater than 1. For each selected item, a name=value pair is added to the forms data. If the value attribute for an item in the <select> list is not defined, the content of the <option>..</option> block is used in the submitted data.

attributes of form element

The following are the possible attributes of the form elements.

accesskey - to define a shortcut to execute a command specific to that element and/or place the focus around that element. The possible values are any double- quoted character(e.g "exer"). To get the focus or execute the command, the user must hold down the ALT key and press the appropriate character (e.g ALT+t) tabindex - to define a different order of navigation between the forms elements when using the TAB key (the default order is given by the order in which the element are added to the form). The possible values are "0" or any positive integer.