Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
0% found this document useful (0 votes)
7 views

Lecture HTML Forms

Uploaded by

maithsp
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
7 views

Lecture HTML Forms

Uploaded by

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

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

You might also like