HTTP HyperText Transfer Protocol

HTML forms

html forms are usefull for getting different kinds of user input and sending this input to the web server html forms are introduced by the <form> tag syntax of <form>:
<form attribute=value ..> text content input elements </form>

input elements are described using the <input> tag

<form> attributes

action=URL : specifies where the form-data will be sent when

the form is submitted

accept=MIME type : specifies the types of files that can be

submitted through a file upload

accept-charset=charset
can handle for form-data

: specifies the character-set the serer

enctype=application/x-www-form-urlencoded,
should be encoded before sending it to the web server

multipart/form-data, text/plain : specifies how form data

method=get (form-data is sent to the web server in the header

of the HTTP request), post (form-data is sent to the web server in the body of the HTTP request) : specifies how to send form-data

name=string : the name of the form

Types of user input <input type=>

The <input> tag

is useful for selecting user information receives input in various types has no end tag </input> in Html attributes:

accept=MIME_type : for type=file only specifies types of files that can be

submitted through a file upload alt=text : for type=image only specifies an alternate text for an image input checked=checked : for type=checkbox | radio specifies if the input should be preselected when the page loads disabled=disabled : specifies the input should be disabled when the page loads maxlength=number : for type=text | password specifies the maximum length in characters of the input field name=text : specifies the name of input element readonly=readonly : for type=text | password specifies the input field should be read-only size=number : the width of the input field src=URL : the URL of an image to display as a submit button type=button,checkbox,file,hidden,image,password,radio,reset,submit,text value=text : value of the input element

Other tags useful in <form>s

<textarea>

defines a multi-line text input control can hold an unlimited no. of characters text is rendered in fixed-width font (usually courier) attributes:

cols=number : visible number of columns in a textarea (required

attribute) rows=number : visible numbers of rows in a textarea (required attribute) disabled=disabled : textarea is disabled readonly=readonly : textarea is readonly name=text : name of the textarea element
<textarea rows=2 cols=20> This is a text area..

Ex.:

</textarea>

<label> and <button>

<label> does not render anything; defines a label for an input element; it toggles the control if the user clicks the text within the label <button> defines a push button; it can contain inside text or images (difference from <input type=button>) attributes for <button>:

disabled=disabled : button is disabled name=text : name of the button type=button | reset | submit : type of the button value=text : value of the button

Ex.: <button type=button>Click me!</button>

<legend>,<fieldset> and <optgroup>

<legend> defines a caption for a <fieldset> element <fieldset> groups together form elements; it draws a box around them Ex.: <fieldset>
<legend>Some caption</legend> <input type=text><br> <input type=text> </fieldset>

<optgroup> groups together related options in a select list Ex.: <select>

<optgroup label="Fruits"> <option value="apple">Apple</option> <option value="grapes">Grapes</option> </optgroup> <optgroup label="Sports"> <option value="football">Football</option> <option value="basketball">Basketball</option> </optgroup> </select>

<select> and <option>

<select> and <option> are useful for creating a drop-down list Ex.:<select>
<option value="ford">Ford</option> <option value="ferrari">Ferrari</option> <option value="bmw">BMW</option> </select>

attributes of select:

disabled=disabled : list is disabled multiple=multiple : multiple selections are possible name=text : name of the element size=number : no. of visible options in the list disabled=disabled : this option is disabled selected=selected : this option is selected by default value=text : value that will be sent to the server when the form is
submitted

attributes of option:

Sets of characters in HTML

Most browsers support: ASCII character set (see http://www.w3schools.com/tags/ref_ascii.asp) ISO-8859-1 character set (see http://www.w3schools.com/tags/ref_charactersets.asp) Math, greek and other symbols (see http://www.w3schools.com/tags/ref_symbols.asp)

URL Uniform Resource Locator

an URL identifies a resource in the WWW URLs are a subset of URIs (Uniform Resource Identifiers); URL=URI that provides the location for a resource general form of a URL:
resource_type://domain:port/filepathname?querystring#anchor resource_type : the scheme name (protocol) which defines the namespace, syntax and remaining part of URL domain : registered domain name or IP address of location (caseinsensitive) port : port number (optional, default for scheme is used) filepathname : path to the resource/file on the server (usually case-sensitive) querystring : data submitted to the server through forms anchor : a specific location inside that document

URL examples

http://www.google.com ftp://ftp.opensuse.com/dist/11.1/ https://www.cs.ubbcluj.ro/~forest/HtmlFolder/ac/index.html http://www.google.com/firefox?client=firefoxa&rls=org.mozilla:en-US:official http://cs.ubbcluj.ro/index.php?view=2&size=default http://www.java.sun.com/index.html#j2me

URI Uniform Resource Identifier

Web communication
Get http://www.google.com/index.html

HTTP Request:

Internet
HTTP Reply

Client: browser (Firefox) on local computer

Web server: apache on www.google.com

HTTP HyperText Transfer Protocol

together with HTML forms the base of WWW is standardized by IETF (rfc 2616) is a request-response protocol it is stateless (does not maintain a state of a session) and asynchronous (an html document is loaded asynchronous by the browser, as soon as parts of it are available) latest version is HTTP/1.1 runs on top of TCP on the standardized port 80

HTTP Request

has the form:

Request-Method SP Request-URL SP HTTP-Version <CR><LF> (generic-header | request-header | entity-header <CR><LF>) <CR><LF> [message body]

Request-Method is:

GET request whatever information is identified by the Request-URL POST request that server accepts the entity enclosed in the request OPTIONS - request for information about communication options PUT request that the enclosed entity be stored under the Request-URL DELETE request that the server delete the resource identified by Request-URL TRACE invoke a remote, application-layer loopback of the request message CONNECT used by proxies in SSL connections HEAD identical to GET, but server must not return a message body in response

HTTP Request (2)

Request-header can have the following fields (selection):

Accept : MIME types of resources accepted by browser Accept-Charset : charset accepted by browser Accept-Encoding : encoding accepted by browser Accept-Language : language accepted by browser Authorization : user-agent wishes to authenticate itself with a server Host : the host Request-URL points to Referer : the URL of document refering this URL User-Agent : Firefox, Safari, IE

HTTP Response

has the form:

Http-Version SP Status-Code SP Reason-Phrase<CR><LF> (generic-header | response-header | entity-header <CR><LF>) <CR><LF> [message body]

Response-header has the following fields (selection):

Accept-Ranges :
resource

server indicates its acceptance of range requests for

Age :

senders estimate of the amount of time since the response was generated by server

Location :
unavailable

redirect the client to a location other than Request-URL for completion of the request

Retry-After : Server :

indicate to client how long the service is expected to be

information about software used by the server to handle the request

HTTP Request example

Get http://www.google.com HTTP/1.1 Host: www.google.com User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1.3) Gecko/20090824 Firefox/3.5.3 (.NET CLR 3.5.30729) Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 Accept-Language: en-us,en;q=0.5 Accept-Encoding: gzip,deflate Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7 Keep-Alive: 300 Connection: keep-alive Cookie:PREF=ID=141ca2d4581746b4:U=f22e9e94ccc4a56f:FF=4:LD=en:NR=10:CR =2:TM=1249567334:LM=1251146058:GM=1:S=qWowBrte7hrXniGp; NID=27=n9Khexo85YHnovw93wK4qC2lZtGa1DnzVQEB6iul9tn62fsJ7gFuMVK25 2ceLCD3iS54rnHD6kWDdD1JP77akDhMl0EWzoTbPt3cM5g8mapG9SskdRSyEyLWcJK1LrX Cache-Control: max-age=0

HTTP Response example

HTTP/1.1 200 OK Date: Tue, 13 Oct 2009 05:27:42 GMT Expires: -1 Cache-Control: private, max-age=0 Content-Type: text/html; charset=UTF-8 Content-Encoding: gzip Server: gws Content-Length: 3667 X-XSS-Protection: 0

Mozilla Firebug
see more