Download - Fewd week8 slides

Transcript
Page 1: Fewd week8 slides

FEWD - WEEK 8WILL MYERS

Freelance Front End Developer

SLIDES

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

Page 2: 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.

Page 3: Fewd week8 slides

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

Page 4: Fewd week8 slides

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

Page 5: Fewd week8 slides

REVIEW OF LAST WEEK'SASSIGNMENT

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

Page 6: Fewd week8 slides

FORMSHow we can get data from users?

Page 7: Fewd week8 slides

FORMSA wrapper for data collection elements

Text fieldsDropdownsRadio Buttonsetc

Page 8: Fewd week8 slides

FORMSTells the page:

Where to send the dataHow to send itWhat is being sent

Page 9: Fewd week8 slides

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

Page 10: Fewd week8 slides

FORM TAG

Available Attributes

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

Page 11: Fewd week8 slides

FORM TAGIn Action

<form action="register.php" method="post" enctype="multipart/form-data" <!--Data collection elements go here--> </form>

Page 12: Fewd week8 slides

INPUTS

Place between <form> </form> 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

Page 13: Fewd week8 slides

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

Page 14: Fewd week8 slides

TEXTUse the value attribute to set initial text

Use the placeholder attribute to set placeholder text

Page 15: Fewd week8 slides

EMAILAllows browser to autofill field

Page 16: Fewd week8 slides

PASSWORDHides characters as typed

Page 17: Fewd week8 slides

SUBMIT VS FILE VS BUTTONvalue is button text. Defaults to submit in chrome:<input type="submit" value="Submit">

Creates a file upload element <input type="file">

Creates clickable button <input type="button">

Page 18: Fewd week8 slides

SELECT AND OPTION

Page 19: Fewd week8 slides

SELECT AND OPTIONThe <select> tag is for dropdowns and contains<option>s.

<select> <option value="option1">first</option> <option value="option2">second</option> <select>

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.

<option>first</option> <!-- value is "first" -->

Page 20: Fewd week8 slides

LABELSInformation about the input field should be put in a<label> tag

To tie the two together choose one of these methods:<label>Name <input type="text" name="yourName"></label>

<label for="yourName">Name</label> <input type="text" name="yourName" id="yourName">

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

Page 21: Fewd week8 slides

FIELDSET/LEGEND<fieldset>is a wrapper for grouped form elements, e.g.'first', 'middle', 'last' name text fields.

<legend> goes inside fieldset and defines the groupingterm for the fieldset

<fieldset> <legend>Your Name</legend> <input type="text" name="first_name"> <input type="text" name="middle_name"> <input type="text" name="last_name"> </fieldset>

Page 22: Fewd week8 slides

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

Page 23: Fewd week8 slides

STYLINGThe following forms elements are straightforward to style inthe same way that you would style a <p> or a <div> or a<nav>:

<form><fieldset><label><output>all text field widgets e.g. (<input> or <textarea>)all buttons ('submit', 'reset', 'button')

Page 24: Fewd week8 slides

STYLING WORKAROUNDSThe following form elements cannot be styled directly withCSS

CheckboxesFile upload inputsRadio buttons

Page 25: Fewd week8 slides

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

Page 26: Fewd week8 slides

STYLING WORKAROUNDS

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

Use JavaScript

Page 27: Fewd week8 slides

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

Page 28: Fewd week8 slides

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

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

Open week8_working_files/form_style

Page 29: Fewd week8 slides

STYLING

Now complete the on theMozilla web page.

postcard form styling exercise

Page 30: Fewd week8 slides

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?

Page 31: Fewd week8 slides

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

Page 32: Fewd week8 slides

TODO LIST EXERCISEOpen week8_working_files/to_do_list