1. HTML
Forms
Internet Technology

2. HTML Form: Overview What is a HTML form? Why do we need it?
1/17/2019
HTML Form: Overview
What is a HTML form?
A mechanism to send user input to the web server
Why do we need it?
To collect data from the user
To create interactive & dynamic web content
How does it work?
HTTP client (i.e., web browser) sends the user input from HTML form to HTTP server (i.e., web server).
HTTP server passes the input to a program on the server.
The program (e.g. CGI script), processes the input and generates output (e.g., HTML).
HTTP server send the program output back to HTTP client.
Internet Technology

3. Static vs. Dynamic Web Content
1/17/2019
Static vs. Dynamic Web Content
Static Web Content
Dynamic Web Content
Client requests a web page
Server returns file
HTTP client
HTTP server
Server passes form input to CGI program
Client send form input to server (& requests a CGI program)
CGI Program
Server returns the CGI output
CGI program processes input, executes its tasks, & generates output (e.g., HTML)
HTTP client
HTTP server
Internet Technology

4. Dynamic/Interactive Web
1/17/2019
Dynamic/Interactive Web
4a. Server passes form input to CGI program 4b. CGI runs & generates output 4c. Server sends CGI output to the browser
3. Browser sends form input to server & requests a CGI program
1. User loads a webpage with a form in a Web browser
2. User fills out a form & hits “SUBMIT” button
5. Brower displays CGI output for the user to see
When CGI script “processes” the user input, it may to many things before generating output:
send s to people
put data in a file
puts data in a database
etc.
Example:
Internet Technology

5. 1/17/2019
HTML Form: Elements
HTML form is created using <form> </form> tags
All form elements are contained within <form> </form> tags
<form method=“get”> specifies how data will be passed to server
<form action=“CGI program”> specifies which CGI program will be run
Types of Form Element
Input Element
text, password, radio, checkbox, reset, submit
Textarea Element
multi-rowed text boxes
Select Element
scrollable, pop-up or pop-down menus
Tag Syntax
TYPE attribute specifies the type of element
Each input value should have a NAME attribute
Otherwise, CGI won’t know which input value is associated with which field
e.g., <input type=“text” name=“userID”>
Internet Technology

6. HTML Form: Input Elements
1/17/2019
HTML Form: Input Elements
Text Field
Defines a one-line input field that a user can enter text into
<form> First name: <input type="text" name="firstname“><br> Last name: <input type="text" name="lastname“> </form>
Password Field
Defines a password field that will be masked (data won’t display)
<form> Password: <input type=“password" name=“pw”> </form>
Radio Field
Defines a radio button, where user can make only one selection (from radio buttons with the same name)
VALUE attribute can be used to pass data specified by its value to the server
<form> <input type="radio" name="sex" value="male”> Male<br> <input type="radio" name="sex" value="female”> Female </form>
Internet Technology

7. HTML Form: Input Elements
1/17/2019
HTML Form: Input Elements
Checkbox Field
Defines a checkbox, where user can make multiple selections (from checkboxes with the same name)
<form> <input type="checkbox" name="vehicle" value="Bike”> I have a bike<br> <input type="checkbox" name="vehicle" value="Car”> I have a car  </form>
Submit Field
Defines a submit button that will send form data to server
VALUE attribute determines the text shown on the button
<form action=“username.cgi” method=“get”> Username: <input type="text" name="user”> <input type="submit" value="Submit”> </form>
Reset Field
Clears all form fields (usually used along with SUBMIT)
<input type="submit" value="Submit”> <input type=“reset" value=“Clear”>
Internet Technology

8. HTML Form: Other Elements
1/17/2019
HTML Form: Other Elements
Select Field
Creates a dropdown list, from which user can make selections <form> <select name="cars"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select>   </form>
Textarea Field
Creates a multi-line text input box
ROWS & COLS attributes determines the size of the text box
Text between <textarea> and </textarea> will show up in the box.
<textarea rows=“10” cols=“30”> The cat was playing in the garden. </textarea>
Example:
Internet Technology

9. Google Forms A free online form application by Google
A component of Google Docs
Enables the creation of online survey via web browser
Form can be ed to distribute the survey
The survey data is collected on the Google server
Automatically summarized and displayed using Google Charts API
Can be saved online (Google Docs) and downloaded in a spreadsheet.
Class Survey Example
Google Form
HTML (w/ CGI, Bootstrap, & Google Charts)
Internet Technology

10. HTML
HTML5
Internet Technology

11. HTML5: Overview Removed Added <!DOCTYPE html>
1/17/2019
HTML5: Overview
Year
Event By
1989
World Wide Web
Tim Berners Lee
1991
HTML 1 (basic tags)
1995
HTML 2 (forms support)
HTML Working Group
1997
HTML 3 (browser extensions)
W3C
1999
HTML 4 (frames)
2000
XHTML (strict HTML)
2008
HTML 5 draft
WHATWG
2014
HTML 5
<!DOCTYPE html>
<html lang=“kr”>
<head>
<meta charset=“utf-8”>
</head>
<body> ….
</body>
</html>
Added
Multimedia Support
Semantic Elements
Form
Types/Attributes
<audio>
<video>
<svg>
<canvas>
<header> <footer>
<article> <section>
Number
Date/Time
Range
min/max
Removed
Tags
Support
<center>
<font>
<strike>
Frames
Internet Technology

12. HTML5: Multimedia Audio Video
<audio  controls=“controls”>   <source  src=“song.mp3"  type=“audio/mpeg">
  <source  src=“song.ogg"  type=“audio/ogg">
Your browser does not support the video element. </video>
Video
<video  width=“600” controls=“controls”>   <source  src=“movie.mp4"  type=“video/mpeg">
  <source  src=“movie.ogg"  type=“video/ogg">
<track src=“movie_kr.vtt” kind=“subtitles” srclang=“kr” label=“Korean”>
<track src=“movie_en.vtt” kind=“subtitles” srclang=“en” label=“English”> Your browser does not support the video element. </video>
Example:
Internet Technology

13. HTML5: Semantic Elements
<header>
Introductory content for a document/section
<nav>
Navigation Links
<section>
Thematic grouping of content (e.g., chapters)
<article>
Independent, self-contained content (e.g., forum/blog/ post)
<aside>
Sidebar content
<footer>
Footer for a document/section
<figure>
Caption for an image
<img src=‘picture.jpg’>
<figcaption>Fig. 1 </figcaption>
</figure>
Why use Semantic Elements?
Easier for Web applications (e.g., search engines) to identify content
 For Semantic Web, Web 3.0
Internet Technology

14. HTML5: Form Input Types Number Date Time Color Range Email URL Search
Numeric input
Date
Date input  date picker
Time
Time input  time picker
Color
Color input  color picker
Range
Input range  slider control
address  automatic validation (checks
URL
URL address  automatic validation (checks for
Search
Search field  ‘X’ to clear input
Attributes
autocomplete
Autocomplete based on previous entry
min/max
Minimum/Maximum input value
multiple
Enable multiple input values
pattern
Specify a regular expression for input validation
Internet Technology