Tuesday, February 10, 2009

HTML Forms



Web Programs and HTML Forms

Many Web applications require that a user provides some input that should be sent by the browser to a web server. Typically a user fills out a form by filling in some fields with text and/or selecting from lists of options. There are a number of issues to consider when designing and developing such applications, here we are focusing on just the creation of the forms themselves, not on how these forms are processed by some program running on the web server.

HTML forms provide a mechanism for including many input boxes (and buttons) that the user can use to provide input to a web application. The browser understands that when an HTML form is submitted to a web application, the values that the user input to the system must somehow accompany the request itself. The request is a normal HTTP request, there is not a separate protocol for form submission. The designer of the HTML form must include information in the form itself that tells the browser where the submission should be sent, and whether to use an HTTP GET or POST request. Although the syntax of a POST is a little different than a GET, we will just mention using GET requests here (later we will explore what happens when a browser uses a POST to submit a form).

When a user submits a form using the HTTP GET method (by pressesing a submit button, or sometimes just by pressing the Enter key), the browser will compose a HTTP GET request that includes a URI in which a "query string" is appended to the URI after a '?'. This query string will contain the names and values of all the form fields in the HTML form being submitted. The general syntax of the query string looks like this:

name1=value1&name2=value2&...&namex=valuex

Each of the names corresponds to one form field, the values are the information the user supplies (by typing in a field or selecting from lists of options).

A complete HTTP get request that includes a query string created for a form submission might look like this:

GET /cgi/addmetoyourspamlist.cgi?first=dave&last=hollinger&email=hollingd@cs.rpi.edu HTTP/1.1
User-agent: Netscape

In the above example there are 3 form fields being submitted, one named "first" that represents the user's first name, "last" is the last name and "email" is an email address. Someone had to create the actual form used, in the rest of this document we look at the HTML tags used to create forms and how the browser uses these tags to submit.

URL Encoding

You might ask: what will happen if the user types in "billy bob" as the firstname in the above example? Wouldn't this mess things up since the space character would now show up in the HTTP request line? What if the following request is sent:

GET /cgi/addmetoyourspamlist.cgi?first=billy bob&last=hollinger&email=hollingd@cs.rpi.edu HTTP/1.1
User-agent: Netscape

The server expects three words on the request line, the example above has 4!

To avoid this problem (and a few others), the browser will not send the request as shown above (with a space in the query string). Instead, the browser will encode the query string using well known encoding rules called "urlencoding". The encoded string is used as the query part of the URI. The server/web application knows about this and will decode the query string before extracting field names and values. The rules of URL encoding are shown below:

The FORM tag

All form elements must be placed between a <FORM> and </FORM>. There can be multiple forms within a single HTML document - each form is separate entity and the contents of only one form are submitted as query (although a single form many contain many elements). The FORM tag has required attributes ACTION and METHOD.

The METHOD attribute of a form tag specifies the HTTP request method that should be used when the contents of the form are submitted as part of an HTTP request. Typically the request method is either GET or POST. The web application that handles the request will receive the contents of the form and must support the method specified, or things won't work. In other words - it is possible to write a web application (CGI program or ASP script) that only handles GET requests, so when creating a form, you need to know a little about the application to decide whether to use GET or POST.

The ACTION attribute specifies where the contents of the form should be sent. This is typically a URL (could be relative or absolute), although sometimes people use a mailto: URL so that when the user submits the form it is sent to as an email message to the specified email address.

Some FORM tag examples:

<FORM method=GET ACTION=http://www.foo.com/cgi-bin/aprog>


<FORM method="GET" action="prog.cgi">

<FORM method=POST action="mailto:billy@whitehouse.gov">

Form Elements (Fields)

Between the <FORM> and </FORM> tags you define the text and fields that make up the form. You can include HTML tags inside a form to format the text however you want, and there are a number of new tags that are used to define form fields

There are a variety of types of form fields:

Input Fields

Input fields allow the user to type in a string value as input or to click on buttons or menus to select specific options. These fields are all created with the INPUT tag, the required attribute TYPE indicates what specific kind of input field is being created.

The INPUT tag also has a required attribute named NAME that establishes the name of the field being created. This name is important, since it will be sent to the Web Application along with the value the user provides. Within a single form, every input must have a unique name.

Below is a description of many of the types of input fields, see any HTML reference for a complete description

TEXT Input Fields

TEXT is the most common type of input field, it allows the user to type in a single line of text. There are some additional attributes that can control the maximum length of the field (MAXLENGTH), the size of the box drawn by the browser (SIZE) and the initial/default value for the field (VALUE).

Here are a few examples of TEXT input fields:

<INPUT TYPE=TEXT NAME=FOO>

<INPUT TYPE=TEXT
NAME=PIZZA
SIZE=10
MAXLENGTH=20
VALUE=Pepperoni>

Here is an example form that includes a couple of text fields:

<FORM METHOD=GET ACTION=cgi-bin/foo>
Your Name:
<INPUT TYPE=TEXT NAME="Name"><br>

Your Age:
<INPUT TYPE=TEXT NAME="Age"><br>

</FORM>
Your Name:
Your Age:

A couple of things to notice:

  1. There is no special kind of "number" field - we just use a text field to get the user's age (and hope they actually type in a number).
  2. The INPUTs above result only in the display of a text box, the broser does not display the name of the field (if you want the box to be labeled on the screen, you need to do that with HTML).
  3. The form above has no button to press, so there is no way for the user to submit the form!

Submission Buttons

Another type of input field is the SUBMIT type, this tells the browser to draw a button. When the user clicks on the button the browser knows to submit the contents of the form to the URL specified as the ACTION in the form tag.

Submit inputs support the attribute VALUE which is the string you want displayed in the button. If you don't include a VALUE attribute the browser will put the string "Submit" in the button. Note that the NAME attribute is not required for a submit input.

Reset Buttons

An input of type RESET tells the browser to create a button that the user can press to clear all form fields (set to the default values). You can specify the text to appear in the button with the VALUE attribute.

Now we can look at a complete form example:

<FORM METHOD=GET ACTION=cgi-bin/foo>
Your Name: <INPUT TYPE=TEXT NAME=Name><br>

Your Age: <INPUT TYPE=TEXT NAME=Age><br>

<INPUT TYPE=SUBMIT VALUE=Submit>
<INPUT TYPE=RESET VALUE="Clear Form">
</FORM>
Your Name:
Your Age:

The above form has the ACTION set to the relative URL cgi-bin/foo, which does not really exist (there is no such URI on the server). We can change the URL in the form to point to any web page or application we want, although if the URL does not reference a web application that is looking for the form fields Name and Age nothing special will happen. For example, we can specify the action as www.rpi.edu and see what happens:

<FORM METHOD=GET ACTION=cgi-bin/foo>
Your Name: <INPUT TYPE=TEXT NAME=Name><br>

Your Age: <INPUT TYPE=TEXT NAME=Age><br>

<INPUT TYPE=SUBMIT VALUE=Submit>
<INPUT TYPE=RESET VALUE="Clear Form">
</FORM>
Your Name:
Your Age:

Tables and Forms

Tables are often used to make forms look pretty - remember that you can include any HTML formatting tags you want within a form

<FORM METHOD="GET" ACTION="cgi-bin/foo">
<table><tr>
<td>Your Name: </td>
<td><INPUT TYPE="TEXT" NAME="Name"></td>
</tr><tr>
<td>Your Age:</td>
<td> <INPUT TYPE="TEXT" NAME="Age"></td>
</tr><tr>
<td><INPUT TYPE="SUBMIT" VALUE="Submit" ></td>
<td><INPUT TYPE="RESET" VALUE="Clear Form"></td>
</tr></table>
</FORM>
Your Name:
Your Age:

Checkbox Inputs

Inputs of type CHECKBOX present user with an item that can be selected or deselected. Each checkbox has a name and a value and can be initially selected/deselected. Only checkbox fields that are selected when the form is submitted are sent as part of the query. To set a checkbox to be initially checked, use the SELECTED attribute (this attribute does not nees a value.

If you don't specify a value in a checkbox tag, the browser will send the value "on". Here is an example with some checkbox definitions:

<INPUT TYPE=checkbox name=chocchip value=yes>
<INPUT TYPE=checkbox name=oreo SELECTED>

Here is a complete form example that includes some checkboxes:

<FORM METHOD=GET ACTION=cgi-bin/foo>

Select all the cookies you like:<br>

<INPUT TYPE=CHECKBOX NAME=Oreo Value=yes>
Oreo<br>
<INPUT TYPE=CHECKBOX NAME=Oatmeal >
Oatmeal<br>

<INPUT TYPE=CHECKBOX CHECKED NAME=ChocChip SELECTED VALUE=ofcourse>
Chocolate Chip<br>

<INPUT TYPE=SUBMIT VALUE=Submit>
</FORM>
Select all the cookies you like:
Oreo
Oatmeal
Chocolate Chip

You can have multiple checkboxes with the same name (each must have a different value for this to work), and the value of the field that is sent by the browser will be a collection of values for the named field (when sent to a web server, a field can have multiple values). Here is an example (you can submit this form and although there is no web application to handle it, you will be able to see the query string created by the browser).

<div BGCOLOR=yellow>
<FORM METHOD=GET ACTION=cgi-bin/foo>

Select all the cookies you like:<br>

<INPUT TYPE=CHECKBOX NAME=Cookie Value=Oreo>
Oreo<br>
<INPUT TYPE=CHECKBOX NAME=Cookie Value=Oatmeal>
Oatmeal<br>

<INPUT TYPE=CHECKBOX CHECKED NAME=Cookie VALUE=ChocChip SELECTED>
Chocolate Chip<br>

<INPUT TYPE=SUBMIT VALUE=Submit>
</FORM>
</div>
Select all the cookies you like:
Oreo
Oatmeal
Chocolate Chip

Radio Button Inputs

Radio Button inputs are like checkboxes, except that the user must select only one item from group of choices. The way the browser knows which radio buttons are part of a group of choices is by looking at the NAME attribute. All radio button inputs that form a group must have the same NAME, and each should have a different value for the VALUE attribute (this is how the web application will find out which was picked).

Here is a complete form that includes some radio buttons:

<FORM METHOD=GET ACTION=cgi-bin/foo>
Select the cookie you want to order:<br>

<INPUT TYPE=RADIO
NAME=Cookie Value=Oreo>
Oreo <br>
<INPUT TYPE=RADIO
NAME=Cookie Value=Oatmeal>
Oatmeal <br>
<INPUT TYPE=RADIO CHECKED
NAME=Cookie Value=ChocChip>
Chocolate Chip<br>

<hr>
Select the size drink you would like:<br>

<INPUT TYPE=RADIO NAME=drink VALUE=1>
<span style="font-size:small"> Small</SPAN><br>

<INPUT TYPE=RADIO NAME=drink VALUE=2>
<span style="font-size:medium"> Medium</SPAN><br>

<INPUT TYPE=RADIO NAME=drink VALUE=3>
<span style="font-size:large"> Large</SPAN><br>

<INPUT TYPE=SUBMIT VALUE=Submit>
</FORM>

Select the cookie you want to order:
Oreo
Oatmeal
Chocolate Chip

Select the size drink you would like:
Small
Medium
Large

TEXTAREA Form Fields

You can create a multiline text field with the TEXTAREA tag - you don't use the INPUT tag to create this kind of field. The TEXTAREA tag requires the NAME attribute and supports the attributes ROWS and COLS (to define the size of the box drawn on the screen). Unlike the INPUT tag - the TEXTAREA tag has an end tag, so you need to include a </TEXTAREa> tag.

Everything included between the <TEXTAREa> and </TEXTAREa> tags is the initial value of the multiline text box. The user can delete, edit or add to this initial text.

Here is a complete example:

<FORM METHOD=GET ACTION=cgi-bin/foo>

Please enter your address
in the space provided:<br>

<TEXTAREA NAME=address COLS=40 ROWS=5>
Your address goes here
</TEXTAREa><br>

<INPUT TYPE=SUBMIT VALUE=Submit>
</FORM>

Please enter your address in the space provided:

SELECT form fields

The SELECT and OPTION tags can be used to create pull-down menus and scrolling lists of choices. The SELECT tag must include a NAME attribute (this is the name of the form field sent by the browser). The SELECT tag supports the optional attribute SIZE which controls the number of options displayed at once. If the SIZE attribute is omitted or set to the value 1, the browser will display a pull-down menu. If the attribute has a value greater than 1, the browser will display a scrolling list of options.

Between the <SELECT> tag and the corresponding end tag </SELECT> there can be number of OPTION tags - one for each choice you want displayed. The text that follows the OPTION tag is the text that will be displayed by the browser. The value sent by the browser if a choice is selected can be specified with a VALUE attribute, if none is specified the value sent will be the text that follows the OPTION tag.

Below is an example that displays a pull-down menu, the OPTION values are not specified so the browser will sent the text that is displayed as each menu item:

<FORM METHOD=GET ACTION=cgi-bin/foo>

Pick your favorite:
<SELECT Name="cookie">
<OPTION>Oreo
<OPTION>Oatmeal
<OPTION>Chocolate Chip
</SELECT>
<INPUT TYPE=SUBMIT VALUE=Submit>

</FORM>

Pick your favorite:

Here is another example, this one will appear as a scrolling list (the SIZE attribute controls the size), and the OPTION values are set inside the OPTION tags:

<FORM METHOD=GET ACTION=cgi-bin/foo>
Pick your favorite:
<SELECT Name="cookie" SIZE=3>
<OPTION VALUE="1">Oreo
<OPTION VALUE="2">Oatmeal
<OPTION VALUE="3">Fig Newton
<OPTION VALUE="4">Chocolate-Chip
<OPTION VALUE="5">Chocolate Chocolate-Chip
<OPTION VALUE="6">Chippity Chocolate Chip
</SELECT>
<INPUT TYPE=SUBMIT VALUE=Submit>

</FORM>
Pick your favorite:

Form Submission

When the user presses on a submit button the following happens:

There are a few rules to keep in mind:

Checking what is sent by the browser

As many of the above forms demonstrate, you don't need to have an actual web application written to determine what the browser will send when a form is submitted. Any form the uses the GET request method includes all the form data in the URI, and this will appear in the Address box of the browser.

Other Form Field Types

There are more form field types:

Friday, February 6, 2009

Setup time for Linux

How important is time for Linux

Lots of the task your Linux machine are controlled by the time, things like cron jobs, emails' Date, file's dates, so it is really important to have your computer's clock on time.

Setting the time using Gnome

If you are using Gnome you can set the time this way.

Right click on your clock applet, should be in the upper-right corner of you screen, you will be asked for the password needed to gain root rights, and then you will see this screen.

Gnome time adjust windows screenshot

There you can adjust time, or make Linux to do it automatically, and select the time servers (If you have Internet conection), you can also adjust the Time Zone where you are.

Utilities for the command Line

From the command line we have lots of utilities to set up the clock, set the date of the system, set the date of the hardware or have time automatically updated from Internet time servers.

date
Date displays the date and time of the system, used by root it can also be used to change the date and time of the system.

If you just enter:

date

You will get the date of the system, like this;

Sat Aug 18 19:36:53 BOT 2007

You can set the date by issuing (as root):
Usage:

date nnddhhmm[[cc]yy][.ss]

where

  • nn = month of the year (01 to 12)
  • dd = day of the month (01 to 31)
  • hh = hour of the day (00 to 23)
  • mm = minute of the hour (00 to 59>
  • cc = The first to digits of the year
  • yy = The last two digits of the year
  • .ss = The seconds

hwclock

With this command you are able to set or get the time of you hardware clock, the hardware clock is the clock that runs in you PC hardware even if you disconnect it from the main power supply

, this is because it has a lithium battery in the modern computers and another type of battery in the old ones.

Usage

hwclock [function] [options...]

Functions:
--help show this help
--show read hardware clock and print result
--set set the rtc to the time given with --date
--hctosys set the system time from the hardware clock
--systohc set the hardware clock to the current system time
--adjust adjust the rtc to account for systematic drift since
the clock was last set or adjusted
--getepoch print out the kernel's hardware clock epoch value
--setepoch set the kernel's hardware clock epoch value to the
value given with --epoch
--version print out the version of hwclock to stdout

Options:
--utc the hardware clock is kept in coordinated universal time
--localtime the hardware clock is kept in local time
--directisa access the ISA bus directly instead of /dev/rtc
--badyear ignore rtc's year because the bios is broken
--date specifies the time to which to set the hardware clock
--epoch=year specifies the year which is the beginning of the
hardware clock's epoch value
--noadjfile do not access /etc/adjtime. Requires the use of either --utc or --localtime

If you want to set your hardware clock to your local time you can use this command:

hwclock --set --date='08/18/07 21:08:40' --localtime

That will set the clock you August 8th, 2007 at 21:08 and will tell your clock that is the local time, you can use --utc instead of --localtime to set your clock to the Universal Time (Greenwich Time).

If you want to read it issue this command

hwclock --show

You should get an output like this:

Sat 18 Aug 2007 09:19:03 PM BOT -0.677125 seconds

Keeping it on time automatically

If you want to keep your system time accurate and on time automatically, you can install ntp

To do this just run:

On Debian and Ubuntu

apt-get install ntp

On Fedora and CentOS

yum install ntp

Once installed you have to configure it, its configuration file is:

/etc/ntpd.conf

It looks like this by default on Debian systems:

# /etc/ntp.conf, configuration for ntpd

driftfile /var/lib/ntp/ntp.drift
statsdir /var/log/ntpstats/

statistics loopstats peerstats clockstats
filegen loopstats file loopstats type day enable
filegen peerstats file peerstats type day enable
filegen clockstats file clockstats type day enable


# You do need to talk to an NTP server or two (or three).
#server ntp.your-provider.example

# pool.ntp.org maps to more than 300 low-stratum NTP servers.
# Your server will pick a different set every time it starts up.
# *** Please consider joining the pool! ***
# *** ***
server 0.debian.pool.ntp.org iburst
server 1.debian.pool.ntp.org iburst
server 2.debian.pool.ntp.org iburst
server 3.debian.pool.ntp.org iburst

# By default, exchange time with everybody, but don't allow configuration.
# See /usr/share/doc/ntp-doc/html/accopt.html for details.
restrict -4 default kod notrap nomodify nopeer noquery
restrict -6 default kod notrap nomodify nopeer noquery

# Local users may interrogate the ntp server more closely.
restrict 127.0.0.1
restrict ::1

# Clients from this (example!) subnet have unlimited access,
# but only if cryptographically authenticated
#restrict 192.168.123.0 mask 255.255.255.0 notrust

# If you want to provide time to your local subnet, change the next line.
# (Again, the address is an example only.)
#broadcast 192.168.123.255

# If you want to listen to time broadcasts on your local subnet,
# de-comment the next lines. Please do this only if you trust everybody
# on the network!
#disable auth
#broadcastclient

Commands to update manually from the server

Here we have two commands:

  • rdate
  • ntpdate

rdate

Its usages is:

rdate [-psau] host [port]

Where the options are:

-p
Do not set, just print the remote time
-s
Do not print the time.
-a
Use the adjtimex(2) call to gradually skew the local time to the remote time rather than just hopping.
-u
Use UDP instead of TCP as the transport.

So to update your clock with this command issue this command:

rdate 129.6.15.28

ntpdate

Its usage is:

ntpdate [-bBdoqsuv] [-a key] [-e authdelay] [-k keyfile] [-o version] [-p samples] [-t timeout] server [...]

As ntpdate will decline to set the date if an NTP server daemon (e.g., ntpd) is running on the same host so you should decide if use the daemon way or use ntpdate in the cron.

To check if your ntp daemon is running enter:

/etc/init.d/ntp status

To use ntpdate if you ntp daemon is off enter:

ntp [server]

i.e.

ntpdate 129.6.15.28

To start the daemon enter:

/etc/init.d/ntp start

Related articles

ntpdate man page
date man page
hwclock man page

Google+