This document provides information and instructions for Week 8 of the FEWD course, including:
- A link to slides for the week's material.
- A reminder that the final project draft is due and students should focus on iterating their project.
- Instructions for creating a GitHub repository to store weekly coursework.
- An overview of forms, including form tags, input types, labels, and validation. Styling forms and customizing form elements is also covered.
- An exercise to style a todo list form is included.
Report
Share
Report
Share
1 of 32
Download to read offline
More Related Content
Fewd week8 slides
1. FEWD - WEEK 8
WILL MYERS
Freelance Front End Developer
SLIDES
http://www.slideshare.net/wilkom/fewd-week8-slides
2. 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.
3. 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
4. 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
5. REVIEW OF LAST WEEK'S
ASSIGNMENT
See also http://learn.shayhowe.com/advanced-html-
css/responsive-web-design/
11. FORM TAG
In Action
<form action="register.php" method="post" enctype="multipart/form-data"
<!--Data collection elements go here-->
</form>
12. 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
https://developer.mozilla.org/en-
US/docs/Web/HTML/Element/input
13. 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
17. 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">
19. 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> <!-- value is "first" -->
20. 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)
21. 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>
22. 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:
https://developer.mozilla.org/en-
US/docs/Web/Guide/HTML/Forms/Styling_HTML_forms
23. 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')
25. 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
26. STYLING WORKAROUNDS
Try using pseudo elements and the selector :checked for
'no-JS' switching between checked and unchecked
images used for styling
Use JavaScript
27. 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:
https://developer.mozilla.org/en-
US/docs/Web/Guide/HTML/Forms/Advanced_styling_for_HTML
28. 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
30. 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?
31. 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