PHP and Forms I

PHP Content of the lesson:

Form
Mostly Used Form Elements
Example - Registration Form

Form

Almost everyone has already seen a form inside a page. You have to fill in a registration form when creating a mailbox at servers like Google, Seznam, Atlas etc. You write required information and send it (usually by clicking on a Send button). After clicking on this button, all information is sent to server and it is usually checked (if everything was filled, if data are meaningful, ...). The same form can be displayed again in case there are several errors or data can be saved to a database on the server.

The creation of web forms consists of two steps:

Suggestion of the form structure and creation of its HTML code.
Implementing functions of the form (checks, evaluations, processing data).

Inserting Forms inside HTML Page

A form can be inserted between tags <form> and </form>. It also needs 2 attributes:

action - the action which should be done after sending the form. It is a URL address of script which will get the sent information from this form.
method - method which will be used to transfer data from form to server. You can use get or post.

Structure of the form


				<form action="processform.php" method="get">

                content of form (text arrays, switches, ...)

                </form>

Shortly to the methods POST and GET

The attribute method sets the way of transferring data from form to server. You can choose any method but you should consider the following limitations:

get (http://cs.wikipedia.org/wiki/GET) - all data are sent using the URL (visible address inside any browser) - data are inserted to the address behind the real URL of the page, separated by the question mark. This method can be used anytime but is usually used only when transferring small amount of data. It is not recommended to use GET if it is not necessary because ALL sent data are visible and CAN BE CHANGED. This could be a security problem. On the top of that, the length of URL is limited (see the text from Microsoft): Microsoft Internet Explorer can use maximally 2083 characters long URL addresses. Also the length of path in this application is limited to 2048 characters. This limitation is used for URL addresses using POST and GET. In case of using GET you are limited by the length of 2048 characters minus the length of the real path. The method POST is not limited by the maximum length of URL address because the couples (argument-value) are transferred in the header, not in the URL address. You might think that such a big number of characters is enough but imagine a form using long texts or many of them (imagine a form where user can answer to 30 questions using 256 characters for each one). In case you exceed the maximum length, the rest will be cut and thrown away.
post (http://cs.wikipedia.org/wiki/POST) - it sends data not in URL but as a separated HTTP object. The only disadvantage is the fact that after refreshing the page you will have to confirm a dialogue that you want to send the POST data again - this is confusing for most users (the POST method is not used for company intranet pages to avoid calls to webmasters).

Mostly Used Form Elements

Take a look at the mostly used form elements.

Textbox - text


        <input name="name-of-textbox" type="text" value="default-text" size="20" />

Textbox for a longer text - textarea


       <textarea name="longer-textbox" cols="30" rows="10">

Array to check - checkbox


       <input name="zaskrtavaci-poleA" type="checkbox" value="checked" checked="checked" />A

       <input name="zaskrtavaci-poleB" type="checkbox" value="unchecked" />B

Array to select - radio


      <input name="vyberove-pole" type="radio" value="A" checked="checked" />A

      <input name="vyberove-pole" type="radio" value="B" />B

      <input name="vyberove-pole" type="radio" value="C" />C

Selection from several options - select


       <select name="list">

       <option value="A">A</option>

       <option value="B"  selected="selected">B</option>

       <option value="C">C</option>

       </select>

Button for submitting the form - submit

You should also know the submit bottom. This button is used to submit data from the form (to be able to send them, without this element you cannot send any data). After clicking on this button inside this page you send this form with this button using the GET method.


       <input name="odeslat-formular" type="submit" value="Send the form" />

There are more possible elements and we will talk about them later.

Registration Form

Create a simple HTML form which will be used to register a new user to a discussion server. The form will contain the following data:

First Name
Last Name
E-mail
Sex
Comment
Favorite Topics

Choose proper form elements for each of these details and try using both get and post methods (try their behavior after pressing F5 in your browser). The form can look like the following one:

Is this form complete?

Homework

1. Describe at least two possibilities of forms notations in HTML (help: tables, attribute label, tags dl, dt and dd). Illustrate their usage on the previous registration form and discuss the individual solutions.

2. Try to find current online sources dealing with the problem of styling forms using CSS. Summarize found information and write used sources. Try to suggest a set of CSS styles for the previous registration form.

Additional Texts

Links

http://www.jakpsatweb.cz/formulare.html

Questions

Which tag is used for inserting a form inside a HTML page? Which attributes should you use and what is their meaning?
What are the differences between the methods get and post?
Name the mostly used form elements and several examples of their usage.

webdesign, xhtml, css, php - Mgr. Michal Mikláš