Scribd
Upload
6 views

L03 Form

Uploaded by

AjathShatruRaju
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

L03 Form

Uploaded by

AjathShatruRaju
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

CSIT128 / CSIT828

Web Form
Joseph Tonien
Form
● HTML forms are used to collect user input.

● HTML forms contain form elements.

● Different types of form elements: text field, textarea, checkboxes, radio


buttons, option selection, submit buttons, ...

● When user clicks a submit button, user input will be sent to the server to
process
Form - type text

<form ...>
First name:<br />
<input type="text" name="firstname" size="30"><br />
Last name:<br />
<input type="text" name="lastname" size="30"><br />

...
</form>
Form - type password

<form ...>
Username:<br />
<input type="text" name="username" size="30"><br />
Password:<br />
<input type="password" name="password" size="30"><br />

...
</form>
Form - type checkbox
This is the value that sent to server
<form ...>
Choose journals to subscribe:<br />
<input type="checkbox" name="journal" value="AMM">American
Mathematical Monthly<br />
<input type="checkbox" name="journal" value="CMJ">College
Mathematics Journal<br />
<input type="checkbox" name="journal" value="MM">Mathematics
Magazine<br />

...
</form>
This is the value that get displayed
Form - type radio
This is the value that sent to server

<form ...>
Select student type:<br />
<input type="radio" name="studentType" value="u">Undergraduate
<input type="radio" name="studentType" value="p">Postgraduate
<input type="radio" name="studentType" value="other">Other

...
</form>

This is the value that get displayed


Form - select This is the value that sent to server

<form ...>
Select day:<br />
<select name="day">
<option value="mon">Monday</option>
<option value="tue">Tuesday</option>
<option value="wed">Wednesday</option>
<option value="thu">Thursday</option>
<option value="fri">Friday</option>
</select>
...
</form>
This is the value that get displayed
Form - select multiple

<form ...>
Select day:<br />
<select name="day" multiple>
<option value="mon">Monday</option>
<option value="tue">Tuesday</option>
<option value="wed">Wednesday</option>
<option value="thu">Thursday</option>
<option value="fri">Friday</option>
</select>
...
</form>
Form - textarea

<form ...>
Enter your comment:<br />
<textarea name="comment" rows="5" cols="30">
</textarea>

...
</form>
Form - submit this is the program in the server that processes the form

<form action="handle_login" method="post">


Username:<br />
<input type="text" name="username" size="30"><br />
Password:<br />
<input type="password" name="password" size="30"><br /><br />

<input type="submit" value="Login">


<input type="reset" value="Reset form">

</form>
Form method
<form action="handle_login" method="post">

method="get" method="post"

Visibility Data is visible in the URL Data is not displayed in the URL

History Parameters remain in the Parameters are not saved in


browser history browser history

Bookmarked Can be bookmarked Cannot be bookmarked

Security get is less secure compared to post because data sent in part of
the URL.
Never use get when sending passwords or other sensitive
information.

Back button/ Harmless Data will be re-submitted. Browser


Reload should alert the user about
resubmission.
Form method
<form action="handle_login" method="post">

method="get" method="post"

Restrictions Yes, when sending data, the get No restrictions


on data method adds the data to the URL;
length and the length of a URL is limited
(maximum URL length is 2048
characters)
Restrictions Only ASCII characters allowed No restrictions. Binary data
on data type is also allowed.
Form - reset

<form action="handle_login" method="post">


Username:<br />
<input type="text" name="username" size="30"><br />
Password:<br />
<input type="password" name="password" size="30"><br /><br />

<input type="submit" value="Login">


<input type="reset" value="Reset form">

</form>

When reset button is clicked


all input in the form will be
cleared
Form - submission

<form ...>
First name:<br />
<input type="text" name="firstname" size="30"><br />
Last name:<br />
<input type="text" name="lastname" size="30"><br />

Select day:<br />


<select name="day">
<option value="mon">Monday</option>
<option value="tue">Tuesday</option>
<option value="wed">Wednesday</option>
<option value="thu">Thursday</option>
<option value="fri">Friday</option>
</select>
...
</form>
What is the purpose of the attribute name ?
<html>
<body>
<form action="handle_login" method="get">

Choose journals to subscribe:<br />


<input type="checkbox" name="journal" value="AMM">American Mathematical Monthly<br />
<input type="checkbox" name="journal" value="CMJ">College Mathematics Journal<br />
<input type="checkbox" name="journal" value="MM">Mathematics Magazine<br />

Select student type:<br />


<input type="radio" name="studentType" value="u">Undergraduate
<input type="radio" name="studentType" value="p">Postgraduate
<input type="radio" name="studentType" value="other">Other
<br />

Select day:<br />


<select name="day" multiple>
<option value="mon">Monday</option>
<option value="tue">Tuesday</option>
<option value="wed">Wednesday</option>
<option value="thu">Thursday</option>
<option value="fri">Friday</option>
<option value="hel">hello</option>
</select>
<br />

<input type="submit" value="Login">


<input type="reset" value="Reset form">

</form> file:///D:/demo/handle_login?
</body> journal=AMM&
</html> journal=CMJ&
studentType=other&
day=mon&
day=wed
Examples

Google search

http://www.uow.edu.au/~dong/w3/example/form/google-search.html

Google translation

http://www.uow.edu.au/~dong/w3/example/form/google-
translation.html

How can we find out the parameters for Google search and Google translation?
References

http://www.w3schools.com/html

Robert W. Sebesta, Programming the World Wide Web, Pearson.

You might also like