Fewd week8 slides

FEWD - WEEK 8
WILL MYERS
Freelance Front End Developer
SLIDES
http://www.slideshare.net/wilkom/fewd-week8-slides

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

YOUR WEEKLY FEWD GITHUB
REPOSITORY
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 path
Open this repo folder in your editor
Commit the changes and publish the FEWD_Week8
repository to github.com

YOUR WEEKLY WORKING FILES
FROM ME
To get the week8_working_files you should just be able to
select the ga-fewd-files repository in GitHub Desktop and
press 'Sync'. This should pull in this weeks folder from
github.com.
If you any difficulties you should just re-clone the ga-fewd-
files repository.
Copy the whole week8_working_files into your FEWD_Week8
repository and commit and publish to github.com

REVIEW OF LAST WEEK'S
ASSIGNMENT
See also http://learn.shayhowe.com/advanced-html-
css/responsive-web-design/

FORMS
How we can get data from users?

FORMS
A wrapper for data collection elements
Text fields
Dropdowns
Radio Buttons
etc

FORMS
Tells the page:
Where to send the data
How to send it
What is being sent

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

FORM TAG
Available Attributes
Method: Get, Post, Put, Delete
Action: Url to send data to
Enctype: 'multipart/form-data' if uploading files

FORM TAG
In Action
<form action="register.php" method="post" enctype="multipart/form-data"

</form>

INPUTS
Place between <form> </form>tags
Attributes
type: text, submit, password, email, checkbox, button,
radio, file, number, search, etc
name: used server side
placeholder
value
US/docs/Web/HTML/Element/input

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

TEXT
Use the valueattribute to set initial text
Use the placeholderattribute to set placeholder text

EMAIL
Allows browser to autofill field

PASSWORD
Hides characters as typed

SUBMIT VS FILE VS BUTTON
valueis 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">

SELECT AND OPTION
The <select>tag is for dropdowns and contains
<option>s.
<select>
<option value="option1">first</option>
<option value="option2">second</option>
<select>
The valueattribute represents the value to be submitted
with the form, should this option be selected. If this
attribute is omitted, the value is taken from the text content
of the option element.
<option>first</option>

LABELS
Information 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 the
focus in the input field (great for radio buttons)

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 grouping
term 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>

STYLING
Styling forms is tricky because form widgets were originally
built to use the underlying operating system UI. CSS was
added for styling other elements some years later.
For a good summary on styling forms, read the following:
US/docs/Web/Guide/HTML/Forms/Styling_HTML_forms

STYLING
The following forms elements are straightforward to style in
the 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')

STYLING WORKAROUNDS
The following form elements cannot be styled directly with
CSS
Checkboxes
File upload inputs
Radio buttons

STYLING WORKAROUNDS
There are a number of workarounds for styling 'bad' and
'ugly' form elements
Opacity 0 on the element, set its height and width to
define clickable area, set the height and width of its
parent to be the same as the input (don't forget position
relative). Style the parent.
Hide the element, style a corresponding label how you
wanted the element to appear

STYLING WORKAROUNDS
Try using pseudo elements and the selector :checked for
'no-JS' switching between checked and unchecked
images used for styling
Use JavaScript

STYLING WORKAROUNDS
Let's read the following article and then build a custom
styled checkbox group using one of the techniques from the
previous slide:
US/docs/Web/Guide/HTML/Forms/Advanced_styling_for_HTML

STYLING
Let's have a look at a styled form with a styled <select>
widget, using the following properties to override any
default UI appearance:
appearance:none;
-webkit-appearance:none;
-moz-appearance: none;
Open week8_working_files/form_style

STYLING
Now complete the on the
Mozilla web page.
postcard form styling exercise

VALIDATION
Validation occurs on both the front end and the back end.
The front-end can check for whether a field has been left
blank and whether your password confirmation matches
your password.
Can you write some JavaScript to perform simple validation
for one of the forms we have looked at?

VALIDATION LIBRARIES
Parsley.js is a third party JavaScript library that you can use
for 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

TODO LIST EXERCISE
Open week8_working_files/to_do_list

Fewd week8 slides

More Related Content

What's hot (20)

Viewers also liked (7)

Similar to Fewd week8 slides (20)

More from William Myers (6)

Recently uploaded (20)

Fewd week8 slides