Please enable JavaScript.

Coggle requires JavaScript to display documents.

2: HTML: Forms & Tables - Coggle Diagram

- - - - <table>
        
        root element
        
        a shell or container
        
        no visual impact
      - <td>
        
        table data cell element
        
        represents a single cell
      - <tr>
        
        table row element
        
        represents a row of cells
        
        contains td elements
      - <th>
        
        header
        
        used inside a row same as td's
    - - <thead>
        
        table head element
        
        wrap around row of headers
      - wrapped around rows
        
        to differentiate areas of the table
        
        helps
        
        make code more understandable
        
        with accessibility
      - <tbody>
        
        body of the table
        
        main data
      - <tfoot>
        
        usually used for aggregate values
        
        at the bottom of the table
        
        table footer
    - - making cells span multiple columns or rows
      - attributes
        
        rowspan
        
        how many rows the cell extends over
        
        to td element
        
        colspan
        
        how many columns the cell extends over
- - - - root element
        
        a shell or container
        
        no visual impact
      - we fill the form with a collection of inputs #
        
        text inputs, checkboxes, buttons, etc
        
        that are used to submit information
      - action attribute
        
        specifies where the form data should be submitted to
        
        sent to a server
        
        via an http request
        
        method attribute
        
        specifies the http method
    - - 20+ different types
      - type attribute
        
        alters the behaviour and appearance
      - examples
        
        date pickers
        
        checkboxes
        
        radio buttons
      - name attribute
        
        used to send the input's data to the server
        
        a way of labelling the data
        
        submitted by the user
    - - associated with
        
        an input
        
        or other form control
      - used by screen readers
      - the input id
        
        is used in the for attribute of the label
        
        to link the two
        
        when you click on a label
        
        the corresponding input gets focus
    - - in a form
        
        will submit the form
        
        by default
        
        unless you specify the type
      - type attribute
        
        submit
        
        submits the form
        
        default action
        
        button
        
        acts like a regular button
    - - a multi-line text input
    - - works with the <option> element
        
        used inside the select
      - creates a drop-down list
  - - - to add constraints
      - or to validate user input or data
    - - built-in browser validations
      - client-side validation
        
        still in the browser
        
        but done with JavaScript
      - server-side validation
        
        done when the data is submitted
        
        needed
        
        in case someone submits data directly
        
        not via the browser
        
        or if the browser misses something
    - - required
      - attributes to input elements
      - minlength, maxlength
        
        for text
      - min, max
        
        for numeric values
      - pattern
        
        defines a regular expression
        
        that the input must match
        
        some inputs have a default
        
        email input
        
        must
        
        contain an at sign
        
        which is followed by another character
        
        url input
        
        must match urlScheme:///restOfUrl