Website: HTML5.doc - ZhaochengLi/Zhaocheng-s GitHub Wiki

HTML: Hypertext Markup Language

Overview:

Creating a Simple Page

  1. How to write comments? Try using:

     <!-- comments -->

  2. Introducing HTML elements

     <element name> Content Here </element name>

  3. Basic document structure

    • A document type declaration (also called DOCTYPE declaration) that identifies this document as an HTML5 document. We need to put it as the first line of program.

        <!DOCTYPE html>

    • the entire document is contained within an html element. This element is called the root element because it contains all the elements in the document.

    • Within the html element, the document is divided into a head and a body

    • the meta elements within the head element provide information about the document itself. It can be used to provide all sorts of information, but in this case, it specifies the character encoding.

        <meta charset="utf-8">

    • Also it is mandatory in the head to have title element.

    • the body element contains everything that we want to show up in the browser window.

        <!DOCTYPE html>
  <html>
  
  <head>
      <meta charset="htf-8">
      <title> Title here </title>
  </head>

      <body>
          Page content here
      </body>

  </html>

    • Block and inline elements. It is worth pointing out that the heading and paragraph elements start on new lines and do not run together as they did before. That is bacause by default, headings and paragraphs display as block elements.

    • Add an image using img element.

        <img src="bird.jpg" alt="bird photo">

Marking Up Text

  1. Paragraphs

     <p> it is a paragraph </p>

  2. Headings

     <h1> ... </h1>
 <h2> ... </h2>
 <h3> ... </h3>
 <h4> ... </h4>
 <h5> ... </h5>
 <h6> ... </h6>

  3. A horizontal rule, if you want to indicate that one topic or thought has completed and another one is beginning you can insert what is called in HTML5 a "paragraph-level thematic break" using the hr element.

     <hr> // this will be a line-breaker~~~~

  4. Heading Groups, it is common for headlines to have clarifying subheads or tagline. hgroup element indentifies a stack of headings as a "group". Browsers that support hgroup know to count only the "highest-ranked" heading in the outline and ignore the rest.

     <hgroup>
     <h1>A big heading<h1>
     <h2>Sub-heading<h2>
 </hgroup>

  5. Lists

    • Unordered Lists, we can take that same unordered list markup and radically change its appearance by applying different style sheets.

        <ul>
      <li><a href="">Spurs</a></li>
      <li><a href="">Lakers</a></li>
      <li><a href="">Celtics</a></li>
      <li><a href="">Rockets</a></li>
  </ul>

    • Ordered Lists, if you do not want a numeberred list to start ar 1, you can use start element.

        <ol start="13">
      <li>happy new year</li>
      <li>happy christmas</li>
      <li>happy halloween</li>
  </ol>

    • Description Lists, it is used for any type of name/value pairs, such as terms and their definitions, questions, and answers, or other types of terms and their associated information.

        <dl> ... </dl> // A description list
  <dt> ... </dt> // A name, such as a term or label
  <dd> ... </dd> // A value, such as a descripttion or fefinition.

  <dl>
      <dt>Central Theorem</dt>
      <dd>The definition if it</dd>

      <dt>Left Theorem</dt>
      <dd>The definition if it</dd>

      <dt>Right Theorem</dt>
      <dd>The definition if it</dd>
  </dl>

  6. More Content Elements

    • Long quotations

        <blackquote>
      <p>This is a long night, and the victory is surely worth fighting for.</p>
  </blackquote>

    • Preformatted Text. pre element is an unique element in that it is displayed exactly as it is typed -- including all the carriage returns and multiple character spaces. It is also displayed in a constant-width font(monospace) by default.

        <pre>
  This is an       big space and it keeps in pre element!
             or the reutrn
  </pre>

    • Figures. The figure element is used for content that illustrate or supports some point in the text. A figure may contain an image, a video, a code snippet, text, or even a table -- pretty much anything that can go in the flow of web content -- and should be treated and referenced as a self-contained unit.

        <figure>
      <img src="piechart.png" alt="chart">
  </figure>

  // a caption can also be contained
  <figure>
      <pre><code> 
      body {
          background-color: #000;
          color: red; }
      </code></pre>
      <figcaption>
          Sample CSS rule.
      </figcaption>
  </figure>

  7. Organizing Page Content

    • Sections and articles. Long documents are easier to use when they are divided into smaller parts. To divide long web documents into sematicssections, use the aptly named section element. Sections typically have a heading (inside the section element) and any other content that has a meaningful reason to be grouped together. The section element has a broad range of uses, for example, a document with information about typography resources has been divided into two sections based on resource type.

        <section>
      <h2>Typography Books</h2>
      <ul>
          <li> ... </li>
      </ul>
  </section>

  <section>
      <h2>Online Tutorials</h2>
      <p>These are the best tutorials on the web.</p> 
      <ul>
          <li>...</li>
      </ul>
  </section>

    • use the article element for self-contained works that could stand or be reused in a different context. It is useful for magazine or newspaper articles, blog posts, comments, or other items that could be extracted for external use. You can think of it as a specialized section element that answers the question "Could this appear on another site and make sense" with "yes".

        <article>
      <h1>Get to Know Helvetica</h1> 
      <section>
          <h2>History of Helvetica</h2>
          <p>...</p>
      </section>

      <section>
          <h2>Helvetica Today</h2> 
          <p>...</p>
      </section>
  </article>

    • conversely a section in a web document might be comprised of a number of articles. The section and article elements are easily confused, particularly because it is possible to nest one in the other and vice versa. Key in mind that is the content is self-contained and could appear outside the current context, it is best marked up as an article.

    • Aside(sidebars), the aside element identifies conetnt that is related but tangential to the surrounding content. It is a sematics meaning

        <p>We now have a number of methods for using beautiful fonts on web pages...</p>
  <aside>
      <h2>Web Font Resources</h2>
      <ul>
          <li><a href="http://typekit.com/">Typekit</a></li>
          <li><a href="http://www.google.com/webfonts">Google Fonts</a></li> 
      </ul>
  </aside>

    • Navigation. The new nav element gives developers a semantic way to identify navigation for a site.

        <nav>
  <ul>
      <li><a href="">Serif</a>/li> <li><a href="">Sans-serif</a></li> 
      <li><a href="">Script</a></li> <li><a href="">Display</a></li> 
      <li><a href="">Dingbats</a>/li>
  </ul>
  </nav>

    • Headers and Footers. The header element is used for introductory material that typically appears at the beginning od a web page or at the top of a section or article; The footer element is used to indicate the type of information that typically comes at the end of a page or an article, such as its author, copyright information, related documents, or navigation.

        <article>
      <header>
          <h1>More about WOFF</h1>
          <p>by Jennifer Robbins, <time datetime="11-11-2011" pubdate>November 11, 2011</time></p>
      </header>
      <p>...article content starts here...</p> 
      <footer>
          <p><small>Copyright &copy;2012 Jennifer Robbins.</small></p> 
          <nav>
          <ul>
              <li><a href="">Previous</a></li>
              <li><a href="">Next</a></li> </ul>
          </nav>
      </footer>
  </article>

    • Addresses. It is used to create an area for contact information for the author or maintainer of the document. It is generally placed at the end of document or in a section or article within a document. An address would be right at home in a footer element.

        <address>
  Contributed by <a href="../authors/robbins/">Jennifer Robbins</a>, <a href="http://www.oreilly.com/">O'Reilly Media</a>
  </address>

  8. The Inline Element Roundup

    Element Description
    a An anchor or hypertext link
    abbr Abbreviation
    b Added visual attention, such as keywords(bold)
    bdi Indicates text that may have directional requirements
    bdo Bidirectional override; explicitly indicates text direction (left to right, ltr, or right to left, rtl)
    br Line break
    cite Citation, a reference to the title of a work, such as a book title
    code Computer code sample
    data Machine-readable equivalent dates, time, weights, and other measurable values
    del Deleted text; indicates an edit made to a document
    dfn The defining instance or first occurrence of a term
    em Emphasized text
    i Alternative voice (italic)
    ins Inserted text; indicates an insertion in a document
    kbd Keyboard; text entered by a user (for technical documents)
    mark Contextually relevant text (highlighted text)
    q Short, inline quotation
    ruby, rt, rp Provides annotations or pronumciation guides under East Asian typography and ideographs
    s Incorrect text (strike-through)
    small Small print, such as a copyright or legal notice (displayed in a smaller type size)
    samp Sample output from programs
    strong Content of strong importance
    span Generic phrase content
    sub Subscript
    sup Superscript
    time Machine-readable time data
    u Underlined
    var A variable or program argument (for technical documents)
    wbr word break

    • Examples

        1. <p>When checking out of the hotel, <strong>drop the keys in the red box by the front desk</strong>.</p>
  // strong indicates that a word or phrase as important

  2. // the abbr element provides useful information for search engines, screen renders, and other devices.
  // the title attribute provides the long version of the shortened term
  <abbr title="Points">pts</abbr>

  3. // when we enter "noon on Nov. 4th", we know it is a time, but it is not clear for the computer. the time element allows us to mark up dates and times in a way that is comfortable for a human to read but also encoded in a standardized way that computers can use. 
  // the attribute "datetime" specifies the date and/or time information in standardized time format. We also specify attribute "pubdate" for indicating that the time is the publication date of a document.
  // the format: YYYY-MM-DDT hh:mm:ss +-HH:MM. The last part is time zone.
  Written by Jennifer Robbins (<time datetime="2012-09-01T 20:00-05:00" pubdate>September 1, 2012, 8pm EST</time>)

  4. // <data> is for helping computers make sense of content, which can be used for all sorts of data, including dates, times, measurements, weights, and so on. It usesthe value attribute for the machine-readable information.
  <data value="12">Twelve</data>
  <data value="2011-11-12">Last Saturday</data>

  5. // Both "ins" and "del" elements are used to mark up edits indicating parts of a document that have been inserted or deleted.
  <del title="retired">Bob Brown</del>
  <ins>Timothy Henry</ins>

  6. // the word break <wbr> elements lets you mark the place where a word should break if it needs to (a "line break opportunity" accirding to the spec). It takes some of the guesswork away from the browser and allows authors to specify the best spot for the world to be split over two lines. 
  // Keep in mind that the word breaks at the wbr element only if it needs to. If there is enough room, the word stays one piece.
  <em>supercali<wbr>fragilistic<wbr>expialidocious</em>!</p>

  9. Generic Elements (div and span): what if none of the elements we've talked about so far accurately describes your content?

    • the div element indicates a division of content, and span indicates a word or phrase for which no text-level element currently exists. They are given meaning and context with the id and class attributes.

    • the have no inherent presentation qualities for their own, but you can use style sheets to format them however you like. In fact, generic elements are a primary tool in standards-based web design because they enable authors to accurately describe content and offer plenty of "hooks" for adding style rule. They also allow elements on the page to be accessed and manipulated by JS.

    • a span offers the same benefits as the div, except it is used for phrase elements and does not introduce line breaks. Because spans are inline elements, they can only contain text and other inline elements (in other words, you cannot put headings, lists, content-grouping elements, and so on, in a span). When you classified multiple elements as the same class using spans, you give them the same meaning throughout the site and you can apply the same style on them.

        <ul>
      <li>John: <span class="tel">999.8282</span></li> 
      <li>Paul: <span class="tel">888.4889</span></li> 
  </ul>

  <div class="listing">
      <img src="felici-cover.gif" alt="">
      <p><cite>The Complete Manual of Typography</cite>, James Felici</p> 
      <p>A combination of type history and examples of good and bad type design.</p>
  </div>

  <div id="news">
      <h1>New This Week</h1>
      <p>We've been working on...</p> 
      <p>And last but not least,... </p>
  </div>

    • id and class attributes. They have different purposes.

      • the id attributes is used to assign a unique identifier to an element in the document. This makes it useful for assigning a name to particular element, as though it were a piece of data.
      • id and class are not just for div and span, also lists, section, etc.
      • the class attribute classifies elements into conceptual groups; therefore, unlike the id element, multiple elements may share a class name. By making elements part of the same class, you can apply styles to all of the labeled elements at once with a single style rule or manipulate them all with a script.

    • examples

        <div id="ISBN0321127307">
      <img src="felici-cover.gif" alt="">
      <p><cite>The Complete Manual of Typography</cite>, James Felici</p> 
      <p>A combination of type history and examples of good and bad type. </p>
  </div>
  
  <div id="ISBN0881792063">
      <img src="bringhurst-cover.gif" alt="">
      <p><cite>The Elements of Typographic Style</cite>, Robert Bringhurst </p>
      <p>This lovely, well-written book is concerned foremost with creating beautiful typography.</p> 
  </div>

  <ol id="directions"> 
      <li>...</li> 
      <li>...</li> 
      <li>...</li>
  </ol>

  <div id="ISBN0321127307" class="listing book">
      <img src="felici-cover.gif" alt="CMT cover">
      <p><cite>The Complete Manual of Typography</cite>, James Felici</p> 
      <p class="description">A combination of type history and examples of good and bad type.</p> 
  </div>

  <div id="ISBN0881792063" class="listing book">
      <img src="bringhurst-cover.gif" alt="ETS cover">
      <p><cite>The Elements of Typographic Style</cite>, Robert Bringhurst </p>
      <p class="description">This lovely, well-written book is concerned foremost with creating beautiful typography.</p>
  </div>

  10. Some Special Characters; there are two ways of referring to a specific character: by an assigned numeric value or using a predefined abbreviated name for the character. All character references begin with an "&" and end with a ";"

Adding Links

<a>...</a> // Anchor element (hypertext link)
// Examples, use href to provide URL link of the target page   
<a href="http://www.oreilly.com">Go to the O'Reilly Media site</a>
// to make an image a link, use img element
<a href="http://www.oreilly.com"><img src="orm.gif" alt="O'Reilly tarsier logo"></a>

  1. the href attribute

    • Absolute URLs provide the full URL for the document, including the protocol (http://), the domain name, and the pathname as necessary. You need to use an absolute URL when pointing to a document out on the Web (i.e., not on your own server).
    • relative URLs describe the pathname to a file relative to the current document. Relative URLs can be used when you are linking to another document on your own site (i.e., on the same server). It does not require the protocol or domain name --- just the pathname.

  2. Linking to pages on the web

     <li><a href="http://www.foodnetwork.com">The Food Network</a></li>

  3. Linkging within your own site, remember the root directory is represented as "/".

     <li><a href="recipes/pasta/couscous.html">Couscous with Peas and Mint</a></li>

  4. it is the same for the images

     <img src="images/jenskitchen.gif" alt="">

  5. Linking to a specific point in a page, which is also referred to as linking to a document fragment. It has a two-part process,

    • first, you identify the destination.

    • then you make a link to it.

         // identify the fragment
   <h2 id="startH">H</h2>
   <dl>
   <dt>hexadecimal</dt>
   <dd>A base-16 numbering system that uses the characters 0-9 and A-F. It is used in CSS and HTML for specifying color values</dd>

   // link to it       
   <p>... F | G | <a href="#startH">H</a> | I | J ...</p>

  6. Linking to a fragment in another document

     <a href="glossary.html#startH">See the Glossary, letter H</a>
 // or
 <a href="http://www.example.com/glossary.html#startH">See the Glossary, letter H</a>

  7. Targeting a New Browser Window. One problem with putting links on your page is that when people click on them, they may never come back. The traditional solution to this dilemma has been to make the linked page open in a new browser window.

    • setting target="_blank" always causes the browser to open a fresh window. If you target "_blank" for every link, every link will launch a new window, po tentially leaving your user with a mess of open windows.

    • A better method is to give the target window a specific name, which can then be used by subsequent links. If you set target="display" from every link on the page, each linked document will open in the same second window. However, if that second window stays hidden the user's current window, if may look as though the link simply did not work.

        <a href="http://www.oreilly.com" target="_blank">O'Reilly</a>
  <a href="http://www.oreilly.com" target="display">O'Reilly</a>

    • it is possible to open a window with specific dimensions and various parts of the browser chrome (toolbars, scrollbars, etc.) turned on or off; it takes JavaScript to do it. These are known as pop-up windows, they are commonly used for advertising.

  8. Mail links, using mailto protocol:

     <a href="mailto:[email protected]">Contact Al Klecker</a>

  9. Telephone links

     <a href="tel:+18005551212">Call us free at (800) 555-1212</a>

Adding Images

Image files need to be named with the proper suffixes - .gif, .jpg (or .jpeg) and .png, respectively - in order to be recognized by the browser. If you have a source image that is in another popular format, such as TIFF, BMP, or EPS, you'll need to convert it to a web format before you can add it to the page. If for some reason, you must keep your graphic file in its original format, you can make it available as an external image by making a link directly to the image file.

    <a href="architecture.eps">Get the drawing</a>

otherwise, using img element,

    <img src="tuscany.jpg" alt="haha you cant see">
  • img, adds an inline image;
  • src, source of the image, it can be URL or file location.
  • alt, alternative text, inthe case that the image does not show.
  • width in number, height in number, image width/height in pixels.
    • it is great if you are designing one version of your page with one fixed image size. However, in these days of responsive web design, it is common to create several version of the same image ans send a small one to small mobile devices and a larger image of large-screen devices. If you are scaling images in a responsive design or delivering multiple images size, do not use width and height attributes in the markup.
    • be sure that the pixel dimensions you specify are the actual dimensions of the image. If the pixel values differ from the actual dimensions of your image. The browser resizes the image to match the specified values.
  • usemap="usemap", indicates a client-side image map
  • title="text", provides a "tool tip" when the user mouses over the image. Can be used for supplemental information about the image.

A window in a wondow, iframe

the iframe element lets you to embed a separated HTML document or other resource in a document. What you see is a floating or inline "frame" that displays the document with its own set of scrollbars if the embedded document is too long to fit.

  • height="number", height of the frame in pixels

  • src="url", resource of the display in the frame

  • width="number", width of the frame in pixels

      <h1>Inline (floating) Frames</h1>
  <iframe src="list.html" width="400" height="250">
  Your browser does not support inline frames.Read the <a href="list. html">list</a>.
  </iframe>

Table Markup

Tables may be used to organize calendars, schedules, statistics, or other types of information. Note the "data" does not necessarily mean numbers. A table cell may contain any sort of information, including numbers, text numbers, and even images and multimeadia objects.

    <table>...</table> // tabular content (rows and columns)
    <tr>...</tr> // table row
    <th>...</th> // table header
    <td>...</td> // table cell data

    // here is an example
    <table>
        <tr> 
            <th>Menu item</th> 
            <th>Calories</th> 
            <th>Fat(g)</th> 
        </tr>
        <tr> 
            <th>Chicken Noodle Soup</th> 
            <th>120</th> 
            <th>2</th> 
        </tr>
        <tr> 
            <th>Caesar Salad</th> 
            <th>400</th> 
            <th>26</th> 
        </tr>
    </table>

Here is what it looks like:

Menu item Calories Fat(g)
Chicken Noodle Soup 120 2
Caesar Salad 400 26

Advanced Table Elements

The sample table in this section has been stripped down to its bare essential to make its structure clear while you learn how tables work. It is worth noting, however, there are other talbe elements and attributes that offer more complex semantic descriptions and improve the accessibility of tabular content. A thoroughly marked-up version of the sample table might look like this:

    <table>
        <caption>Nutritional Information (Calories and Fat Content)</caption>
        <col span="1" class="itemname">
        <colgroup id="data">
            <col span="1" class="calories">
            <col span="1" class="fat">
        </colgroup>
        
        <thead>
            <tr>
                <th scope="col">Menu Item</th>
                <th scope="col">Calories</th>
                <th scope="col">Fat(g)</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>Chicken noodle soup</td>
                <td>120</td>
                <td>2</td>
            </tr>
            <tr>
                <td>Caesae salad</td>
                <td>400</td>
                <td>26</td>
            </tr>
        </tbody>
    </table>
  • Row Group Elements, you can describe rows of groups of rows as belonging to a header, footer, or the body of a table using the thead, tfoot, and tbody elements, respectively. Some user agents (another word for a browsing device) may repeat the header and footer rows on a tables that span multiple pages. Authors may also use these elements to apply styles to various regions of a table.
  • Column may be identified with the col element or put into groups using the colgroup element. This is useful for adding semantic context to information in columns and may be used to calculate the width of tables more quickly. Notice that there is no content in the column elements; it just describes the columns before the actual table data begins.

Spanning Cells

It is one fundamental feature of table structure, which is the stretching of a cell to cover several rows or columns. Spanning cells allow you to create complex table structures, but it has the side effect of making the markup a little more difficult to keep track of. You make a header or data cell span by adding the colspan or rowspan attributes.

  • Column spans, created with the colspan attribute in the td or th element, stretch a cell to the right to span over the subsequent column. Here is an example which makes a header apply to two columns.

      <table>
      <tr>
          <th colspan="2">Fat</th>
      </tr>
      <tr>
          <td>Saturated Fat(g)</td>
          <td>Unsaturated Fat(g)</td>
      </tr>
  </table>

  • Row spans, created by the rowspan attribute.

      <table>
      <tr>
          <th colspan="3">Serving Size</th>
          <td>Small (8oz.)</td>
      </tr>
      <tr>
          <td>Medium (16oz.)</td>
      </tr>
      <tr>
          <td>Large (24oz.)</td>
      </tr>
  </table>

Table Accessibility

It is important to let the user understand what your table is for.

We use caption element to give a table a title or brief description that displays next to the table. You can use it to describe the table's contents or provide hints on how it is structured. The caption element must be the first thing within the table element.

    <table>
        <caption>Nutritional Information (Calories and far content)</caption>
        <tr> 
            <th>Menu item</th> 
            <th>Calories</th> 
            <th>Fat(g)</th> 
        </tr>
        <tr> 
            <th>Chicken Noodle Soup</th> 
            <th>120</th> 
            <th>2</th> 
        </tr>
        <tr> 
            <th>Caesar Salad</th> 
            <th>400</th> 
            <th>26</th> 
        </tr>
    </table>

  • Connecting cells and headers. Sometimes we are confused about which header applying to which cells. The scope attribute associates a table header with the row, column, group of rows (such as tbody), or column group in which it appears using the values row, column, rowgroup, or colgroup, respectively. This example uses the scope to declare that a header cell applies to the current row.

      <tr>
      <th scope="row">Mars</th>
      <td>.95</td>
      <td>.62</td>
  </tr>

  • and for really complicated tables in which scope is not sufficient to associate a table data cell with its respective header (such as when the table contains multiple spanned cells)， the headers attribute is used in the td element to explicitely tie it to a header's id value. In this example, the cell content ".38" is tied to the header "Diameter measured in earths",

    Diameter measured in earths ... other cells .38 ... many other cells

Forms

It did not take long for the web to shift from a network of pages to read to a place where you went to get things done -- making purchases, booking plane tickets, signing petitions, searching a site, posting a tweet... . All of these interactions are handled by forms.

How Froms Work

There are two parts to a working form. The first part is the form that you see on the page itself that is created using HTML markup. Froms are made up of buttons, unput firlds, and drop-down manus (collectively known as form control) used to collect information from the user. From may also contain text and other elements.

The other component of a web form is an application or script on the server that processes the information collected by the form and returns an appropriate response.

After an user takes the form and submits with his/her answers. The web application also returns a response. The kind of response sent back depends on the content and purpose of the form. Here, the response is a simple web page that contains a thank you for signing up for the mailing list. Other applications might respond by reloading the HTML form page with updated information, by moving the use on to another related form page, or by issuing an error message if the form is not filled out correctly, to name only a few examples.

The Form Elements

    <form>...</form> // Interactive Form

The form element is a container for all the content of the form, including some number of form controls, such as text entry fields and buttons.

    <!DOCTYPE html>
    <html>
    <head>
        <title>Mailing List Signup</title>
        <meta charset="utf-8">
    </head>
    <body>
        <h1>Mailing List Signup</h1>
        
        <form action="/mailinglist.php" method="post">
            <fieldset>
            <legend>Join our email list</legend>
            <p>Get new about the band such as tour dates and special MP3 releases sent to your own in-box.</p>
        <ol>
            <li><label for="firstlast">Name:</label>
                <input type="text" name="username" id="firstlast"></li>
            <li><label for="email">Email:</label>
                <input type="text" name="email" id="email"></li>
        </ol>
        <input type="submit" value="Submit">
        </fieldset>
        </form>
    </body>
    </html>

And we are going to mention some attributes of form.

  • the action attribute provides the location (URL) of the application or script (sometimes called the action page) that will be used to process the form. The web forms may be processed using one of the following technologies:

    • PHP(.php) is an open source scripting language most commonly used with the Apache web server;
    • Microsoft's ASP.NET(Active Server Pages)(.asp) is a programming environment for the Microsoft Internet Information Server (IIS).
    • Ruby on Rails. Ruby is the programming language that is used with the Rails platform. Many popular wab application are built with it.
    • JavaServer Pages (.jsp) is a Java-based technology similar to ASP.
    • Python is a popular scripting language for web and server applications.

  • the method attribute specifies how the information should be sent to the server. After the browser encodes that information for its trip to the server, there are only two ways for sending this encoded data to the server: POST and GET, indicated using the method attribtute in the form element. The method is optional and will default to GET if omitted.

    • the POST method. When the form's method is set to POST, the browser sends a separated server request containing some special headers followed by the data. Only the server sees the content of this request, thus it is the best method for sending secure information such as credit card or other personal information. The POST method is also preferable for sending a lot of data, such as a lengthy text entry, because there is no character limit as there is for GET.
    • the GET method, the encoded form data gets tacked right onto the URL sent ot the server. A question mark character separated the URL from the following data. The GET method is appropriate if you want users to be able to bookmark the results of a form submission (such as a list of search results). Because the content of the form is in plain sight, GET is not appropriate for forms with private information or financial information. In addition, GET may not be used when the form is used to upload a file.

Content and Variables

To use technical term, "username" and "email" are two variables collected by the form. The data entered by the user is the value or content of the variable.

  • the name attribute provides the variable name for the control. The text gathered by a textarea element is defined as the "comment" variable:

      <textarea name="comment" rows="4" cols="45" placeholder="leave us a comment."><textarea>

after the user enters a comment, it would be passed to the server as a name/value (variable/content) pair like this:

    comment=This%20is%20the%20best%20band%20ever%21

All the control elements must include a name attribute so the form-processing application can sort the information. You may include a name attribute for submit and reset button elements, but they are not required, bacause they habe special functions not related to data collection.

  • When naming the variables, you can not just name controls willy-nilly. The web application that processes the data is programmed to look for specific vatiable names. If you are designing a form to work with a preexisting application or script, you need to find out specific variable names to use in the form so they are speaking the same language.

The Great Form Control Roundup

Detail makes the perfect; One coin a day makes a fortune.

⚠️ **GitHub.com Fallback** ⚠️