Fewd week8 slides

Click here to load reader

download Fewd week8 slides

of 32

  • date post

    27-Jan-2017
  • Category

    Internet

  • view

    200
  • download

    0

Embed Size (px)

Transcript of Fewd week8 slides

  • FEWD - WEEK 8WILL MYERS

    Freelance Front End Developer

    SLIDES

    http://www.slideshare.net/wilkom/fewd-week8-slides

    http://www.slideshare.net/wilkom/fewd-week8-slides

  • FINAL PROJECT MILESTONE 3By week 8, you should have submitted a draft of theJavaScript and jQuery you'll need for your final project. Thisweek, focus iterating on your project to turn in an updateddraft.

  • YOUR WEEKLY FEWD GITHUBREPOSITORY

    Use the '+' button in the top-left of GitHub Desktop(Create tab)Create a new repository called 'FEWD_Week8'Choose the [home]/FEWD folder for the local pathOpen this repo folder in your editorCommit the changes and publish the FEWD_Week8repository to github.com

  • YOUR WEEKLY WORKING FILESFROM ME

    To get the week8_working_files you should just be able toselect the ga-fewd-files repository in GitHub Desktop andpress 'Sync'. This should pull in this weeks folder fromgithub.com.

    If you any difficulties you should just re-clone the ga-fewd-files repository.

    Copy the whole week8_working_files into your FEWD_Week8repository and commit and publish to github.com

  • REVIEW OF LAST WEEK'SASSIGNMENT

    See also http://learn.shayhowe.com/advanced-html-css/responsive-web-design/

    http://learn.shayhowe.com/advanced-html-css/responsive-web-design/

  • FORMSHow we can get data from users?

  • FORMSA wrapper for data collection elements

    Text fieldsDropdownsRadio Buttonsetc

  • FORMSTells the page:

    Where to send the dataHow to send itWhat is being sent

  • FORMS - EXERCISEhttps://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/My_first_HTML_form

    https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/My_first_HTML_form

  • FORM TAG

    Available Attributes

    Method: Get, Post, Put, DeleteAction: Url to send data toEnctype: 'multipart/form-data' if uploading files

  • FORM TAGIn Action

  • INPUTS

    Place between tags

    Attributes

    type: text, submit, password, email, checkbox, button,radio, file, number, search, etcname: used server sideplaceholdervalue

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

    https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input

  • INPUTSGotchas

    The font-family for an input is not inherited!!!This can lead to funny sizing issues on Macs vs. PCswhere the default font is not the same

  • TEXTUse the value attribute to set initial text

    Use the placeholder attribute to set placeholder text

  • EMAILAllows browser to autofill field

  • PASSWORDHides characters as typed

  • SUBMIT VS FILE VS BUTTONvalue is button text. Defaults to submit in chrome:

    Creates a file upload element

    Creates clickable button

  • SELECT AND OPTION

  • SELECT AND OPTIONThe tag is for dropdowns and containss.

    first second

    The value attribute represents the value to be submittedwith the form, should this option be selected. If thisattribute is omitted, the value is taken from the text contentof the option element.

    first

  • LABELSInformation about the input field should be put in a tag

    To tie the two together choose one of these methods:Name

    Name

    NB Usability: Clicking the label text in either case places thefocus in the input field (great for radio buttons)

  • FIELDSET/LEGENDis a wrapper for grouped form elements, e.g.'first', 'middle', 'last' name text fields.

    goes inside fieldset and defines the groupingterm for the fieldset

    Your Name

  • STYLINGStyling forms is tricky because form widgets were originallybuilt to use the underlying operating system UI. CSS wasadded for styling other elements some years later.

    For a good summary on styling forms, read the following:https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Styling_HTML_forms

    https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Styling_HTML_forms

  • STYLINGThe following forms elements are straightforward to style inthe same way that you would style a or a or a:

    all text field widgets e.g. ( or )all buttons ('submit', 'reset', 'button')

  • STYLING WORKAROUNDSThe following form elements cannot be styled directly withCSS

    CheckboxesFile upload inputsRadio buttons

  • STYLING WORKAROUNDSThere are a number of workarounds for styling 'bad' and'ugly' form elements

    Opacity 0 on the element, set its height and width todefine clickable area, set the height and width of itsparent to be the same as the input (don't forget positionrelative). Style the parent.

    Hide the element, style a corresponding label how youwanted the element to appear

  • STYLING WORKAROUNDS

    Try using pseudo elements and the selector :checked for'no-JS' switching between checked and uncheckedimages used for styling

    Use JavaScript

  • STYLING WORKAROUNDSLet's read the following article and then build a customstyled checkbox group using one of the techniques from theprevious slide:

    https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Advanced_styling_for_HTML_forms

    https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Advanced_styling_for_HTML_forms

  • STYLINGLet's have a look at a styled form with a styled widget, using the following properties to override anydefault UI appearance:

    appearance:none; -webkit-appearance:none;-moz-appearance: none;

    Open week8_working_files/form_style

  • STYLING

    Now complete the on theMozilla web page.

    postcard form styling exercise

    https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Styling_HTML_forms#Example_2

  • VALIDATIONValidation occurs on both the front end and the back end.The front-end can check for whether a field has been leftblank and whether your password confirmation matchesyour password.

    Can you write some JavaScript to perform simple validationfor one of the forms we have looked at?

  • VALIDATION LIBRARIESParsley.js is a third party JavaScript library that you can usefor more rigorous front-end validation. It works with jQuery.

    http://parsleyjs.org/

    http://parsleyjs.org/doc/index.html#psly-frontend-form-validation

    Open week8_working_files/form_style_validation

    http://parsleyjs.org/http://parsleyjs.org/doc/index.html#psly-frontend-form-validation

  • TODO LIST EXERCISEOpen week8_working_files/to_do_list