HTML Basic Tags Form Tags Web Programming 1
HTML: Basic Tags & Form Tags Web Programming 1
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. , <h 1>This is a heading</h 1> ► There are some that don’t need an end tag • e. g. , <p>, ► Anchor tag is used to “link” documents • <a href="http: //kiyang. knu. ac. kr/">Kiduk Yang’s Home Page</a> ► Blank lines and spaces ignored when interpreting HTML document Web Programming 2
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 3
HTML: Basic tags n Tags ► ► ► ► <p> - paragraph <b> - bold <i> - italics <h 1>, <h 2>, …<h 6> - headings <a> - anchor <img> - image Many tags have ending tags • </b>, </a>, </i>, </h 1> n 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 4
HTML Form: Overview n What is a HTML form? ► n 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) à n 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 5
Static vs. Dynamic Web Content n Static Web Content Client requests a web page Server returns file HTTP client n HTTP server Dynamic Web Content Server passes form input to CGI program Client send form input to server & requests a CGI program CGI Program Server returns the CGI output HTTP client HTTP server CGI program processes input, executes its tasks, & generates output (e. g. , HTML) Web Programming 6
Dynamic/Interactive Web 4 a. Server passes form input to CGI program 4 b. CGI runs & generates output 4 c. Server sends CGI output to the browser 1. User loads a webpage with a form in a Web browser 5. Brower displays CGI output for the user to see 3. Browser sends form input to server & requests a CGI program 2. User fills out a form & hits “SUBMIT” button • 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 7
HTML Form: Elements n HTML form is created using <form> </form> tags ► ► ► n Types of Form Element ► ► ► n 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 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=“user. ID”> Web Programming 8
HTML Form: Input Elements n Text Field ► Defines a one-line input field that a user can enter text into <form> First name: <input type="text" name="firstname“> Last name: <input type="text" name="lastname“> </form> n Password Field ► Defines a password field that will be masked (data won’t display) <form> Password: <input type=“password" name=“pw”> </form> n 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 <input type="radio" name="sex" value="female”> Female </form> Web Programming 9
HTML Form: Input Elements n 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 <input type="checkbox" name="vehicle" value="Car”> I have a car </form> n 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> n Reset Field ► Clears all form fields (usually used along with SUBMIT) <input type="submit" value="Submit”> <input type=“reset" value=“Clear”> Web Programming 10
HTML Form: Other Elements n 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> n 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 11
- Slides: 11