Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Html basics


Published on

Html Lecture

Published in: Education

Html basics

  1. 1. HTML BasicsHTML Basics HTML, Text, Images, Tables, Forms Tahir Rashid HakeemTahir Rashid Hakeem
  2. 2. Table of Contents 1. Introduction to HTML  How the Web Works?  What is a Web Page?  My First HTML Page  Basic Tags: Hyperlinks, Images, Formatting  Headings and Paragraphs 1. HTML in Details  The <!DOCTYPE> Declaration  The <head> Section: Title, Meta, Script, Style 2
  3. 3. 3  HTML stands for Hyper Text Markup LanguageHTML stands for Hyper Text Markup Language  HTML is not a programming language, it is a markup languageHTML is not a programming language, it is a markup language  A Markup language is a set of markup tagsA Markup language is a set of markup tags  HTML uses markup tags to describe web pagesHTML uses markup tags to describe web pages HTMLHTML
  4. 4. 4 Versions of HTML  HTML 1.0  HTML 2.0  HTML 3.0  HTML 3.2  HTML 4.01  HTML 5.
  5. 5. 5  HTML 1.0 HTML 1.0 was the first release of HTML to the world. Not many people were involved in website creation at the time, and the language was very limiting.  HTML 2.0 HTML 2.0 included everything from the original 1.0 specifications but added a few new features HTML 2.0 was the standard for website design until January 1997 and defined many core HTML features for the first time.
  6. 6. 6  HTML 3.0 :- a HTML working group, led by a man named » Dave Raggett introduced a new HTML draft, HTML 3.0. It included many new and improved abilities for HTML, and promised far more powerful opportunities for webmasters to design their pages.  HTML 3.2 :- World Wide Web Consortium (abbreviated to the W3C) was founded in 1994 to standardise the language and keep it evolving in the right direction. Their first work was code-named WILBUR, and later became known as » HTML 3.2.
  7. 7. 7  HTML 4.0 was a large evolution of the HTML standards, HTML 4.0 was recommended by the W3C in December ’97 and became the official standard in April 1998. Browser support was undertaken surprisingly earnestly by Microsoft in their Internet Explorer browser,  HTML5 is designed for the web, both now and in the future. This is the specification that we will be working with for the next decade at least, so the process of its development is relatively slow and considered. Many parts will be familiar, but there’s also plenty of new elements, attributes and abilities to get excited about. 
  8. 8. How the Web Works?  WWW use classical client / server architecture  HTTP is text-based request-response protocol Client running aClient running a Web BrowserWeb Browser Server runningServer running Web ServerWeb Server Software (IIS,Software (IIS, Apache, etc.)Apache, etc.) HTTPHTTP HTTPHTTP
  9. 9. What is a Web Page? Web pages are text files containing HTML HTML – Hyper Text Markup Language  A notation for describing  document structure (semantic markup)  formatting (presentation markup)  Looks (looked?) like:  A Microsoft Word document The markup tags provide information about the page content structure 9
  10. 10. Creating HTML Pages An HTML file must have an .htm or .html file extension HTML files can be created with text editors:  NotePad, NotePad ++, PSPad Or HTML editors (WYSIWYG Editors):  Microsoft FrontPage  Macromedia Dreamweaver  Netscape Composer  Expression Web 10
  11. 11. HTML Structure  HTML is comprised of “elements” and “tags” Begins with <html> and ends with </html>  Elements (tags) are nested one inside another:  Tags have attributes:  HTML describes structure using two main sections: <head> and <body> 11 <html xmlns=""><html xmlns=""> <html> <head></head> <body></body> </html><html> <head></head> <body></body> </html> <img src="logo.jpg" alt="logo" /><img src="logo.jpg" alt="logo" />
  12. 12. HTML Code Formatting  The HTML source code should be formatted to increase readability and facilitate debugging.  Every block element should start on a new line.  Every nested (block) element should be indented.  Browsers ignore multiple whitespaces in the page source, so formatting is harmless.  For performance reasons, formatting can be sacrificed 12
  13. 13. First HTML Page 13 <!DOCTYPE HTML><!DOCTYPE HTML> <html><html> <head><head> <title>My First HTML Page</title><title>My First HTML Page</title> </head></head> <body><body> <p>This is some text...</p><p>This is some text...</p> </body></body> </html></html> test.htmltest.html
  14. 14. <!DOCTYPE HTML><!DOCTYPE HTML> <html><html> <head><head> <title>My First HTML Page</title><title>My First HTML Page</title> </head></head> <body><body> <p>This is some text...</p><p>This is some text...</p> </body></body> </html></html> First HTML Page: Tags 14 OpeningOpening tagtag Closing tagClosing tag An HTML element consists of an opening tag, a closing tagAn HTML element consists of an opening tag, a closing tag and the content inside.and the content inside.
  15. 15. <!DOCTYPE HTML><!DOCTYPE HTML> <html><html> <head><head> <title>My First HTML Page</title><title>My First HTML Page</title> </head></head> <body><body> <p>This is some text...</p><p>This is some text...</p> </body></body> </html></html> First HTML Page: Header 15 HTML headerHTML header
  16. 16. <!DOCTYPE HTML><!DOCTYPE HTML> <html><html> <head><head> <title>My First HTML Page</title><title>My First HTML Page</title> </head></head> <body><body> <p>This is some text...</p><p>This is some text...</p> </body></body> </html></html> First HTML Page: Body 16 HTML bodyHTML body
  17. 17. Some Simple Tags  Hyperlink Tags  Image Tags  Text formatting tags 17 <a href=""<a href="" title="Telerik">Link to Telerik Web site</a>title="Telerik">Link to Telerik Web site</a> <img src="logo.gif" alt="logo" /><img src="logo.gif" alt="logo" /> This text is <em>emphasized.</em>This text is <em>emphasized.</em> <br />new line<br /><br />new line<br /> This one is <strong>more emphasized.</strong>This one is <strong>more emphasized.</strong>
  18. 18. Some Simple Tags – Example 18 <!DOCTYPE HTML><!DOCTYPE HTML> <html><html> <head><head> <title><title>Simple Tags Demo</title>Simple Tags Demo</title> </head></head> <body><body> <a href="" title=<a href="" title= "Telerik site">This is a link.</a>"Telerik site">This is a link.</a> <br /><br /> <img src="logo.gif" alt="logo" /><img src="logo.gif" alt="logo" /> <br /><br /> <strong>Bold</strong> and <em>italic</em> text.<strong>Bold</strong> and <em>italic</em> text. </body></body> </html></html> some-tags.htmlsome-tags.html
  19. 19. Tags Attributes  Tags can have attributes  Attributes specify properties and behavior  Example:  Few attributes can apply to every element:  id, style, class, title  The id is unique in the document  Content of title attribute is displayed as hint when the element is hovered with the mouse  Some elements have obligatory attributes 19 <img src="logo.gif" alt="logo" /><img src="logo.gif" alt="logo" /> AttributeAttribute altalt with valuewith value ""logologo""
  20. 20. Headings and Paragraphs  Heading Tags (h1 – h6)  Paragraph Tags  Sections: div and span 20 <p>This is my first paragraph</p><p>This is my first paragraph</p> <p>This is my second paragraph</p><p>This is my second paragraph</p> <h1>Heading 1</h1><h1>Heading 1</h1> <h2>Sub heading 2</h2><h2>Sub heading 2</h2> <h3>Sub heading 3</h3><h3>Sub heading 3</h3> <div style="background: skyblue;"><div style="background: skyblue;"> This is a div</div>This is a div</div>
  21. 21. Headings and Paragraphs – Example 21 <!DOCTYPE HTML><!DOCTYPE HTML> <html><html> <head><title>Headings and paragraphs</title></head><head><title>Headings and paragraphs</title></head> <body><body> <h1>Heading 1</h1><h1>Heading 1</h1> <h2>Sub heading 2</h2><h2>Sub heading 2</h2> <h3>Sub heading 3</h3><h3>Sub heading 3</h3> <p>This is my first paragraph</p><p>This is my first paragraph</p> <p>This is my second paragraph</p><p>This is my second paragraph</p> <div style="background:skyblue"><div style="background:skyblue"> This is a div</div>This is a div</div> </body></body> </html></html>
  22. 22. The <head> Section  Contains information that doesn’t show directly on the viewable page  Starts after the <!doctype> declaration  Begins with <head> and ends with </head>  Contains mandatory single <title> tag  Can contain some other tags, e.g. <meta> <script> <style> <!–- comments --> 22
  23. 23. <head> Section: <title> tag  Title should be placed between <head> and </head> tags  Used to specify a title in the window title bar  Search engines and people rely on titles 23 <title>Telerik Academy – Winter Season 2009/2010<title>Telerik Academy – Winter Season 2009/2010 </title></title>
  24. 24. <head> Section: <meta>  Meta tags additionally describe the content contained within the page 24 <meta name="description" content="HTML tutorial" /><meta name="description" content="HTML tutorial" /> <meta name="keywords" content="html, web design,<meta name="keywords" content="html, web design, styles" />styles" /> <meta name="author" content="Chris Brewer" /><meta name="author" content="Chris Brewer" /> <meta http-equiv="refresh" content="5;<meta http-equiv="refresh" content="5; url=" />url=" />
  25. 25. <head> Section: <script>  The <script> element is used to embed scripts into an HTML document  Script are executed in the client's Web browser  Scripts can live in the <head> and in the <body> sections  Supported client-side scripting languages:  JavaScript (it is not Java!)  VBScript  JScript 25
  26. 26. The <script> Tag – Example 26 <!DOCTYPE HTML><!DOCTYPE HTML> <html><html> <head><head> <title>JavaScript Example</title><title>JavaScript Example</title> <script type="text/javascript"><script type="text/javascript"> function sayHello() {function sayHello() { document.write("<p>Hello World!</p>");document.write("<p>Hello World!</p>"); }} </script></script> </head></head> <body><body> <script type=<script type= "text/javascript">"text/javascript"> sayHello();sayHello(); </script></script> </body></body> </html></html> scripts-example.htmlscripts-example.html
  27. 27. Comments: <!-- --> Tag  Comments can exist anywhere between the <html></html> tags  Comments start with <!-- and end with --> 27 <!–- Telerik Logo (a JPG file) --><!–- Telerik Logo (a JPG file) --> <img src="logo.jpg" alt=“Telerik Logo"><img src="logo.jpg" alt=“Telerik Logo"> <!–- Hyperlink to the web site --><!–- Hyperlink to the web site --> <a href="">Telerik</a><a href="">Telerik</a> <!–- Show the news table --><!–- Show the news table --> <table class="newstable"><table class="newstable"> ......
  28. 28. <body> Section: Introduction  The <body> section describes the viewable portion of the page  Starts after the <head> </head> section  Begins with <body> and ends with </body> 28 <html><html> <head><title>Test page</title></head><head><title>Test page</title></head> <body><body> <!-- This is the Web page body --><!-- This is the Web page body --> </body></body> </html></html>
  29. 29. Text Formatting  Text formatting tags modify the text between the opening tag and the closing tag  Ex. <b>Hello</b> makes “Hello” bold 29
  30. 30. Text Formatting – Example 30 <html><html> <head><head> <title>Page Title</title><title>Page Title</title> </head></head> <body><body> <h1>Notice</h1><h1>Notice</h1> <p>This is a <em>sample</em> Web page.</p><p>This is a <em>sample</em> Web page.</p> <p><pre>Next paragraph:<p><pre>Next paragraph: preformatted.</pre></p>preformatted.</pre></p> <h2>More Info</h2><h2>More Info</h2> <p>Specifically, we’re using XHMTL 1.0 transitional.<br /><p>Specifically, we’re using XHMTL 1.0 transitional.<br /> Next line.</p>Next line.</p> </body></body> </html></html>
  31. 31. Hyperlinks: <a> Tag  Link to a document called form.html on the same server in the same directory:  Link to a document called parent.html on the same server in the parent directory:  Link to a document called cat.html on the same server in the subdirectory stuff: 31 <a href="form.html">Fill Our Form</a><a href="form.html">Fill Our Form</a> <a href="../parent.html">Parent</a><a href="../parent.html">Parent</a> <a href="stuff/cat.html">Catalog</a><a href="stuff/cat.html">Catalog</a>
  32. 32. Hyperlinks: <a> Tag (3)  Link to a document called apply-now.html On the same server, in same directory Using an image as a link button:  Link to a document called index.html On the same server, in the subdirectory english of the parent directory: 32 <a href="apply-now.html"><img<a href="apply-now.html"><img src="apply-now-button.jpg" /></a>src="apply-now-button.jpg" /></a> <a href="../english/index.html">Switch to<a href="../english/index.html">Switch to English version</a>English version</a>
  33. 33. Hyperlinks and Sections  Link to another location in the same document:  Link to a specific location in another document: 33 <a href="#section1">Go to Introduction</a><a href="#section1">Go to Introduction</a> ...... <h2 id="section1">Introduction</h2><h2 id="section1">Introduction</h2> <a href="chapter3.html#section3.1.1">Go to Section 3.1.1</a><a href="chapter3.html#section3.1.1">Go to Section 3.1.1</a> <!–- In chapter3.html --><!–- In chapter3.html --> ...... <div id="section3.1.1"><div id="section3.1.1"> <h3>3.1.1. Technical Background</h3><h3>3.1.1. Technical Background</h3> </div></div>
  34. 34. Hyperlinks – Example 34 <a href="form.html">Fill Our Form</a> <br /><a href="form.html">Fill Our Form</a> <br /> <a href="../parent.html">Parent</a> <br /><a href="../parent.html">Parent</a> <br /> <a href="stuff/cat.html">Catalog</a> <br /><a href="stuff/cat.html">Catalog</a> <br /> <a href="" target="_blank">BASD</a><a href="" target="_blank">BASD</a> <br /><br /> <a href="<a href=" Report">Please report bugs here (by e-mail only)</a>Report">Please report bugs here (by e-mail only)</a> <br /><br /> <a href="apply-now.html"><img src="apply-now-button.jpg”<a href="apply-now.html"><img src="apply-now-button.jpg” /></a> <br />/></a> <br /> <a href="../english/index.html">Switch to English<a href="../english/index.html">Switch to English version</a> <br />version</a> <br /> hyperlinks.htmlhyperlinks.html
  35. 35. Links to the Same Document – Example 35 <h1>Table of Contents</h1><h1>Table of Contents</h1> <p><a href="#section1">Introduction</a><br /><p><a href="#section1">Introduction</a><br /> <a href="#section2">Some background</A><br /><a href="#section2">Some background</A><br /> <a href="#section2.1">Project History</a><br /><a href="#section2.1">Project History</a><br /> ...the rest of the table of contents......the rest of the table of contents... <!-- The document text follows here --><!-- The document text follows here --> <h2 id="section1">Introduction</h2><h2 id="section1">Introduction</h2> ... Section 1 follows here ...... Section 1 follows here ... <h2 id="section2">Some background</h2><h2 id="section2">Some background</h2> ... Section 2 follows here ...... Section 2 follows here ... <h3 id="section2.1">Project History</h3><h3 id="section2.1">Project History</h3> ... Section 2.1 follows here ...... Section 2.1 follows here ... links-to-same-document.htmllinks-to-same-document.html
  36. 36.  Inserting an image withInserting an image with <img><img> tag:tag:  Image attributes:Image attributes:  Example:Example: Images:Images: <img><img> tagtag srcsrc Location of image fileLocation of image file (relative or absolute)(relative or absolute) altalt Substitute text for displaySubstitute text for display (e.g. in text mode)(e.g. in text mode) heightheight Number of pixels of the heightNumber of pixels of the height widthwidth Number of pixels of the widthNumber of pixels of the width borderborder Size of border, 0 for no borderSize of border, 0 for no border <img src="/img/basd-logo.png"><img src="/img/basd-logo.png"> <img src="./php.png" alt="PHP Logo" /><img src="./php.png" alt="PHP Logo" /> 36
  37. 37. Ordered Lists: <ol> TagOrdered Lists: <ol> Tag Create an OOrdered LList using <ol></ol>: Attribute values for type are 1, A, a, I, or i 37 a. Apple b. Orange c. Grapefruit 1. Apple 2. Orange 3. Grapefruit A. Apple B. Orange C. Grapefruit I. Apple II. Orange III. Grapefruit i. Apple ii. Orange iii. Grapefruit <ol type="1"><ol type="1"> <li>Apple</li><li>Apple</li> <li>Orange</li><li>Orange</li> <li>Grapefruit</li><li>Grapefruit</li> </ol></ol>
  38. 38. Unordered Lists: <ul> TagUnordered Lists: <ul> Tag  Create an UUnordered LList using <ul></ul>:  Attribute values for type are: disc, circle or square 38 • Apple • Orange • Pear o Apple o Orange o Pear  Apple  Orange  Pear <ul type="disk"><ul type="disk"> <li>Apple</li><li>Apple</li> <li>Orange</li><li>Orange</li> <li>Grapefruit</li><li>Grapefruit</li> </ul></ul>
  39. 39. Lists – ExampleLists – Example 39 <ol type="1"><ol type="1"> <li>Apple</li><li>Apple</li> <li>Orange</li><li>Orange</li> <li>Grapefruit</li><li>Grapefruit</li> </ol></ol> <ul type="disc"><ul type="disc"> <li>Apple</li><li>Apple</li> <li>Orange</li><li>Orange</li> <li>Grapefruit</li><li>Grapefruit</li> </ul></ul> <dl><dl> <dt>HTML</dt><dt>HTML</dt> <dd>A markup lang…</dd><dd>A markup lang…</dd> </dl></dl>
  40. 40. HTML Special CharactersHTML Special Characters ££&pound;&pound;British PoundBritish Pound €€€€EuroEuro ""&quot;&quot;Quotation MarkQuotation Mark ¥¥&yen;&yen;Japanese YenJapanese Yen ——&mdash;&mdash;Em DashEm Dash &nbsp;&nbsp;Non-breaking SpaceNon-breaking Space &&&amp;&amp;AmpersandAmpersand >>&gt;&gt;Greater ThanGreater Than <<&lt;&lt;Less ThanLess Than ™™&trade;&trade;Trademark SignTrademark Sign ®®&reg;&reg;Registered Trademark SignRegistered Trademark Sign ©©&copy;&copy;Copyright SignCopyright Sign SymbolSymbolHTML EntityHTML EntitySymbol NameSymbol Name 40
  41. 41. Special Characters – ExampleSpecial Characters – Example 41 <p>[&gt;&gt;&nbsp;&nbsp;Welcome<p>[&gt;&gt;&nbsp;&nbsp;Welcome &nbsp;&nbsp;&lt;&lt;]</p>&nbsp;&nbsp;&lt;&lt;]</p> <p>►I have following cards:<p>►I have following cards: A♣, K♦ and 9♥.</p>A♣, K♦ and 9♥.</p> <p>►I prefer hard rock ♫<p>►I prefer hard rock ♫ music ♫</p>music ♫</p> <p>&copy; 2006 by Svetlin Nakov &amp; his<p>&copy; 2006 by Svetlin Nakov &amp; his team</p>team</p> <p>Telerik Academy™</p><p>Telerik Academy™</p>
  42. 42. Block and Inline ElementsBlock and Inline Elements  Block elements add a line break before and after them, and expand to 100% width  <div>, <p>, <h1>, <ul> are block elements  Inline elements don’t break the text before and after them  <span>, <a>, <em> are inline elements  42
  43. 43. The <div> TagThe <div> Tag  <div> creates logical divisions within a page  Block style element  Used with CSS  Example: 43 <div style="font-size:24px; color:red">DIV<div style="font-size:24px; color:red">DIV example</div>example</div> <p>This one is <span style="color:red; font-<p>This one is <span style="color:red; font- weight:bold">only a test</span>.</p>weight:bold">only a test</span>.</p> div-and-span.htmldiv-and-span.html
  44. 44. Tables  Tables provide a means of organising the layout of data  A table is divided into rows and columns: these specify the cells of the table  Cells can contain text, images, links, other tables...  Tables can also be used for organising the layout of the web page itself.
  45. 45. 45 Tables  <table> main element  <tr> table row  <th> table header  <td> table data <table border="1"> <tr> <th>Name</th> <th>Course</th> <th>Year</th> </tr> <tr> <td>A B Morgan</td> <td>Fishing</td> <td>5</td> </tr> <tr> <td>D P Jones</td> <td>Sailing</td> <td>8</td> </tr> <tr> </table>
  46. 46. 46 Tables  <table> main element  <tr> table row  <th> table header  <td> table data <table border="1"> <tr> <th>Name</th> <td>A B Morgan</td> <td>D P Jones</td> </tr> <tr> <th>Course</th> <td>Fishing</td> <td>Sailing</td> </tr> <tr> <th>Year</th> <td>8</td> <td>5</td> </tr> <tr> </table>
  47. 47. 47 Rows and Columns  Cells can span multiple columns and multiple rows with the colspan and rowspan attributes <table border="1"> <tr> <th colspan="2">Name</th> <th>Course</th> <th>Year</th> </tr> <tr> <td>A B</td> <td>Morgan</td> <td rowspan="2">Fishing</td> <td>5</td> </tr> <tr> <td>D J</td> <td>Jones</td> <td>Sailing</td> <td>8</td> </tr> <tr> </table>
  48. 48. 48 The align and width attributes  The align attribute determines the position of the text within a cell  The width attribute determines the width of the row relative to the table <table border="1" align="center"> <tr> <th colspan="2" width="60%">Name</th> <th rowspan="2">Course</th> <th rowspan="2">Year</th> </tr> <tr> <th>Last</th> <th>Init.</th> </tr> <tr> <td>Morgan</td> <td>AB</td> <td>Fishing</td> <td align="center">5</td> </tr> <!– etc -->
  49. 49. Table attributes Table attributes  align alignment relative to the page  width in pixels or percentage of page width  border - width of border (pixels)  cellspacing separation between cells (pixels)  cellpadding - space around data inside cell (pixels)  bgcolor - background colour (inside cells) Furthermore • The <caption> element puts a title above the table
  50. 50. Table attributes <table border="3" align="center" cellspacing="6" cellpadding="6" bgcolor="cyan"> <caption> <h2>Course Data</h2> </caption> <tr> <th>Name</th> <th>Course</th> <th>Year</th> </tr> <tr> <td>A B Morgan</td> <td>Fishing</td> <td>5</td> </tr> <!– etc -->
  51. 51. Page formatting </body> <table border="0" cellspacing="10"> <tr> <td> <img src="cat.gif" alt="cat"> <ul> <li>cats</li> <li>dogs</li> <li>butterflies</li> </ul> </td> <td> This piece of text illustrates the idea of placing two columns of information in a web page... Note also that there is no border in this table. </td> </tr> </table> </body> • Tables can be used to organise the layout of the web page itself
  52. 52. Frames and Framesets  A frameset partitions a web browser window so that multiple web documents can be displayed simultaneously.  Example application: To maintain a permanently visible directory of links within your site, while also displaying one or more selected documents from the site.  otherwise the directory of links must appear on every page, and this scrolls up with the page  Note: framesets can cause problems for bookmarking and for "screen readers" (for visually-impaired users)
  53. 53. 53 Framesets  The frameset element replaces the body element  frameset has attributes cols or rows, defined in terms of pixels, percentage(%) or unspecified (*)  this splits the window into two or more columns or rows <html> <head><title>Frames 1</title></head> <frameset cols="140,*"> <frame name="navF" src="navigation.html"> <frame name="mainF" src="intro.html"> </frameset> </html>
  54. 54. 54 Frame attributes  The name attribute uniquely identifies the frame. It may be used as the target in an anchor (<a>) element  The src attribute specifies the web page to be placed in the frame initially (it may subsequently be overwritten)  The scrolling attribute ("auto", "yes", "no") specifies whether the frame is to have scroll bars  The frameborder attribute ("0", "1") specifies whether the frame is to have a border <frameset cols="140,*"> <frame name="navF" src="navigation.html"> <frame name="mainF" src="intro.html"> </frameset>
  55. 55. Nested framesets <html> <head><title>Frames 2</title></head> <frameset cols="140,*"> <frame name="navF" src="navigation.html"> <frameset rows="30%,70%"> <frame name="upperF" src="intro.html"> <frame name="lowerF" src="course.html"> </frameset> </frameset> </html>
  56. 56. Noframes <html> <head><title>Frames 1</title></head> <frameset cols="140,*"> <frame name="navF" src="navigation.html"> <frame name="mainF" src="intro.html"> </frameset> <noframes> <body> Something here for browsers not supporting frames </body> </noframes> </html> • Some browsers cannot process frames. Alternative content should be provided using the noframes element
  57. 57. Forms  Forms are user interfaces for data input  Main application: to provide user input for  programs and databases located on a web server  local (client-side) scripts associated with the form  Server-based programs may return data to the client as a web page  Client-side scripts can read input data  To validate the data, prior to sending to server  To use in local processing which may output web page content that is displayed on the client
  58. 58. Input types • text • checkbox • radio (buttons) • select (options) • textarea • password • button • submit • reset • hidden • file • image
  59. 59. The method and action attributes <body> <form method="POST" action=""> <h2>Tell us what you think</h2> <!-- etc --> </form> </body> • The method attribute specifies the way that form data is sent to the server program – GET appends the data to the URL – POST sends the data separately • The action attribute specifies a server program (e.g. a perl program .pl extension) that processes the form data • Can also send an email: action=“mailto:D.P.Cosker@..”
  60. 60. The input element: type="text" <form method="POST" action=""> <h2>Tell us what you think</h2> Name <input name="name" type="text" size="20"><br> Address <input name="address" type="text" size="30"> </form> • The type attribute specifies the type of user input • The name attribute gives an identifier to the input data • The size attribute specifies the length of the input field • The value attribute specifies an initial value for the text (optional)
  61. 61. The input element: type="checkbox" How did you hear about this web site?<br> A friend <input type="checkbox" name="howdid" value="friend"><br> Search engine <input type="checkbox" name="howdid" value="engine"><br> <!– etc --> • The name attribute is used to define a set of checkboxes • The value attribute identifies the individual checkbox • If the checked attribute is set the box is initially checked
  62. 62. The input element: type="radio" • Radio buttons are similar to checkboxes, but only one can be selected • To select a button by default, use the checked attribute (for one button only) How did you hear about this web site?<br> A friend <input type="radio" name="howdid" value="friend"><br> Search engine <input type="radio" name="howdid" value="engine"><br> <!– etc -->
  63. 63. The input element: type="button" Do you want to receive any further information:<br> <input type="button" name="yes" value=" Yes "> <input type="button" name="no" value=" No "><br> • The name attribute uniquely identifies a button • The value attribute gives a label to the button • Actions can be associated with buttons- more later
  64. 64. The input element: type="submit/reset" Thank you<br> <input type="submit" name="send" value="Send"> <input type="reset" name="clear" value="Clear"><br> • type="submit" – clicking this button sends the form data to the program (URL) specified in the action attribute of the form • type="reset" – clicking this button clears all data entered so far
  65. 65. The input element: type="password/file/hidden" • type="password" – similar to type="text" except that the input is echoed with asterisks (so not visible) • type="file" – provides a file dialogue box to specify a file that is sent to the server • type="hidden" – similar to text input, but the value attribute is used to specify data that is to be sent to the server. Nothing appears on the screen. – The data might be set by a server program to keep track of the details of a particular transaction.
  66. 66. The textarea element • Used for multi-line text input • The size of the input area is specified with the cols and rows attributes • Any text placed inside the element appears in the input area (this can be deleted). Please write your comments:<br> <textarea name="comments" rows="5" cols="20"> put text here </textarea>
  67. 67. The select element How do you rate this site?<br> <select name="rating"> <option>Good <option selected>Bad <option>Ugly </select> • The select element provides a menu of options • An option can be selected by default using the selected attribute (otherwise the first in the list is initially selected)