Introduction to Coding and
web design
Lecture 3
Objectives
Use HTML5 to create forms which have several form elements
Textbox
Textarea
Dropdown menu
Buttons
Server-side processing
Overview of Forms
Forms are used all over the Web to
Accept information
Provide interactivity
Types of forms:
Search form, Order form, Newsletter sign-up form, Survey
form, Add to Cart form, and so on…
3
Overview of Forms (2)
Form
An HTML element that
contains and organizes
form controls such as
text boxes,
check boxes,
and buttons
that can accept information from website
visitors.
4
Two Components of Using Forms
1. The HTML form
the web page user interface
and
2. The server-side processing
Server-side processing works with the form data and
sends e-mail, writes to a text file, updates a database, or
performs some other type of processing on the server.
5
Example: Form
Text Box
Drop-down Menu
Radio Buttons
Checkboxes
Text Area
Reset Button
Submit Button
HTML Using Forms
<form>
Contains the form elements on a web page
Container tag
<input>
Configures a variety of form elements including
text boxes, radio buttons, check boxes, and buttons
Stand alone tag
<textarea>
Configures a scrolling text box
Container tag
<select>
Configures a select box (drop down list)
Container tag
<option>
Configures an option in the select box
Container tag
7
Sample Form HTML
<form>
E-mail: <input type="text" name ="email" id="email"><br>
<input type="submit” value=“Sign Me Up!”>
<input type=“reset” value=“Reset”>
</form>
8
HTML form element
The form element attributes:
◦ action
Specifies the server-side program or script that will process your form
data
◦ method
get – default value,
form data passed in URL
post – more secure,
form data passed in HTTP Entity Body
◦ name
Identifies the form
◦ id
Identifies the form
9
Label element
<label></label>
Associates a text label with a form control
Two Different Formats:
<label>Email: <input type="text" name=“email" id ="email"></label>
Or
<label for="email">Email: </label>
<input type="text" name="CustEmail" id= "email">
10
<input>
Input Text box
Accepts text information
Attributes:
◦ type=“text”
◦ name
◦ id
◦ size
◦ maxlength
◦ value
11
Creating Larger Text Areas
To create larger text areas, type <TEXTAREA NAME=“name” ROWS=n1 COLS=n2
WRAP> Default Text </TEXTAREA>, where n1 is the height of the text box in rows and
n2 is the width of the text box in characters
The WRAP attribute causes the cursor to move automatically to the next line as the user
types
Attributes:
name
id
cols
rows
Example: Text Area
<B>Comments?</B>
<BR>
<TEXTAREA NAME="Comments" ROWS=10
COLS=50 WRAP>
</TEXTAREA>
Creating Radio Buttons
To create a radio button, type <INPUT TYPE=“radio” NAME=“name”
VALUE=“data”>Label, where “data” is the text that will be sent to the server if the button is
checked and “Label” is the text that identifies the button to the user
Attributes:
◦ type=“radio”
◦ name
◦ id
◦ checked
◦ value
Example: Radio Buttons
<B> Size: </B>
<INPUT TYPE="radio" NAME="Size"
VALUE="Large">Large
<INPUT TYPE="radio" NAME="Size"
VALUE="Medium">Medium
<INPUT TYPE="radio" NAME="Size"
VALUE="Small">Small
Creating Checkboxes
To create a checkbox, type <INPUT TYPE=“checkbox” NAME=“name”
VALUE=“value”>Label
If you give a group of radio buttons or checkboxes the same name, the user will only be
able to select one button or box at a time
Attributes:
◦ type=“checkbox”
◦ name
◦ id
◦ checked
◦ value
Example: Checkboxes
<B> Color: </B>
<INPUT TYPE="checkbox" NAME="Color"
VALUE="Red">Red
<INPUT TYPE="checkbox" NAME="Color"
VALUE="Navy">Navy
<INPUT TYPE="checkbox" NAME="Color"
VALUE="Black">Black
Creating Drop-down Menus
To create a drop-down menu, type <SELECT NAME=“name” SIZE=n MULTIPLE>
Then type <OPTION VALUE= “value”>Label
In this case the SIZE attribute specifies the height of the menu in lines and MULTIPLE
allows users to select more than one menu option
Attributes:
◦ name
◦ id
◦ size
◦ multiple
Example: Drop-down Menu
<B>WHICH IS FAVOURITE FRUIT:</B>
<SELECT name=“fruits” multiple>
<OPTION VALUE="MANGOES">MANGOES
<OPTION VALUE="PAPAYA">PAPAYA
<OPTION VALUE="GUAVA">GUAVA
<OPTION VALUE="BANANA"> BANANA
<OPTION VALUE="PINEAPPLE">PINEAPPLE
</SELECT>
Creating a Submit Button
To create a submit button, type <INPUT TYPE=“submit”>
If you would like the button to say something other than submit, use the VALUE attribute
For example, <INPUT TYPE=“submit” VALUE=“Buy Now!”> would create a button that
says “Buy Now!”
Creating a Reset Button
To create a reset button, type <INPUT TYPE=“reset”>
The VALUE attribute can be used in the same way to change the text that appears on the
button
22
Hands-On Practice
input Password box
<input>
Accepts text information that needs to be hidden as it is entered
Attributes:
◦ type=“password”
◦ name
◦ id
◦ size
◦ maxlength
◦ value
23
Server-Side
Processing
Your web browser requests web pages and their
related files from a web server.
The web server locates the files and sends them to
your web browser.
The web browser then renders the returned files
and displays the requested web pages for you to
use.
24
Server-Side Scripting
One of many technologies in which a server-side script is embedded
within a Web page document saved with a file extension such as:
◦ .php (PHP)
◦ .asp (Active Server Pages)
◦ .cfm (Adobe ColdFusion)
◦ .jsp (Sun JavaServer Pages)
◦ .aspx (ASP.Net).
Uses direct execution — the script is run either
by the web server itself or by an extension
module to the web server.
25
Steps in Utilizing Server-Side Processing
1. Web page invokes server-side processing
by a form or hyperlink.
2. Web server executes a server-side script.
3. Server-side script accesses requested
database, file, or process.
4. Web server returns web page with requested
information or confirmation of action.
26
Common Uses of
Server-Side Scripting
Search a database
Place an order at an online store
Send a web page to a friend
Subscribe to a newsletter
27
Exercise
Design survey page for the book/sports pages you have
developed. Ask the visitors to either leave a feedback
about the pages or about the sport/book.
28
