Course Notes: More HTML

DOCUMENT & WEBSITE STRUCTURE

Your documents different sections should be marked up according to their content and their functionality

  • <nav> – navigation bar, main navigation functionality for the page
  • <header> – introductory content
  • <footer>  – group of end content for a page
  • <main> – main content:  content that’s unique to this page, use only once per page, has many subsections that can be used inside:
    • <article> block of related content, stands on its own
    • <section> grouping together a part of a page that constitutes a single piece of functionality
    • <aside> sidebar: content that’s not directly related to the main content but can provide additional indirect information
    • non-sematic subsections (only use if you can’t think of a better semantic text element)
    • <span> inline element
    • <div> block element, container

SEO (Search Engine Optimization): a page’s search ranking can be affected by the use and content of certain tags including <br> and <hr> tags. These tags control readability of a site, which plays a part in SEO. More information on SEO will be included in Module 4.

<br> line break: creates a line break, moving the following content down a line

<hr> horizontal rule: creates a horizontal line between two elements, denotes a thematic change in the text

FORMS

  1. FORMS FUNDAMENTALS
    • <form> – container element for the form
    • action="www.url.com" – defines the location (URL) where the form information goes once submitted
    • method="get, post" – defines which HTTP method to send the data with
      • “post” appends form-data inside the body of the HTTP request, has no size limitations, are never cached, cannot be bookmarked
      • “get” appends form-date into the URL in name/value pairs, never use to send sensitive data, better for non-secure data, length restrictions, can be cached, can be bookmarked
      • Labels – how to link a label to a form widget by referencing the widget’s id. Allows users to click on the label to activate the corresponding widget
  2. INPUT <input type=“email, text, password">
    • Text input: basic single-line text field, accepts any kind of text input.
    • Email input: single-line text field, only accepts email addresses.
    • Password input: single-line text field
    • Search input: similar to text field but is usually rendered with different style and values can be saved to autofill across multiple pages
    • <textarea> text box larger than 1 line, different from normal text input because it can be adjusted to be larger and instead of using a value attribute, the text between the opening and closing tags is the default value
      • cols attribute= width of the text control
      • rows attribute= # of text lines
      • wrap attribute= (hard/soft) indicates how the control wraps text
  3. <fieldset> element: way to group widgets that share the same purpose, styling and semantic purposes
  4. <legend> element: formally describes the purpose of the <fieldset> and acts as a label, inside of the <fieldset> element
  1. FORM ATTRIBUTES
    • Autofocus: specification to the element that should automatically have input focus when the page loads
    • Disabled: prevents the user from interacting with the element
    • Required: required fields are followed by <abbr title="required">*</abbr> so that the user sees the star character (*) and knows it’s required, cannot be submitted without being completed
    • Name: name of the element, submitted with the form data
    • Values: the element’s initial value
  2. DROPDOWN CONTENT
    • Autocomplete: suggested, automatically-completed values
    • Checkable Items: check box & radio buttons, values only sent only if they are checked
  3. ADVANCED FORM WIDGETS
    • Placeholder: this is the text that appears inside the text input box before something is entered by the user
    • Sliders: a way to pick a number by using a slider, used when the exact valie isn’t necessarily important, <input type=”range” min=”0” max=”500”>
  4. DATE & TIME PICKER
    • Created using the <input> element
    • Specify using the type= attribute
      1. “datetime-local” widget that displays a date with time (no time zone info)
      2. “month” widget that displays a month with a year
      3. “time" widget that displays an hours and minute, optionally seconds
  5. COLOR PICKERS
    • Created using the <input> element
    • Set the type attribute to ”color”
    • Warning! color widget support is currently not good.
  6. FILE PICKER
    • Widget that allows the user to choose 1+ files to send
    • Create using the <input> element
    • Specify its type attribute set to “file”
    • Accept attribute constrains the types of files that are accepted
      1. “image/*” for images
      2. “file/* for doc files
    • including the multiple attribute allows the user to pick more than one file
  1. HIDDEN CONTENT
    • convenient for technical reasons to have pieces of data that are sent with a form but not displayed to the user
    • create using the <input> element
    • specify its type attribute to “hidden”
    • required to set it’s name and value attributes, ex: name="timestamp” value=”the hidden data you want to include when the form’s submitted”
    • Note: do not rely on hidden inputs as a form of security, the page’s content is still visible using the browser’s developer tools
  2. IMAGE BUTTON
    • an image where when the user clicks on it, it behaves like a submit button
    • created using the <input> element
    • specify its type attribute to type=“image”
    • If the image is used to submit the form, it submits the x & y coordinates of the click relative to the image