HTML Forms

Web Architecture [./]
Fall 2011 — INFO 253 (CCN 42598)

Dilan Mahendran, UC Berkeley School of Information
2011-10-13

Creative Commons License [http://creativecommons.org/licenses/by/3.0/]

This work is licensed under a CC
Attribution 3.0 Unported License
[http://creativecommons.org/licenses/by/3.0/]

Contents D. Mahendran: HTML Forms

Contents

D. Mahendran: HTML Forms

(2) Abstract

This lecture introduces HTML Forms, a way how an HTML page can provide input fields, so that users can provide data to a Web-based application. HTML forms are regular HTML pages (i.e., using regular HTML structures), but they also contain special HTML elements for data entry. Most importantly, each form contains instructions on how to submit the entered data, and the browser will use that information to send an HTTP request containing all the data of the form submission.



Forms Basics

Outline (Forms Basics)

  1. Forms Basics [10]
  2. Structuring Forms [7]
Forms Basics D. Mahendran: HTML Forms

(4) HTTP Web Services



Forms Basics D. Mahendran: HTML Forms

(5) Forms Mechanics

form-mechanics.png

Forms Basics D. Mahendran: HTML Forms

(6) Forms Markup



Forms Basics D. Mahendran: HTML Forms

(7) Forms Elements (User View)


Text:
Password:
Checkbox:
Radio Button:
Text Areas:
Selection:
Multiple Selection:
File Upload:
Hidden:
Submit:


Forms Basics D. Mahendran: HTML Forms

(8) Forms Elements (Source View)

<form action="http://stevex.net/dump.php" method="POST" enctype="multipart/form-data"><table>
	<tr><td>Text:</td><td><input type="text" name="text" value="text input"/></td></tr>
	<tr><td>Password:</td><td><input type="password" name="password" value="hidden text"/></td></tr>
	<tr><td>Checkbox:</td><td><input type="checkbox" name="check" value="1"/> <input type="checkbox" name="check" value="2"/> <input type="checkbox" name="check" value="3"/></td></tr>
	<tr><td>Radio Button:</td><td><input type="radio" name="radio" value="1"/> <input type="radio" name="radio" value="2"/> <input type="radio" name="radio" value="3"/></td></tr>
	<tr><td>Text Areas:</td><td><textarea name="textarea" rows="2" cols="20"/></td></tr>
	<tr><td>Selection:</td><td><select name="select"><option selected="selected">XML</option><option>SGML</option></select></td></tr>
	<tr><td>Multiple Selection:</td><td><select name="mselect" multiple="multiple"><option>242</option><option>290-3</option><option>290-13</option></select>
	<tr><td>File Upload:</td><td><input name="file" type="file"/></td></tr>
	<tr><td valign="top" align="right">Hidden:</td><td><input type="hidden" name="hidden" value="hidden input"/></td></tr>
	<tr><td>Submit:</td><td><input name="submit" type="submit"/></td></tr>
</table></form>


Forms Basics D. Mahendran: HTML Forms

(9) Date Entry

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <title>JavaScript Datepicker</title>
  <script type="text/javascript" src="date-picker.js"></script>
  <link rel="stylesheet" type="text/css" href="date-picker.css">
 </head>
 <body>
  <form action="http://stevex.net/dump.php" method="GET">
   <input type="text" name="date">
   <input type="button" value="calendar" onclick="displayDatePicker('date');">
   <input type="submit" value="submit date">
  </form>
 </body>
</html>


Forms Basics D. Mahendran: HTML Forms

(10) Forms and GET



Forms Basics D. Mahendran: HTML Forms

(11) Forms and POST



Forms Basics D. Mahendran: HTML Forms

(12) POST Form Processing



Forms Basics D. Mahendran: HTML Forms

(13) Processing of Form Data

  <p>Query Parameter Test:</p>
  <p>test: <?php echo $_REQUEST["test"]; ?></p>
  <p>name: <?php echo $_REQUEST["name"]; ?></p>
  <p>field: <?php echo $_REQUEST["field"]; ?></p>


Structuring Forms

Outline (Structuring Forms)

  1. Forms Basics [10]
  2. Structuring Forms [7]
Structuring Forms D. Mahendran: HTML Forms

(15) Form Usability



Structuring Forms D. Mahendran: HTML Forms

(16) Labels

<tr><td>Text:</td><td><input type="text" name="text"/></td></tr>
<tr><td>Password:</td><td><input type="password" name="password"/></td></tr>
<tr>
 <td><label for="textctrl">Text:</label></td>
 <td><input type="text" name="text" id="textctrl"/></td>
 </tr>
 <tr>
 <td><label for="pwdctrl">Password:</label></td>
 <td><input type="password" name="password" id="pwdctrl"/></td>
</tr>


Structuring Forms D. Mahendran: HTML Forms

(17) Fieldsets

<fieldset><legend>Billing</legend>billing form HTML …</fieldset>
<fieldset><legend>Shipping</legend> shipping form HTML … </fieldset>
Billingbilling form controls …
Shippingshipping form controls …


Structuring Forms D. Mahendran: HTML Forms

(18) Tabbing in Forms



Structuring Forms D. Mahendran: HTML Forms

(19) Disabled and Readonly Controls



Structuring Forms D. Mahendran: HTML Forms

(20) Disabled and Readonly Controls Display

Normal Control Disabled Control Readonly Control
Text:
Password:
Checkbox: !
Radio Button: !
File Upload: !
Text Areas:
Selection:[ not supported ]
Multiple Selection:


Structuring Forms D. Mahendran: HTML Forms

(21) Markup for Disabled/Readonly Controls

   <table style="margin : 2% ; width : 90% ; " rules="groups" cellpadding="5">
    <thead><tr>
     <td></td>
     <th>Normal Control</th>
     <th>Disabled Control</th>
     <th>Readonly Control</th>
    </tr></thead>
    <tbody>
     <tr><td valign="top" align="right">Text:</td><td><input type="text" name="text1" value="text input"></td><td><input disabled="disabled" type="text" name="text2" value="text input"></td><td><input readonly="readonly" type="text" name="text3" value="text input"></td></tr>
     <tr><td valign="top" align="right">Password:</td><td><input type="password" name="password1" value="hidden text"></td><td><input disabled="disabled" type="password" name="password2" value="hidden text"></td><td><input readonly="readonly" type="password" name="password3" value="hidden text"></td></tr>
     <tr><td valign="top" align="right">Checkbox:</td><td><input type="checkbox" name="check1" value="1"> <input type="checkbox" name="check1" checked="checked" value="2"> <input type="checkbox" name="check1" value="3"></td><td><input disabled="disabled" type="checkbox" name="check2" value="1"> <input disabled="disabled" type="checkbox" name="check2" checked="checked" value="2"> <input disabled="disabled" type="checkbox" name="check2" value="3"></td><td><input readonly="readonly" type="checkbox" name="check3" value="1"> <input readonly="readonly" type="checkbox" name="check3" checked="checked" value="2"> <input readonly="readonly" type="checkbox" name="check3" value="3"> !</td></tr>


D. Mahendran: HTML Forms

(22) Conclusions



2011-10-13 Web Architecture [./]
Fall 2011 — INFO 253 (CCN 42598)