HTML Forms

a form is a container for input elements on a web page

input elements contain data that is sent to the web server for processing

<form action=”/cgi-bin/register_user” method=”post”>...</form>

action – cgi script to be executed on the server side method – POST or GET specifies how the input values are delivered to the cgi script

Input controls

<input> - text, radio buttons, checkboxes, files, hidden, passwords

<button> - buttons <textarea> - multiline text <select> - drop down list

<input type=”text”>

attributes: name – control name value – intial value size – initial display width (in characters) maxlength – maximum number of characters a user

may enter

User Id:

<input type=”text” name=”userid” size=”10” maxlength=”8”>

<input type=”password”>

attributes: same as for “text”

characters typed are rendered as *s secure only in the user agent

actual value sent in the clear over HTTP

Password:

<input type=”password” name=”passwd” size=”10” maxlength=”8”>

<input type=”hidden”>

like text except the field isn't rendered in the browser and the user can't interact with it

attributes: name – control name value – initial (and only value)

<input type="hidden" name="secret" value="ssshhh!">

<textarea>

creates a multi-line input text area attributes:

rows – the number of lines of input text cols – the width of the text area (in average character

widths) name – the name of the control

Mail message: <br><textarea rows="5" cols="40" name="mmesg">This is the default value.</textarea>

<input type=”radio”>

creates a radio button a mutually exclusive group is created by creating

several elements with the same name attribute attributes:

name – control name value – value associated with selected radio button checked – initial state of the button

Eye color: <br><input type="radio" name="eye_c" value="brown"> Brown <br>

<input type="radio" name="eye_c" value="blue" checked="checked"> Blue <br>

<input type="radio" name="eye_c" value="green"> Green <br>

<input type=”checkbox”>

creates a checkbox a non-exclusive group is created by creating

several elements with the same name attribute attributes:

name – control name value – value associated with selected checkbox checked – initial state of the checkbox

Favourite Foods: <br>

<input type="checkbox" name="ffood" value="tofu"> Tofu <br>

<input type="checkbox" name="ffood" value="lentils"> Lentils <br>

<input type="checkbox" name="ffood" value="steak"> Steak <br>

Lists

<select> element contianing one or more <option> elements

<select> attributes name – control name size – number of list items visible multiple – indicates multiple items can be selected

from the list

<option> element

defines one option in a list attributes:

selected – indicates that the option is pre-selected value – initial value of the control (otherwise defaults

to the content of the element) label – alternate string to display rather than the

content of the element

Menu items:<select name="menu" size="1"><option value="a">foo</option><option value="b">bar</option><option value="c">foobax</option><option value="d">blim</option></select>

<input type=”file”>

allows an entire file to be submitted with a form attributes

name – control name value – intial file to use

Image file:<input type="file" name="img_file" value="C:\boot.ini" size="10">

Buttons

submit – causes the form to be submitted to the web server

reset – causes all input controls within the <form> to be restored to their initial buttons

other – behaviour defined by page author through client side scripting

<input > style buttons

attributes: name: control name type: submit, reset, image, button

image creates a graphical submit button button creates a generic button

value: text to display on button control

<input type="submit" value="Go!"><input type="reset" value="Ooops!"><br><input type="button" value="Do Something!"><br><input type="image" name="info" src="info.gif"><br>

HTML5 features

placeholder attribute date, time, email, url, color, etc. input types