Presentation is loading. Please wait.

Presentation is loading. Please wait.

HTML Forms. 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.

Similar presentations


Presentation on theme: "HTML Forms. 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."— Presentation transcript:

1 HTML Forms

2 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. When the visitor clicks a submit button, the content of the form is usually sent to a program that runs on the server

3 CGI SCRIPTS When your form is submitted you need a program that can receive the information and do something with it. Such programs are sometimes referred to as: CGI programs. CGI stands for Common Gateway Interface, which is computer latin for a program that translates information. This translation is necessary because the server might be a UNIX machine while the visitor might be sending information from a Windows platform. Windows and UNIX handle information differently - so if there were no CGI, then UNIX machines could only communicate with other UNIX machines etc. and that is pretty far from the basic idea of the world wide web.

4 THE FORM TAG When a form is submitted, all fields on the form are being sent. The tag tells the browser where the form starts and ends. we can add all kinds of HTML tags between the and tags.

5 The METHOD Attribute There are two possible values for the METHOD attribute of the FORM tag: 1.POST In a form using the POST method, when the submit button is clicked, the web browser contacts the server on which the form- processing script is located then sends all of the data from the form to the script. There is no size limit to the amount of data the server can pass to a script using POST. 2.GET In a form using the GET method, when the submit button is clicked, the web browser appends all of the data from the form to the end of the URL specified in the ACTION attribute then contacts the web server with the extended URL. The amount of data which can be passed to a script using the GET method is limited to the length of URL which the server and browser can both handle.

6 example My Page

7 attributes 1.action=address 2.method=post or method=get The address is the url of the cgi script the content should be sent to. The post and get methods are simply two different methods for submitting data to the script

8 The ACTION Attribute The ACTION attribute of the form tag specifies the URL of the application which processes the web form. Generally, the URL of the ACTION attribute is the location of a cgi script.cgi script

9 The METHOD Attribute There are two possible values for the METHOD attribute of the FORM tag: 1.POST In a form using the POST method, when the submit button is clicked, the web browser contacts the server on which the form- processing script is located then sends all of the data from the form to the script. There is no size limit to the amount of data the server can pass to a script using POST. 2.GET In a form using the GET method, when the submit button is clicked, the web browser appends all of the data from the form to the end of the URL specified in the ACTION attribute then contacts the web server with the extended URL. The amount of data which can be passed to a script using the GET method is limited to the length of URL which the server and browser can both handle.

10 example My Page

11 The Input Element The most important form element is the element. The element is used to select user information. Basic syntax

12 Possible attributes

13

14 FORM FIELDS The most common input types are 1.Text field 2.Password field 3.Hidden field 4.Text area 5.Check box 6.Radio button 7.Drop-down menu 8.Submit button 9.Reset button 10.Image button

15 TEXT FIELD Text fields are one line areas that allow the user to input text. If you want several lines you should use a text area instead.text area defines a one-line input field that a user can enter text into.

16 attributes 1.The size option defines the width of the field. That is how many visible characters it can contain. 2.The maxlength option defines the maximum length of the field. That is how many characters can be entered in the field.If you do not specify a maxlength, the visitor can easily enter more characters than are visible in the field at one time. 3.The name setting adds an internal name to the field so the program that handles the form can identify the fields. 4.The value setting defines what will appear in the box as the default value. 5.The align setting defines how the field is aligned. Valid entries are: TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE, ABSMIDDLE, ABSBOTTOM. 6.The tabindex setting defines in which order the different fields should be activated when the visitor clicks the tab key.

17 example My Page

18 output

19 PASSWORD FIELD Password fields are similar to text fields. The difference is that what is entered into a password field shows up as dots on the screen. This is, of course, to prevent others from reading the password on the screen

20 attributes The size option defines the width of the field. That is how many visible characters it can contain. The maxlength option defines the maximum length of the field. That is how many characters can be entered in the field. If you do not specify a maxlength, the visitor can easily enter more characters than are visible in the field at one time. The name setting adds an internal name to the field so the program that handles the form can identify the fields. The value setting defines what will appear in the box as the default value. The align setting defines how the field is aligned. Valid entries are: TOP, MIDDLE, BOTTOM, RIGHT, LEFT, TEXTTOP, BASELINE, ABSMIDDLE, ABSBOTTOM. The tabindex setting defines in which order the different fields should be activated when the visitor clicks the tab key.

21 example My Page Enter Password :

22 output

23 HIDDEN FIELD Hidden fields are similar to text fields, with one very important difference! The difference is that the hidden field does not show on the page. Therefore the visitor can't type anything into a hidden field, which leads to the purpose of the field: To submit information that is not entered by the visitor.

24


Download ppt "HTML Forms. 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."

Similar presentations


Ads by Google