HTML Forms Internet Technology

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

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

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 emails to people put data in a file puts data in a database etc. Example: http://widit.knu.ac.kr/~kiyang/share/form.htm Internet Technology

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

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

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

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: http://widit.knu.ac.kr/~kiyang/share/form.htm Internet Technology

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 emailed 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

HTML HTML5 Internet Technology

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

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: http://widit2.knu.ac.kr/~kiyang/share/html/media.htm Internet Technology

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

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 Email Email address  automatic validation (checks for @) URL URL address  automatic validation (checks for http://) 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