HTML: Basic Tags & Form Tags Web Programming
HTML: Syntax Tag starts with <, ends with > 9/30/2019 HTML: Syntax Tag starts with <, ends with > e.g., <html> Tags are not case sensitive e.g., <html> same as <HTML> Most tags enclose the marked up text e.g., <h1>This is a heading</h1> There are some that don’t need an end tag e.g., <p>, <br> Anchor tag is used to “link” documents <a href="http://kiyang.kmu.ac.kr/">Kiduk Yang’s Home Page</a> Blank lines and spaces ignored when interpreting HTML document Web Programming
HTML: A Basic Web Page <html> <head> 9/30/2019 HTML: A Basic Web Page <html> <head> <title>This is a web page</title> </head> <body> This text is displayed on the screen </body> </html> Web Programming
HTML: Basic tags Tags Attributes <p> - paragraph 9/30/2019 HTML: Basic tags Tags <p> - paragraph <b> - bold <i> - italics <h1>, <h2>,…<h6> - headers <a> - anchor <img> - image Many tags have ending tags </b>, </a>, </i>,</h1> Attributes Annotations to tags Provide more detail They can be mandatory <a href=“file.html”> <img src=“picture.gif> Or optional <body bgcolor=“red”> <tr width=“60” align=“right”> Web Programming
HTML Form: Overview What is a HTML form? Why do we need it? 9/30/2019 HTML Form: Overview What is a HTML form? A mechanism to send user input from HTTP client to HTTP server Why do we need it? Because HTTP is Stateless No history of transaction No way for client (user) to share information with server Workarounds HTTP Cookie Active Server Page (ASP), Java Servlet Common Gateway Interface (CGI) HTML Form delivers user input to HTTP server, which relays it to CGI program In other words, HTML form is one of the ways to create dynamic web content Web Programming
Static vs. Dynamic Web Content 9/30/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 Web Programming
Dynamic/Interactive Web 9/30/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. Web Programming
9/30/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”> Web Programming
HTML Form: Input Elements 9/30/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> Web Programming
HTML Form: Input Elements 9/30/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”> Web Programming
HTML Form: Other Elements 9/30/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 name=“comment” rows=“10” cols=“30”> The cat was playing in the garden. </textarea> Web Programming