Sara's 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
        • sematic subsections
        • <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, affected by the contents of headings

<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
    1. <form> container element for the form
    2. Form action="www.url.com" defines the location (URL) where the form information goes once submitted
    3. Form method="get, post" defines which HTTP method to send the data with
      1. “post” appends form-data inside the body of the HTTP request, has no size limitations, are never cached, cannot be bookmarked
      2. “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
      3. Research into PHP or JavaScript to create the receiving page
    4. Form action: Form method: how the information is submitted.
    5. Form 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">
    1. Text input: basic single-line text field, accepts any kind of text input.
    2. Email input: single-line text field, only accepts email addresses.
    3. Password input: single-line text field
    4. Search input: similar to text field but is usually rendered with different style and values can be saved to autofill across multiple pages
    5. <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
      1. cols attribute= width of the text control
      2. rows attribute= # of text lines
      3. 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
    1. Autofocus: specification to the element that should automatically have input focus when the page loads
    2. Disabled: prevents the user from interacting with the element
    3. 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
    4. Name: name of the element, submitted with the form data
    5. Values: the element’s initial value
  2. DROPDOWN CONTENT
    1. Autocomplete: suggested, automatically-completed values
    2. Checkable Items: check box & radio buttons, values only sent only if they are checked
  3. ADVANCED FORM WIDGETS
    1. Placeholder: this is the text that appears inside the text input box before something is entered by the user
    2. 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
    1. Created using the <input> element
    2. 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
  1. The coolest of all: Color Pickers!
    1. Created using the <input> element
    2. Set the type attribute to ”color”
    3. Warning! color widget support is currently not good.
  2. File Picker.
      1. Widget that allows the user to choose 1+ files to send
      2. Create using the <input> element
      3. Specify its type attribute set to “file”
      4. Accept attribute constrains the types of files that are accepted
        1. “image/*” for images
        2. “file/* for doc files
      5. including the multiple attribute allows the user to pick more than one file
  1. Hidden Content
    1. convenient for technical reasons to have pieces of data that are sent with a form but not displayed to the user
    2. create using the <input> element
    3. specify its type attribute to “hidden”
    4. 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”
    5. 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
    1. an image where when the user clicks on it, it behaves like a submit button
    2. created using the <input> element
    3. specify its type attribute to type=“image”
    4. If the image is used to submit the form, it submits the x & y coordinates of the click relative to the image