IntroductionWelcome| 00:04 | Hello! I'm Ray Villalobos and
welcome to CSS: Styling Forms.
| | 00:08 | In this course I'm going to show you how
to use CSS to style forms and form elements.
| | 00:13 | I'll start by showing you basic form inputs
and how to code forms to improve usability.
| | 00:18 | Then I'll show you how to create
special styles for individual form elements,
| | 00:22 | like custom check box and radio buttons.
| | 00:25 | We'll see how to lay out forms by
grouping them and positioning them with
| | 00:29 | pixel-level precision.
| | 00:30 | Finally, I'll show you how to combine
jQuery with CSS to validate and style
| | 00:35 | feedback to users on required fields.
| | 00:38 | So let's get started with CSS: Styling Forms.
| | Collapse this transcript |
| What you should know before watching this course| 00:00 | Before taking this course, you
should be familiar with basic web page
| | 00:04 | development with HTML.
| | 00:06 | You should also know how to
style HTML elements with CSS.
| | 00:10 | You should be familiar with uploading
content to web servers using FTP programs
| | 00:14 | and using text editors to
work with HTML documents.
| | 00:17 | If you want to learn more about HTML,
make sure you check out Bill Weinman's
| | 00:21 | course on XHTML and HTML Essential Training.
| | 00:25 | To learn more about CSS, check out
James Williamson's CSS Fundamentals and his
| | 00:31 | CSS Core Concept course.
| | Collapse this transcript |
| Using the exercise files| 00:00 | If you are a Premium member of the
lynda.com Online Training Library or if you
| | 00:04 | are watching this tutorial on a DVD-ROM,
you have access to the exercise files
| | 00:08 | used throughout this title.
| | 00:10 | Inside the exercise files, you will
find a folder for assets used throughout
| | 00:14 | this course, a code snippets file with
text elements you'll be using for each
| | 00:20 | movie, as well as a Starting Points folder
with folders for each video in the series.
| | 00:26 | At the beginning of each movie, I'll
show you how to copy the Working Folder
| | 00:30 | onto your Desktop and how to start
working with the project by dragging it onto
| | 00:35 | your text editor and
working with the project files.
| | 00:38 | If you are a Monthly member or an
Annual member of lynda.com, you don't have
| | 00:42 | access to the exercise files, but you can
follow along from scratch with your own assets.
| | 00:47 | So let's get started.
| | Collapse this transcript |
| Setting up the working environment| 00:00 | To work on any web development project,
you'll need a combination of a text
| | 00:04 | editor to work on your files and an FTP
program to upload files to a server so
| | 00:09 | that people can see them on the web.
| | 00:11 | On a Mac, a great text editor you can
get for free is TextWrangler, which is
| | 00:15 | available from the App Store.
| | 00:17 | Also available for free on a
Mac or a PC is Aptana Studio.
| | 00:21 | You can go to this web site to download a copy.
| | 00:24 | Although it's not free, I like to use
Macrabbit's Espresso for working with web projects.
| | 00:28 | It has an excellent HTML and CSS
editor, as well as a great live preview for
| | 00:34 | seeing changes in files while you work on them.
| | 00:36 | Using a text editor is a very
personal choice, so use whatever you
| | 00:39 | are comfortable with.
| | 00:40 | While we are working on these files,
I'll be using Espresso, and what I usually
| | 00:45 | do is open up the exercise files,
open up Starting Points, and then find the
| | 00:50 | starting point for the particular movie I am
working with, and I make a copy onto the Desktop.
| | 00:57 | That way I leave the original untouched.
| | 00:59 | You'll see me dragging this folder into a copy
of Espresso, which will open it up as a project.
| | 01:06 | Anything I add or delete to this Project File
section gets added and deleted to this folder.
| | 01:12 | So this Project File section is
equivalent to the Finder folder.
| | 01:15 | You'll also see me drag
things into the Workspace.
| | 01:18 | The Workspace is a temporary area where
you can place things that you are going
| | 01:21 | to be working on more often.
| | 01:23 | So you'll see me sometimes drag the
codesnippets file which is in a separate
| | 01:26 | folder, in the Working Folder, onto
the Workspace, and you might see me
| | 01:30 | double-click on some of these other
files, like the index files, to bring it
| | 01:34 | into the Workspace.
| | 01:35 | You'll also see me open up a live preview.
| | 01:39 | A live preview is a preview
that updates as you edit the HTML.
| | 01:42 | So if I just click on the Preview icon,
you'll see that the Live preview will
| | 01:45 | come up right here as a
document in the Workspace.
| | 01:48 | I can click and drag that document and
put it on a separate window so that I can
| | 01:52 | see what I am doing while I am typing.
| | 01:54 | So here let me go ahead and change the
title to just Sample, and you can see that
| | 01:59 | up here that title has been modified.
And as I type it in, you'll see that the
| | 02:05 | live preview updates automatically.
| | 02:07 | If I change anything else on the
file, you'll see the changes happen
| | 02:12 | onscreen as I do them.
| | 02:14 | So this is really convenient, and
that's one of the reasons I like to use this
| | 02:17 | program when I am showing
how to do things in HTML.
| | 02:20 | I don't need to save the file and then
click over here and reload the document
| | 02:24 | in order to see my changes.
| | 02:26 | You can do the same thing by opening
up a Working Folder onto something like
| | 02:30 | TextWrangler, which will open
up all the files as a project.
| | 02:34 | But you may have to open up a separate
window in a browser. Move the files that
| | 02:41 | you want to preview onto
the browser window itself.
| | 02:48 | On some editors the changes don't
happen immediately, so you would have to make
| | 02:53 | a change on your file, save the
document, click on the browser, and then do a
| | 02:59 | refresh to see any changes onto the document.
| | 03:05 | So I would save, come over here,
refresh the page, and I would see the change.
| | 03:09 | So I just find Espresso just a
little bit convenient, especially when I am
| | 03:14 | showing you how to do
things in one of these videos.
| | 03:17 | Once you are done with the document,
you'll need to upload the documents to a
| | 03:20 | live server so that they will be
visible to people on the Internet.
| | 03:25 | Once you are ready to send the files to
your server, you'll need a way to upload
| | 03:28 | the files so that people can see them online.
| | 03:30 | You can use an FTP program like Cyberduck
which is available for free on a Mac or a PC.
| | 03:35 | You can download a copy on this
web site or on the Mac App Store.
| | 03:39 | Once you download and install Cyberduck,
you can open it up, and you'll need to
| | 03:44 | create a shortcut for your server.
| | 03:46 | I've already created one right here.
| | 03:48 | If you need to create a shortcut, just
hit this plus sign and type in the login
| | 03:52 | information for our server.
| | 03:58 | You'll need access information for your server.
| | 04:08 | Then you can save the login
information and double-click on your shortcut
| | 04:12 | to access your server.
| | 04:13 | Once you access your server, you can copy
files to the server to place them on the Internet.
| | 04:18 | I am going to select all
these files, drag them over here.
| | 04:22 | It will upload the files to the server,
and once it's finished, you can go to
| | 04:30 | a browser and access your project online.
| | 04:33 | You can also give this URL to
somebody else on the web and let them access
| | 04:37 | your project on the web.
| | 04:38 | Now that we have our
workspace set up, let's get started.
| | Collapse this transcript |
|
|
1. Understanding Form StructureCreating a form with the form element| 00:01 | Forms help the users communicate with your site.
| | 00:03 | Before we take a look at styling them
with CSS, let's check out the most basic
| | 00:07 | type of form element, the input field.
| | 00:09 | Some I'm going to open up the exercise
files and open up the Starting Points
| | 00:13 | folder, and inside the Starting Points
folder I am going open up the folder for
| | 00:16 | this chapter, and I am going to copy the
Working Folder onto our Desktop. And I am
| | 00:21 | going to drag this onto the Espresso
icon, and it will open it up as a project.
| | 00:26 | I am also going to need the
codesnippets.txt document.
| | 00:29 | I am going to click on that
and drag it into our Workspace.
| | 00:31 | Finally, I am going to double-click on
the index.html file. That will also bring it
| | 00:36 | into the Workspace. And then I am going
to move this over here, and I am going to
| | 00:40 | hit the Preview button.
| | 00:41 | If I hold down the Option key, it's
going to open it up automatically on a
| | 00:44 | separate window. And I am going to
position that on this side and arrange my
| | 00:48 | windows a little bit better, so
I can see what's going on here.
| | 00:51 | So the first thing we are going to
do is we are going to go into the
| | 00:53 | codesnippets.txt file and
move it all the way to the top.
| | 00:57 | We are going to take a look at
this very first piece of HTML code.
| | 01:00 | It's just a basic HTML5 page structure,
and I am going to copy this and put it in
| | 01:06 | our index.html file.
| | 01:07 | You'll notice that our live preview
right now is showing at least the title
| | 01:11 | of the document in this area, because it's
the only thing that we have on this page.
| | 01:16 | So I am going to also go into the
codesnippets and grab this piece of code right
| | 01:20 | here and paste it into our body
section. And as soon as we do that we see it's
| | 01:24 | created an input field
where users can type text.
| | 01:27 | And so an input field is designed
to allow the users to type in text.
| | 01:31 | Right now, the only way to submit this
text is with the Enter key, so this form
| | 01:34 | is not very useable.
| | 01:35 | There is no buttons to submit anything,
and so the form also doesn't really go
| | 01:41 | anywhere when we type in some text. If we
hit Enter, it doesn't really take us anywhere.
| | 01:45 | So the first thing we need to do now is
create an action for this form so that
| | 01:48 | it sends the information somewhere.
| | 01:50 | We are going to have Google search
process this form so our form will
| | 01:53 | eventually return search results.
| | 01:56 | So in order to do that, I am going to
go to the codesnippets and grab the next
| | 01:59 | piece of code, which will modify our
form field, so we'll click back on the
| | 02:04 | index.html. And I am just going to
replace this form piece of code right here,
| | 02:09 | and this action parameter on the form
element tells this form to submit to the
| | 02:15 | Google Search Results page.
| | 02:16 | So if I come over here and if I type in
a search and I hit the Enter key, you'll
| | 02:21 | see that it actually takes us to the
Google Search Results page, but it doesn't
| | 02:25 | actually return any search results
because we haven't really filled out any
| | 02:28 | additional information on this form to
tell Google what we want to search for.
| | 02:32 | So we are going go back
into the codesnippets file.
| | 02:35 | We are going to grab this next piece of
code here and paste it to replace this
| | 02:39 | input field. And I am going to hit the
Back button here, go back to our form. And
| | 02:44 | by adding this input field here with
the name attribute of Q, we are passing
| | 02:48 | along some information to the Google
Search Results page to return the search
| | 02:52 | results for what we type in into this input field.
| | 02:54 | So now when we type in a search in our
search field you'll see that it actually
| | 02:58 | returns some information in
the Google Search Results page.
| | 03:02 | So what the user types into the field
becomes the value of the variable that is
| | 03:06 | passed on to a Google search page, so
that it knows what returns to give you.
| | 03:11 | So forms pass information to the
processor via a set of name and value pairs, and
| | 03:16 | the value that we gave this name
is what we typed into the form.
| | 03:20 | You can see that Google wants this
variable called q to be passed so that it
| | 03:25 | knows how to process the form properly.
| | 03:27 | So there is many other types of input
fields. Most forms will have at least one
| | 03:30 | other type of input field called
the submit or submit input type.
| | 03:34 | So let's go grab the input variable
here from our codesnippets.txt file, and
| | 03:38 | we'll switch back here and we'll add
it after our input field here. And we'll
| | 03:43 | have to come back here, hit
the Back button, hit the Refresh.
| | 03:47 | It's not activating its Live view because it
actually took us to another page.
| | 03:51 | So if we refresh this page, you can
see that now we have a Submit button
| | 03:54 | and instead of hitting the Enter key,
we just type in a keyword there and hit
| | 03:59 | the Submit button and it will
actually let us do things with a button
| | 04:03 | instead of just the Enter key.
| | 04:05 | Forms can also have values that
get passed along automatically.
| | 04:08 | We can add a value to the submit type
that controls the text that shows up in the
| | 04:13 | little button right here.
| | 04:14 | So if we add a value to our Submit
input type, it will actually change the text
| | 04:19 | from submit to go, so whatever you
type in here becomes the value for this
| | 04:23 | button right here. And value fields are
important in forms because they allow
| | 04:28 | you to control the value of certain variables.
| | 04:30 | We can also pass along some hidden
information with a different kind of input
| | 04:34 | field that is hidden.
| | 04:35 | So I am going to go back into
codesnippets.txt, and I am going to copy this piece
| | 04:40 | of code, go back into our form, and
we could really paste this anywhere.
| | 04:44 | I am going to refresh this page.
| | 04:46 | We'll actually tell Google to return
results, but not using its Normal search
| | 04:51 | results, but using its Images search results.
| | 04:54 | We can pass information along to our
processor via the value field, and we
| | 05:00 | can even have different types of input fields
that pass different kinds of information in.
| | 05:05 | You've already seen a text field, a lot
of other different kinds of fields. The
| | 05:08 | hidden input field allows you to send
hidden information and with the hidden
| | 05:12 | input field we usually send a
variable name and also a value.
| | 05:16 | So, we've taken a look at the basics of
building a very simple form and the most
| | 05:21 | common type of form element, the input field.
| | 05:23 | Input field is super diverse and
sends most of the information that goes
| | 05:27 | along with the form.
| | Collapse this transcript |
| Adding labels and basic usability to your forms| 00:01 | Most input fields should have some kind
of label that tells users what they need
| | 00:04 | to type to fill out the form.
| | 00:06 | Although we can just simply type
some text next to the fields, there is a
| | 00:09 | special tag we can use called the
label tag, and using it has a few benefits.
| | 00:14 | With the label tag, the information
in the form becomes more meaningful and
| | 00:18 | easier to style with CSS.
| | 00:19 | We are going to open up the exercise
files folder and open up the Starting
| | 00:23 | Points folder, find the folder for this
chapter, and copy the Working Folder on
| | 00:28 | to our desktop. And then we are going to
drag that onto Espresso, which will open
| | 00:33 | it up as a project. And I am also going
to drag the codesnippets.txt file into
| | 00:38 | the Workspace, double-click on the
index file in the Project section.
| | 00:42 | That will also open it up in the Workspace.
| | 00:44 | Then I am going to Option+Click on
the Preview icon, and that will open up a
| | 00:49 | preview of this document.
| | 00:50 | Let's modify the hidden input field to
allow someone to turn on or off searching
| | 00:55 | for images with a check box.
| | 00:57 | Go to the codesnippets file and find a
section for this chapter, and I'm going to
| | 01:01 | copy this input field right here, go
back into our index file, and take this
| | 01:07 | hidden input field out and paste our new
version with it so you could see that
| | 01:12 | now we have a check box that allows
people to turn searching for images on and
| | 01:16 | off by clicking on it, and we have a
label next to the check box that let's
| | 01:21 | people know what this search is for.
| | 01:24 | Typing a label next to a field looks
fine, but it doesn't do a good job of
| | 01:27 | associating the label with the input field.
| | 01:29 | It could just as well belong to this
search box right here. Plus someone using
| | 01:34 | an assistive device might have problems
understanding which label goes with what input field.
| | 01:39 | Most of the time input field labels go
before the input field, but on radio or
| | 01:43 | check box input types, the labels are
always after the fields, so those can be
| | 01:47 | especially confusing without labels.
| | 01:50 | Let's go back into our codesnippets
file and grab the next piece of code, and
| | 01:54 | we'll go back to our index.html file, and
we will replace our form of code right here.
| | 01:59 | Using labels you can create a label
tag and then add a for attribute to the
| | 02:05 | label tag and an ID to the input
field. See that we've tied these things
| | 02:09 | together by adding a for attribute
here on the label and adding an ID to the
| | 02:14 | input field; that ties these two things together.
| | 02:17 | Having an additional tag around our
labels means that we can also style
| | 02:21 | them easily with CSS.
| | 02:23 | Adding a label and associating it with
the input field has the added bonus of
| | 02:27 | making the label activate the input field.
| | 02:30 | If we click on the Images label, we
can automatically activate the check box
| | 02:34 | without having to click
exactly on the check box.
| | 02:37 | That could be a real benefit, especially since
check boxes are sometimes a little bit tiny.
| | 02:41 | This is especially useful on iOS devices.
| | 02:44 | So let's open up the iOS Simulator.
| | 02:45 | We'll open up Safari.
| | 02:48 | When we open up Safari, we'll
take our copy of our index file--
| | 02:51 | I am going to make sure I save it first--
from our Projects file into Safari, and
| | 02:56 | it will pull up the document in there.
| | 02:58 | See that by default the document comes
up really tiny on mobile Safari, but I
| | 03:03 | can still click on the Images label
and easily activate the form element.
| | 03:07 | There are a lot of other fields that we
can use to help this form perform better
| | 03:11 | and provide other usability
features in some browsers,
| | 03:14 | so let's take a look.
| | 03:15 | I am going to quit the iOS Simulator.
| | 03:17 | I am going to go back to my
codesnippets file and copy the next version of our
| | 03:22 | form where we've added a lot
of other usability features.
| | 03:25 | So in our index file, we'll replace our
form fields with a new version that has
| | 03:30 | some additional features.
| | 03:33 | On some browsers, adding a title field like this
will bring up a tooltip pop-up after a second.
| | 03:38 | So if we come over here and we put our
cursor on top of the Search field, after
| | 03:41 | a second, you will see that this "Type
your search term here" will come up, which
| | 03:46 | is what we typed in into our title field here.
| | 03:48 | You can see we've changed the order so
that tapping the Tab will activate the
| | 03:52 | second field and then the first field.
| | 03:54 | Some browsers allow people to tab
through different fields, and this is
| | 03:58 | especially useful if layout is complex.
| | 04:00 | You can use the tab index
attribute to change the order in which tabs
| | 04:04 | activate the fields.
| | 04:05 | So right here we've changed it so
that tapping the Tab activates the second
| | 04:09 | field as opposed to the first field.
| | 04:11 | Now if I try this on this browser,
you'll see that it's not actually working,
| | 04:15 | and this version of Safari that Espresso is
using for a preview doesn't work that way.
| | 04:20 | I am going to copy the location of this
file, just by triple-clicking here and
| | 04:24 | selecting Copy, and I am going to
pull up the Chrome browser and paste the
| | 04:29 | location of the document. And you'll
see that if I hit the Tab key, my second
| | 04:33 | field, the Images check box, activates
before my first field, which is the Search.
| | 04:39 | So it doesn't work on all browsers, but it's
another usability feature that can be useful.
| | 04:43 | Adding the label, the title, and tab
index attributes can go a long way
| | 04:47 | towards providing enhanced usability
in your documents, and also has some
| | 04:51 | really handy benefits, like making it
easier to choose items and also easier
| | 04:56 | to select the items with CSS.
| | Collapse this transcript |
| Normalizing form elements between browsers| 00:01 | There are many types of form elements,
but unfortunately there is no way to make
| | 00:04 | them look identical on all browsers.
| | 00:06 | I want to take a look at the different
types of fields and give you a few tips
| | 00:09 | on how to make them look alike.
| | 00:11 | So we'll open up the exercise files,
then open up the Starting Points folder and
| | 00:15 | the folder for this chapter.
| | 00:17 | I am going to copy this
Working Folder onto my Desktop.
| | 00:20 | Then I'll drag this onto the Espresso
application, and I also want to copy the
| | 00:25 | codesnippets.txt files into the
Workspace and double-click on the index file
| | 00:30 | also to bring it into the Workspace.
And I'll move this over here, hold down the
| | 00:34 | Option key, and click on Preview.
| | 00:35 | That will pull up a live view right here.
| | 00:37 | So there is a variety of text fields,
like the input type text and input type
| | 00:42 | passwords, which allow users to type in
text in text fields. Input type password
| | 00:47 | just hides all the input.
| | 00:48 | HTML5 introduces different versions of
these elements, like URL and email input
| | 00:54 | types, but they pretty
much display the same way.
| | 00:56 | As a matter of fact, if you do not
specify a type of input, it will by default
| | 01:01 | show you an input type text field.
| | 01:03 | There is also the textarea, which is like
the input field, but lets users type in
| | 01:09 | longer pieces of text.
| | 01:11 | Unfortunately, these fields display
differently depending on the browser
| | 01:15 | platform and version that
you are using to see them.
| | 01:17 | You can use a tool like Adobe
BrowserLabs at browserlab.adobe.com to take a look
| | 01:24 | at how they look on different platforms.
| | 01:25 | You will have to get an AdobeID account if
you don't already have one. I have mine here,
| | 01:30 | so I am going to type in my password.
| | 01:31 | Once you sign in, you will be able
to type in the URL of your web site.
| | 01:38 | Now I have already loaded this page
onto a server so we can take a look at how
| | 01:42 | this form looks on different platforms.
| | 01:43 | So I'll type in the URL to the form
and BrowserLab will pull up the form
| | 01:48 | in multiple browsers.
| | 01:49 | You can see right here that we are
looking at this on Internet Explorer 7 in
| | 01:54 | Windows, but I can choose a
different browser from this pop-up list.
| | 01:57 | I can choose Safari and
any of these other browsers.
| | 02:00 | BrowserLab also lets you create
groups of browsers for different types of
| | 02:04 | testing so that you can customize
which browsers come up on this list.
| | 02:08 | Now although BrowserLabs also allows
you to see a 2-up view side by side so
| | 02:13 | that you can compare two different
browsers, I've taken the time to put this
| | 02:16 | into a single page so you could see all of the
different platforms and how they display this page.
| | 02:21 | So you can see even different
versions of Internet Explorer display
| | 02:25 | things differently,
| | 02:26 | so with different spacing between
things and different styles or different
| | 02:30 | elements. You could see also that
Chrome Windows and Safari Mac have
| | 02:34 | different styles for the buttons and also
different spacings for different types of fields.
| | 02:40 | Now there is no way of making all
these look identical, but there is a lot of
| | 02:43 | libraries that try to handle the work
of making them look similar for you.
| | 02:48 | One of those libraries is a
template system called HTML5 Boilerplate.
| | 02:52 | It does a lot more than just trying to
make all the form elements look the same.
| | 02:55 | And you should take a look at it, and
it does a lot of other things like
| | 02:59 | automatically loading modernizr, jQuery,
and other libraries, so it's really more
| | 03:03 | of a template system rather
than just a reset template.
| | 03:06 | We also have HTML5 Reset, which is a
little bit simpler template, and it also
| | 03:12 | loads jQuery and other libraries.
And it does some of the resetting for you, but
| | 03:16 | it's really for bigger projects
where you want to start off with a set of
| | 03:19 | templates with a number of
different files in the template.
| | 03:22 | If you want a simpler version, you can
use something called Normalize.css, which
| | 03:27 | is really designed to just normalize
the styles between different platforms.
| | 03:31 | It doesn't have a lot of the features as
some of the other template systems, but
| | 03:36 | it'll work really well for
standardizing how form elements look.
| | 03:39 | So you want to go down to the bottom and
download the file in one of these formats.
| | 03:43 | Once the file downloads, you want to
open up the folder with the file and you
| | 03:48 | want to copy the file called
normalize.css into your current Working Folder.
| | 03:53 | This is my exercise files, and I
don't want to copy it in there.
| | 03:56 | I want to copy it into the same folder as the
index.html file that I will be working with.
| | 04:01 | Espresso just lets you drag that
file into the project files, and it will
| | 04:05 | actually make a copy of it and
put it in the Working Folder.
| | 04:08 | If you are not using Espresso, you can
just drag it onto whichever folder you
| | 04:12 | have your index.html file.
You can see that I copied it right there.
| | 04:20 | So once you've added the file into your
Working Folder, you want to include the
| | 04:24 | file into your current form.
| | 04:28 | And as soon as I made the call to
the normalize.css file, you can see that
| | 04:33 | my instant preview updated some things
about the form, and you can immediately
| | 04:37 | see that all the fonts are now a little
bit different than the default font, and
| | 04:40 | that's one of the things that normalize
does. Get rid of this type because we
| | 04:44 | don't need it in HTML5.
| | 04:46 | You could go back to
BrowserLabs and see how this all works in
| | 04:48 | different browsers.
| | 04:49 | But I've already put all those
together in a single file for you.
| | 04:53 | So you could see that the
fonts look a lot closer together.
| | 04:56 | There are still a few other
discrepancies, but it's looking a little bit closer
| | 05:00 | to what it should be.
| | 05:02 | Just remember, it's never going to be perfect.
| | 05:04 | There are a few more things that
we could do to improve on this,
| | 05:07 | mainly making the button looks a little
better, and also just getting rid of some
| | 05:11 | of the styling of the buttons,
so that we can start from scratch.
| | 05:13 | So I am going to switch back into
Espresso here, and I am going to go to my
| | 05:18 | codesnippets file, and I'm going to copy
this code from the codesnippets file to
| | 05:24 | show you a few more improvements.
| | 05:25 | So I am just going to add that to
the head section of my document.
| | 05:29 | You can see that it collapsed some
of the spaces a little bit better, and
| | 05:32 | we really want that.
| | 05:33 | We really want to start with clean spacing.
| | 05:35 | So I am going to go through what some
of these things do, and the first thing I
| | 05:38 | am doing is setting every form
element to have no background whatsoever.
| | 05:44 | I am also using the type selectors
to choose every type of input field,
| | 05:49 | including the type=password, type=
text, and type=submit. If you had other
| | 05:53 | types of input fields, you want to
add that to this list. And we've also
| | 05:57 | included the textarea and the button
field, and one of the first things that
| | 06:00 | we did is told the browsers that
support it to not show any special
| | 06:05 | appearance in their buttons.
| | 06:06 | So normally, these buttons would
display with a little round edges on Safari,
| | 06:12 | but we've told it not to do that.
| | 06:13 | So let me just go ahead and take off this.
| | 06:15 | So you could see how to choose, for
example, this right here is looking like a
| | 06:19 | pop-up list with little round edges.
The button has this little border to it.
| | 06:24 | So by using the webkit-appearance
attribute we have taken off some of the
| | 06:28 | defaults styling that WebKit and
Mozilla--which are Chrome, Safari, and Firefox--
| | 06:34 | would use when
displaying some of these elements.
| | 06:37 | So if we take those out, you could
see a little bit of a change in here, so
| | 06:40 | the buttons look a little different
right now. And in different browsers, as you
| | 06:44 | saw in the other window, the buttons
would display with different styles, so
| | 06:48 | that adding the -webkit-appearance
lets you override how those styles look on
| | 06:52 | different browsers.
| | 06:53 | We've also, instead of having these
different kinds of borders that you see on
| | 06:57 | different buttons, for example, the
kind of double border that has a little bit
| | 07:00 | of an embossed look, we've taken that
out by specifying a border that's more
| | 07:04 | consistent, one pixel solid
and whatever color we want.
| | 07:08 | We have reset the background to none,
and also we are setting the roudness of
| | 07:14 | some of the edges to nothing.
| | 07:16 | We can overwrite those if we want to by
clearing all these out. It will give us more
| | 07:20 | consistent form elements.
| | 07:21 | So let's go back into Fireworks and
we'll take a look at this version of the
| | 07:25 | form with all the adjustments that we
have made, and mainly here you can see that
| | 07:29 | the buttons are now more
consistent across all browsers.
| | 07:33 | Internet Explorer 6 still does not do a
perfect job with that, but all the other
| | 07:37 | browsers now have more consistent
buttons, which is really crucial when you are
| | 07:41 | trying to style things to make them
look as close as possible to each other.
| | 07:44 | With just a few changes, we've
managed to make these forms look alike in
| | 07:48 | different browsers, but just remember
that although you can come close, they
| | 07:52 | will never look perfectly the same.
Make sure that you are previewing your
| | 07:55 | projects in a tool like Adobe
BrowserLabs and or as many browsers and
| | 07:59 | platforms as you can.
| | Collapse this transcript |
|
|
2. Styling Basic ElementsCreating a background with textured gradients| 00:00 | Learning how to style form elements is
pretty much like styling anything else.
| | 00:04 | So in order to learn how to deal with
form elements we'll get started by working
| | 00:07 | on styling backgrounds.
| | 00:09 | So open up the exercise files folder
and open up the Starting Points and find the
| | 00:14 | folder for this video and copy the
Working Folder onto your desktop. And I am
| | 00:20 | going to drag the Working Folder onto Espresso.
| | 00:23 | I'll also need the snippets.txt file,
so I am going to copy that by dragging
| | 00:28 | it into the Workspace.
| | 00:29 | I am going to double-click on the
index.html file to also bring it into the
| | 00:34 | Workspace, and I'll move my window and
hold down the Option key and click on the
| | 00:39 | Preview icon to open a live preview.
| | 00:43 | The most obvious thing we can do to
a background is to change its color.
| | 00:46 | We can do that easily by using a
number of different color models.
| | 00:49 | So I already have a style tag in my
document, and I am just going to type in code
| | 00:54 | to change the body section of my
document and type in a background element, and
| | 01:01 | see that Espresso gives you a lot of
defaults there, but all I really need to do
| | 01:05 | is just change the background color.
| | 01:08 | And so you could see that it's really
easy to change the background color; all
| | 01:11 | you need to do is specify a color
in one of several different modes.
| | 01:15 | You can use hexadecimal or RGB, and
those are the most common and best-
| | 01:20 | supported modes out there.
| | 01:21 | You can specify colors in Hexadecimal
by using three sets of numbers like this.
| | 01:26 | Every one of these numbers actually doubles,
| | 01:29 | so this could also be written like this.
And every pair of numbers stands for a
| | 01:34 | number between 0 and 255, so FF
would be 255 and 00 would be 00.
| | 01:41 | This is the basic same numbering system,
and it sometimes a little bit difficult
| | 01:46 | to get your head around it, and so I
usually use another tool to kind of tell me
| | 01:50 | what these colors are supposed to be.
| | 01:52 | So if you want to check out some cool
color combinations or just want to create
| | 01:56 | colors from an existing image, you
should check out Adobe Kuler, which is
| | 02:00 | available at kuler.adobe.com, and lets
you create colors from an existing image.
| | 02:05 | So you can load up an image that you
want to base your web site on and it'll
| | 02:10 | automatically pick colors for you based
on that. You could get any of the different
| | 02:13 | color modes from a list of colors
underneath each color, and we can even modify
| | 02:19 | them right here, or by
clicking on these little icons.
| | 02:22 | You can choose different color rules,
| | 02:27 | so a monochromatic rule, to make sure
that as you switch the colors they stay
| | 02:31 | within the same family, and other
kinds of rules for related colors.
| | 02:37 | If you go to Themes, you can see that
there is a lot of themes that people
| | 02:41 | have already created.
| | 02:42 | So, if you are stuck and you know you
want to base a color on a specific, you
| | 02:47 | know, type of color, like greens or
blues, you can start with one of these
| | 02:50 | predefined color modes and pick your
colors from there and copy them and paste
| | 02:55 | them into your HTML document.
| | 02:57 | Kuler is also available as an Android
app, which will soon be out on the iPad.
| | 03:02 | Of course Fireworks and Photoshop
will also let you pick colors and let
| | 03:06 | you copy and paste the hexadecimal
values or the RGB values that you'll
| | 03:09 | need for your project.
| | 03:11 | If you have an Android tablet, you might
want to check out Adobe Kuler for your
| | 03:14 | device. Having a second screen is
sometimes a convenient way to brainstorm
| | 03:18 | your color choices.
| | 03:20 | You can take a look at color palettes
from the Kuler network or build your
| | 03:25 | own Kuler patterns.
| | 03:29 | When building a theme you can take a
look at the individual colors and quickly
| | 03:34 | modify a color by dragging
these little color wells.
| | 03:42 | Then you can get the color codes you
need by moving this slider up and copying
| | 03:47 | the colors into your web layouts.
| | 03:50 | Although the program is not available
for iOS devices as of this video, it will
| | 03:54 | be available in the future.
| | 03:55 | Another tool that I love on the Mac is
a small app called Hues that's available
| | 04:01 | from the App Store for $2.99 and
lets you specify colors in any color mode.
| | 04:06 | You can see the values right here. And
if you specify an opacity, it also gives
| | 04:12 | you color modes that are available and
some of the new color models like the
| | 04:16 | rgba color model and the hsla color model.
| | 04:19 | Those models will only be
available to you on newer browsers.
| | 04:24 | Most element tools also have color
pickers that you could use to modify
| | 04:28 | the colors as well.
| | 04:30 | One of the most common things that you
do to form elements is create a gradient.
| | 04:33 | The most common and easiest type
of gradient is the linear gradient,
| | 04:37 | so I am going to go to my
codesnippets file and select this version of our
| | 04:43 | body style and go back into our index file
and replace the one that we've placed there,
| | 04:47 | and you'll see that we've actually
added a bunch of different things with this
| | 04:51 | particular gradient.
| | 04:52 | We still have a basic background color.
And whenever you specify gradients you
| | 04:57 | should always use this notation to
make sure that older browsers that don't
| | 05:01 | support some of these new features can
see at least a basic background color,
| | 05:06 | which will just look like that.
| | 05:09 | In addition to that, we can create a gradient.
| | 05:11 | Right now you can see that I
have different browser prefixes for
| | 05:14 | different browsers.
| | 05:15 | You can see that I have the
gradients specified in multiple versions.
| | 05:19 | So I have a version for WebKit, which
would be Safari; Mozilla which will be
| | 05:23 | Firefox, Opera, Microsoft; and then
what should become the standard way of
| | 05:29 | specifying gradients without
browser prefixes, right here.
| | 05:32 | And then I have a little hack for
older versions or Microsoft versions that
| | 05:39 | don't support any of these linear gradients.
| | 05:41 | Right now, the only one that's
actually affecting our document is this one
| | 05:45 | right here, because this particular
version of the live preview is a Safari- or
| | 05:50 | WebKit-based preview.
| | 05:52 | So if I just show you this line of
code--so you can see that this is a very
| | 05:57 | slight gradient. If I scroll down, you'll
see it getting a little bit darker, just
| | 06:00 | because I want a very subtle version of
this gradient to be on our background.
| | 06:06 | In addition to that, what I have also
done here is specified a background texture
| | 06:10 | to appear on top of our gradient.
| | 06:12 | And one of the cool things that you
could do in newer browsers is be able to
| | 06:16 | specify multiple gradients to
appear on top of each other.
| | 06:19 | So by adding this other call to a file
that we've specked right here, we can add
| | 06:25 | a gradient on top of our gradient.
| | 06:26 | That's really convenient because I can
add this texture pattern to a gradient
| | 06:30 | that has any color in it.
| | 06:32 | So if I specify a different color, I
can use the same background image to be a
| | 06:37 | texture on top of the gradient, as
opposed to trying to create, you know,
| | 06:41 | different gradient patterns for different files.
| | 06:44 | So this is a really cool trick.
| | 06:46 | Multiple gradients will give you the
ability to put gradients on top of each
| | 06:49 | other, and you can use transparency to
build gradients on top of other gradients.
| | 06:55 | Usually when I program these kind of
background elements, I start off by creating
| | 07:00 | the background for the particular
browser that I am working on, and then I add
| | 07:04 | all these other browser-prefix versions.
| | 07:07 | Making gradients work in multiple
browsers means you'll have to create multiple
| | 07:11 | versions of the gradients
with different browser prefixes.
| | 07:14 | And that can be a little bit of a pain,
so you can use tools like this Ultimate
| | 07:18 | CSS Gradient Generator, available at
colorzilla.com/gradient-editor, that
| | 07:25 | simplifies the process of creating
gradients by giving you a bunch of different
| | 07:28 | little swatches where you can pick
different gradients, and it writes the code
| | 07:33 | out for you in multiple
versions with all the browser prefixes.
| | 07:37 | You can choose different types of
gradients, like radial or vertical or
| | 07:41 | horizontal or diagonal gradients.
| | 07:43 | You can even try to add multiple
gradient support in IE version 9.0, which
| | 07:48 | doesn't normally support multiple gradients.
| | 07:51 | This is probably the best tool if you
are planning on working with gradients.
| | 07:55 | If you are trying to do other elements
that are not gradients, you might want to
| | 07:59 | check out CSS3please.com, which lets you
specify gradients, and it will write the
| | 08:04 | code with the multiple browser versions.
| | 08:06 | And in addition to that, you could see
that it provides the prefixes for other
| | 08:11 | things like border radius, web
shadows, and other CSS3 elements.
| | 08:16 | Creating backgrounds, especially if you
use multiple layers, isn't just good for
| | 08:20 | the body of your document.
| | 08:21 | You can use the same techniques to
handle any kind of form elements, including
| | 08:25 | input fields, buttons, and this is
definitely something you want to take time to
| | 08:29 | play around and be comfortable with.
| | 08:31 | To learn about general CSS styling,
don't forget to check out James Williamson's
| | 08:36 | excellent CSS: Core Concepts,
available from the lynda.com Library.
| | Collapse this transcript |
| Using a seamless background with radial glow| 00:01 | In addition to using gradients, you
can also put a background image on any
| | 00:05 | element, and since you can also use
multiple backgrounds, you can combine
| | 00:09 | background images with gradients
to add some subtle lighting effects.
| | 00:12 | So let's just check it out.
| | 00:13 | Open up the exercise files, open up
the Starting Points, find the starting
| | 00:17 | points for this chapter, and copy
the Working Folder onto your Desktop.
| | 00:22 | Then I am going to drag that on to
my copy of Espresso and open up the
| | 00:27 | codesnippets by dragging it into the Workspace.
| | 00:30 | Double-click on my index file to
drag it also into the Workspace.
| | 00:33 | I will move that over there.
| | 00:35 | Hold on the Option key and click on Preview.
| | 00:37 | It will give me live preview, and now I
can open up my codesnippets.txt file and
| | 00:42 | I'll find the section for this movie,
and I'll copy this piece of code.
| | 00:46 | You can see that I already have a
texture here, and I am going to go back
| | 00:49 | into my index file.
| | 00:50 | I have to create a rule for the body,
and I'll paste my code right there.
| | 00:56 | All right, so as you can see here,
I've specified a background image just by
| | 01:00 | using the background
attribute and specifying a URL.
| | 01:03 | So without all this, this gives you just a
repeating background image that's a wooden texture.
| | 01:08 | This is actually a picture of the floor
in my house that I took, and by adding
| | 01:13 | a background gradient, I am able to layer a
slight lighting effect on top of my image.
| | 01:18 | You can use this if you are not
using a background that repeats evenly.
| | 01:23 | You can use this to maybe fade out an
image or do other kinds of lighting effects.
| | 01:27 | It's just a very, very basic, simple gradient.
| | 01:30 | Radial gradients are a little bit
harder than linear gradients, so let's take a
| | 01:34 | look what we have done here.
| | 01:35 | You have got a definition
for a -webkit-radial-gradient.
| | 01:38 | And instead of using a hard color, we
can use a color that has transparency by
| | 01:44 | using an rgba color value here.
| | 01:46 | So this particular color value
happens to be white 255, 255, 255 is white.
| | 01:51 | 0, 0, 0 would be black.
| | 01:54 | And we are specifying it to
be 20% white on the outset.
| | 01:59 | Remember that radial gradients are
essentially a blend between two circles, and
| | 02:04 | the simple gradient is done by
just specifying two different colors.
| | 02:08 | By default, they blend from the center.
| | 02:10 | You can also specify a position here,
so let me just modify this 0.2 to be 0.5.
| | 02:15 | You can see that now it's a stronger gradient.
| | 02:17 | So by changing this with the number
from one to show 100% opacity on the inside
| | 02:23 | version of the circle to 0, so now
it's completely transparent--of course it
| | 02:26 | doesn't show-- we can specify the
strength of the gradient, so any number that
| | 02:31 | we type in here will make the
gradient lighter or more opaque.
| | 02:35 | So I'll bring it back 0.2.
| | 02:36 | This is the other circle right here,
so this circle goes to no color, and
| | 02:41 | that's the outside circle.
| | 02:42 | So we are talking about essentially two
circles, and I am blending between them.
| | 02:46 | And so if we specify a number here, you
could see that the second circle is 50%
| | 02:50 | strength, which actually shows up
because we specified a height here, and
| | 02:54 | eventually it bumps into the background.
| | 02:57 | So this is how you would do a sort of a fade-
in into a circle, if you wanted to do that.
| | 03:01 | And the other values right next to
each color specify the position of the
| | 03:06 | gradient, so you can make the gradient be
sort of tighter by changing this number.
| | 03:11 | So this is essentially not
exactly a gradient, just a circle.
| | 03:14 | So I could see a very slight variation there.
| | 03:17 | We will bring this back up to 60.
| | 03:20 | And then if you wanted to start with a
little smaller circle, just do a 20 there
| | 03:23 | and you could see that it
changes the color of the gradient.
| | 03:26 | So first you specify a color.
| | 03:28 | If you use a transparent color, you
can have a gradient blend into the
| | 03:31 | background, and you then specify a
position for the gradient, tell it not to
| | 03:35 | repeat, because I don't want to repeat,
and then as a backup, I am using the
| | 03:39 | comma separator here to specify that I
also want the background as a secondary
| | 03:43 | element behind the gradient that I have.
| | 03:46 | Because this gradient is transparent,
I can see the background behind it.
| | 03:49 | That's our final background element.
| | 03:51 | It works pretty well, even in older browsers.
| | 03:53 | Your best bet is to try to find a
background that is seamless or repeats nicely
| | 03:57 | and it looks like it goes on forever.
| | 03:58 | So this particular
background is a seamless background.
| | 04:01 | No matter what size I make my browser, you
can see that it just repeats over and over.
| | 04:05 | There are a lot of different web sites
that you can find seamless patterns or
| | 04:09 | just generic patterns.
| | 04:10 | In my case I took a photo of my floor.
| | 04:11 | You can do the same thing.
| | 04:13 | It's a little tough with just regular
textures, but this is a great web site,
| | 04:15 | texturise.com with an s, and you could
see that they have a lot of different
| | 04:20 | kinds of gradients and
patterns that you could use.
| | 04:24 | And if you click on Seamless, you can make
sure that those patterns will repeat evenly.
| | 04:29 | Another tool that I really
like is a tool called Repper.
| | 04:32 | You can go to repperpatterns.com,
and it's a tool for creating patterns.
| | 04:38 | And this is especially good for when
you take a picture of something and you
| | 04:41 | want to combine it into a
seamless pattern that doesn't repeat.
| | 04:44 | It's a little bit difficult because
there is usually a lot of shading variations
| | 04:48 | within the patterns that
make them not repeat evenly.
| | 04:51 | This is a program that you buy, so
this is $43, a little pricy, but you could
| | 04:56 | check out the demo to see what it does.
| | 04:59 | In the case of my wooden background,
that's what I did was use this tool to make
| | 05:04 | sure that I could take a picture of a
background that didn't repeat very well
| | 05:07 | and played it around with where I
position this selection right here, to create
| | 05:12 | a version of the
background that repeated very well.
| | 05:14 | And you can go into tiling here and
choose different ways that the program tiles.
| | 05:19 | There are different ways of
combining the patterns so that they tile with
| | 05:22 | different options or choose backgrounds
that don't necessarily tile but combine
| | 05:27 | in different ways to give you a
lot of patterns for you projects.
| | 05:30 | So once you choose one of these, then
you can actually apply colors to it, so
| | 05:34 | you could apply different faded colors
or adjust the settings for contrast and
| | 05:40 | then once you are done with your pattern,
you can hit Export, and it will save a
| | 05:42 | tile that is already optimized for the
web as a JPEG or a PNG, and you could use
| | 05:47 | that in your projects.
| | 05:48 | Of course, the demo gives
you a low-quality version.
| | 05:50 | I have enjoyed using it quite a bit.
| | 05:52 | Just remember, too, that if you need
help creating gradients, use the Ultimate
| | 05:56 | CSS Gradient Generator.
| | 05:57 | That gives you a lot of options on
the different types of gradients and
| | 06:00 | automatically writes the code for you in
different formats using different color
| | 06:05 | modes, and creating all the
prefixes for all the different browsers.
| | 06:09 | Sometimes it's just not possible to
create backgrounds that are seamless, and
| | 06:12 | you want to be able to use any kind of
pattern that you have from either photo
| | 06:16 | or a background image, and this
particular trick of fading out your background
| | 06:21 | and being able to control the
background with a gradient allows you to fade
| | 06:24 | things out and blend them into an
existing color so that when people resize
| | 06:28 | their browsers they will also see a
pattern in your main area and be able to get
| | 06:32 | a good background element, and be able
to have a good experience, even with a
| | 06:36 | background that is not seamless.
| | Collapse this transcript |
| Using custom fonts| 00:00 | It's really exciting that you can
finally use custom fonts not just on forms but
| | 00:04 | on any web project.
| | 00:06 | There is a couple of issues that you
need to be aware of when using custom
| | 00:08 | fonts, so we are going to review those
and see how you can be ready to use them
| | 00:11 | now on your projects.
| | 00:13 | So we are going to open up the
exercise files, open up the Starting Points
| | 00:16 | folder, find a folder for this video,
and copy the Working Folder onto our
| | 00:21 | Desktop, holding down the Option key
and dragging that so it makes a copy.
| | 00:24 | Then I'll drag that into Espresso, and I will
copy the codesnippets.txt file into my Workspace,
| | 00:32 | double-click on the index.html to
also bring it up into our Workspace, and
| | 00:36 | finally I will Option+
Click on this Preview icon.
| | 00:39 | It will pull up a live preview
so we could see what's going on.
| | 00:42 | This is really simple page.
| | 00:44 | It just has two custom classes, and
right now it doesn't have any styles.
| | 00:48 | The ability to use custom
fonts is not a CSS3 feature.
| | 00:51 | It has been around for a quite a while.
And technically it's really easy to use.
| | 00:56 | You simply create a special rule that
defines what the font name is going to be,
| | 01:00 | called the @font-face rule.
| | 01:02 | So we could do that by just simply
creating a style section, typing in the rule
| | 01:06 | that defines what this
font is supposed to be called.
| | 01:09 | So @font-face and we create a font-family,
and you call the font-family whatever you want.
| | 01:15 | Then you specify the location of
where this font is in relationship to this
| | 01:20 | document, so you just use the url
attribute here and you would just say my font
| | 01:24 | is in a TrueType file, and then you
specify that this particular font is in a
| | 01:30 | format that is TrueType. And whenever you
want to use this font, you theoretically
| | 01:34 | can just, say, add one of the your custom classes.
| | 01:37 | You can make a custom class call here
and just use the font-family to specify
| | 01:42 | that this particular element
is going to be using somefont.
| | 01:45 | We don't really have a font called
somefont that's TrueType, so this is not working.
| | 01:49 | This is how easy using custom fonts should be.
| | 01:51 | Unfortunately, things aren't perfect,
and there are number of things that you
| | 01:54 | will need to address when using custom fonts.
| | 01:56 | First is licensing.
| | 01:58 | If you want to use a font online, even
one that you've already purchased before,
| | 02:02 | you have to make sure the
font is licensed for online usage.
| | 02:05 | The other issue is that different
browsers and different platforms require that
| | 02:09 | the font be in different formats.
| | 02:10 | For example, versions of Mobile
Safari before 4.2 require that the font be
| | 02:16 | stored in a format called SVG,
which is really not very common.
| | 02:20 | To make sure you are compatible as
possible, you need to save the font in
| | 02:23 | multiple formats, which include TTF,
EOT, SVG, and WOFF formats, for different
| | 02:29 | browsers and different platforms.
| | 02:31 | And that makes the call to your custom
fonts a lot more complicated because you
| | 02:35 | have to call different versions of the
fonts for different machines, and you
| | 02:38 | even have to specify different
weights of the fonts in their own calls.
| | 02:42 | So the calls to fonts are usually quite complex.
| | 02:45 | Thankfully, there are a couple of tools
that you can use to make life easier for
| | 02:48 | you, and one of my favorites is
something called Font Squirrel.
| | 02:52 | So Font Squirrel has a bunch of fonts that
are available for free for commercial use.
| | 02:57 | You can take a look at all the
fonts that they have right here.
| | 02:59 | You can take a look at them by different styles.
| | 03:01 | You can also use a web site called
Fontspring that has a few other fonts that
| | 03:05 | are available for purchase.
| | 03:07 | Once you purchase or download these
fonts from either of these two sites, you
| | 03:11 | will receive a folder that has all the
different styles that you will need for
| | 03:15 | your project, as well as the fonts in
all of the different formats. And you
| | 03:18 | simply just add the style sheet to your
project and use the font as you normally would.
| | 03:22 | So we will go back into Font Squirrel.
| | 03:24 | We will look for font called orbitron,
and here is the font we are going to use.
| | 03:28 | So let's click on it to
take a look at the samples.
| | 03:31 | It looks pretty good.
| | 03:33 | It has different weights.
| | 03:34 | Font Squirrel also provides
something called @font-face kit.
| | 03:38 | Instead of giving you the font in
just one format, like the OTF format that
| | 03:42 | you can download here, you can
actually click on this and it will let you
| | 03:46 | specify which formats do you want to
get the font in. And by default it's
| | 03:50 | clicking on all the formats I just
mentioned, which are required for being as
| | 03:53 | compatible as possible.
| | 03:54 | We can also just choose different
subsets of the fonts here, and once you have
| | 03:59 | got the font that you like, you
could just hit Download @font-face Kit.
| | 04:02 | I am going to go into the Downloads
folder. And if I open up that file, I see
| | 04:08 | that it downloaded the font in multiple
formats--every format that we'll need to
| | 04:13 | be as compatible as possible.
| | 04:14 | It also downloaded a demo, which you can open
up in a browser. Check out how the font looks.
| | 04:19 | That looks pretty good.
| | 04:21 | And it even added a stylesheet.css
file that we can call into our project to
| | 04:26 | automatically create all the different
rules that we will need for using this font.
| | 04:31 | So what I am going to do is I am going
to move all the contents of this folder
| | 04:35 | into the Working Folder.
| | 04:36 | We can also do that by dragging the
files into the Project Files within
| | 04:44 | Espresso. And I am going to rename my style sheet
to something related to the name orbitron.css.
| | 04:51 | You will see that Espresso picked up
all the files, and it showing it into the
| | 04:55 | Project Files area. And I
can take a look at that CSS.
| | 04:59 | If we close up the tools here, you
could see that it's essentially written out
| | 05:03 | all the font-face rules in
all their different versions.
| | 05:05 | Notice that if you were doing this
manually, it would just take you a long time
| | 05:09 | to type all that stuff in,
| | 05:10 | so this has already done the job of
creating the @font-face rules, and now all
| | 05:14 | you have to do is, when you want to use
one of these font-face rules, you could
| | 05:18 | just use them as you normally would.
| | 05:20 | So I am going to go to my codesnippets
file, and I will grab this copy of this
| | 05:25 | call to the style sheet, and I will place
it in my document so that it loads the
| | 05:28 | style sheet from that file.
| | 05:30 | Then I am going to go back here and
grab my style definition and replace this
| | 05:34 | demo style definition that I have done.
| | 05:36 | So as you can see here, I have loaded
up two different style rules: one right
| | 05:40 | now for this font that we've loaded
from our external style sheet and then
| | 05:43 | another one that we will load from
another place. And as soon as I added this
| | 05:47 | definition, you see that my font over here
has already changed to the new Orbitron font.
| | 05:51 | So once you download the @font-face kit,
it's as easy as looking into the CSS,
| | 05:55 | make sure the fonts are in the right
place--you see all the different versions of
| | 05:59 | them right here--and then just
using them as you would any other font.
| | 06:02 | Make sure that you do specify an
alternative, just in case this font, for
| | 06:06 | whatever reason, doesn't
load properly on the machine.
| | 06:09 | So you should always specify a
comma and then something that is an
| | 06:12 | alternative to this font.
| | 06:14 | Font Squirrel also has a really cool tool
| | 06:17 | if you already have a font that you own
and you want to convert it into all the
| | 06:21 | different formats, plus you want to
have Font Squirrel automatically write all
| | 06:25 | of these rules for you. It's called
the @font-face Generator and you can find
| | 06:29 | that also on their web site.
| | 06:30 | You can click on this link to the
@font-face Generator, and in here you can
| | 06:34 | actually upload you own fonts and it
will convert the fonts to all the relevant
| | 06:38 | formats and automatically create
the style sheet with all the different
| | 06:42 | @font-face rules for you.
| | 06:44 | So this is great for if you have
purchased a font, you know that you have the
| | 06:47 | license for it, and you want to add
that to your site, but you don't want to
| | 06:50 | have to write all those rules.
This works really well.
| | 06:52 | Now the other option is to use a font service.
| | 06:55 | Using this means that you won't
download the fonts on your machine; the fonts
| | 06:59 | will be hosted on a separate server.
| | 07:01 | The most famous of those two
services are Typekit, which you can go to at
| | 07:05 | typekit.com, recently purchased by
Adobe, which is pretty interesting.
| | 07:09 | Adobe has a super-large library of
amazing fonts, and so you should be able to
| | 07:13 | see those and download those.
| | 07:14 | Now they are probably a little pricier,
since the other ones are free, but if
| | 07:18 | you are looking for specific fonts, they are
probably going to have the largest library available.
| | 07:22 | The other place where you can use a service is
Google Web Fonts, and this is also free service.
| | 07:27 | So with Google Web Fonts, you can simply
just choose a font and then you will be
| | 07:31 | able to generate a link to the font file,
and when your web app pulls up, you can
| | 07:36 | simply just specify the font-family
as you normally would, without having to
| | 07:41 | worry about downloading the fonts and
putting them in the folder and or worrying
| | 07:44 | about creating the different font-face rules.
| | 07:46 | So you could hit Start choosing fonts
from this site, and right now they have
| | 07:49 | 302 families, and they are pretty good.
| | 07:51 | They have a large selection already of a
lot of different types of fonts. And so
| | 07:55 | we'll do the search for a font
called convergence, and there it is.
| | 07:59 | Take a look at different font samples.
| | 08:01 | If you want to, you could see it as
paragraphs, single word--in case you are trying
| | 08:05 | to specify a particular word that you
are trying to type in and see what the
| | 08:08 | font looks like--or you could
just simply go to Quick-use.
| | 08:11 | It tells you how big the font is
and what it will take to download.
| | 08:15 | And you can also add it to a collection
and continue to see other fonts and add
| | 08:18 | them all to a single collection.
| | 08:20 | Right now, this particular font has
only one style. And if you scroll down, you
| | 08:23 | can see that just to add this font, all
you need to do is just simply add this
| | 08:28 | code to your web site. So I'll just
select that and I'll copy this code.
| | 08:33 | I'll switch back. And we already
have the rules set up here to take
| | 08:36 | advantage of this font,
| | 08:37 | so all I need to do is just paste that
code right here and as you can see, this
| | 08:41 | font has already been updated to take
advantage of this particular rule, and
| | 08:45 | it's as simple as that.
| | 08:46 | If you don't want to download a bunch
of fonts and add font rules or have to
| | 08:50 | worry about this, you can simply use
a font from something like Google Web
| | 08:53 | Fonts, which is pretty cool.
| | 08:54 | One disadvantage to using font services
for your custom fonts is that they won't
| | 08:59 | be available when your web app is
offline, which is normally not a problem,
| | 09:03 | especially on desktops, but it can
become a problem on hand-held devices: when
| | 09:07 | they lose connection they won't
be able to download the fonts,
| | 09:10 | so make sure you always specify an
alternative so that the browser knows how to
| | 09:14 | display your font when it doesn't find
it, it can't link to it because
| | 09:17 | the application is currently offline.
| | 09:19 | So using fonts seems easy on the surface,
but because of different browsers and
| | 09:23 | platform issues and licensing
issues, they can get very tedious.
| | 09:27 | Thankfully, there are a couple of
tools like Web Fonts and Font Squirrel that
| | 09:30 | can make your life a lot easier.
| | Collapse this transcript |
| Creating custom input and buttons fields with CSS3 PIE| 00:00 | Making your forms look great means
understanding how to work with a variety of
| | 00:04 | CSS3 rules like gradients,
drop shadows, and border radius.
| | 00:09 | Unfortunately, making several of these
elements compatible with older browsers
| | 00:12 | is a real challenge.
| | 00:14 | We are going to take a look at a
library called CSS3 PIE that you can use to
| | 00:18 | make older browsers try to
understand and display some of these elements.
| | 00:22 | We will also take a look at how to
target different browsers, specifically
| | 00:26 | different versions of Internet
Explorer, so we can fix problems with those
| | 00:29 | browsers when we encounter them.
| | 00:31 | So we are going to open up the
exercise files, and we are going to open up the
| | 00:34 | Starting Points folder and
find the folder for this chapter.
| | 00:38 | Open up the folder and copy the Working
Folder onto the desktop, and I'm going
| | 00:43 | to drag that on to Espresso. And I'm
going to find the codesnippets file, drag it
| | 00:48 | into the Workspace, double-click on the
index for this project to also open it
| | 00:53 | up in the Workspace, and then I'm going
to Option+Click on this Preview icon to
| | 00:58 | bring up a live preview.
| | 00:59 | So you could see this form is a pretty
simple form. It's just an input element
| | 01:04 | where you can type something in
and a button right next to that.
| | 01:08 | So let's take a look at how we are
going to be styling that with CSS.
| | 01:11 | I already uploaded this project onto
a web server, and you could see that
| | 01:15 | we've got a nice background with the
same input and submit button, but we
| | 01:20 | have added CSS3 gradients.
| | 01:22 | There is an inside drop shadow
inside the form element, also a background
| | 01:25 | that shows an image, and an input field
where you can type in some text to do our search.
| | 01:30 | So we are go into out codesnippets
files and find the code where we link to a
| | 01:35 | couple of CSS files that I'm
going to be using for this project.
| | 01:37 | I want to copy that and go back in here and
in this head section just paste those two files.
| | 01:43 | The first one is our normalize.css file
that we have downloaded from a web site,
| | 01:48 | and the purpose of this file is to help
us standardize, or try to make browsers
| | 01:53 | as compatible as possible. So go in here.
| | 01:56 | So I've already downloaded this file,
and I'm linking to it in our HTML project.
| | 02:02 | So here is the call to the
normalize file. It is right here.
| | 02:05 | We are also calling another style sheet
called mystyle.css, which is right now empty.
| | 02:09 | You can already see that when
we add the normalize.css file,
| | 02:13 | it actually changes the margins
and the way that the buttons looks.
| | 02:17 | So it's already doing some work right
there and standardizing the way that the
| | 02:21 | forms are going to look.
| | 02:22 | Now we are also going to add another
library called CSS3 PIE, which you can
| | 02:26 | find at CSS3PIE.com, and the purpose
of this library is to try to make older
| | 02:32 | browsers, mainly Internet Explorer
versions 6 through 9, capable of rendering some of
| | 02:37 | the newer elements in CSS3.
| | 02:39 | So you could see that it has some
support for drop shadows, box shadows,
| | 02:43 | and other elements.
| | 02:44 | Unfortunately, it doesn't show up
things like inset drop shadows and multiple
| | 02:48 | backgrounds, but it tries to do as
good job as possible, and it's continuously
| | 02:52 | under development, so hopefully we will
be able to see some of those things come
| | 02:55 | in at a later point in the project.
| | 02:57 | So you can click right here to
download a copy of this, and then I'm going to
| | 03:00 | open up the copy that it downloaded.
| | 03:02 | You could see there are
different versions of this file.
| | 03:06 | You are going to need the one called PIE.htc.
| | 03:08 | There are different versions of them
that do slightly different things in
| | 03:11 | different environments.
| | 03:13 | So what we are going to do is we
need to copy it into our current working
| | 03:16 | folder, which you can do by simply
dragging this either into this Project Files
| | 03:20 | area right here in Espresso or by dragging
it onto our Working Folder, which we will do.
| | 03:25 | Copy that right there.
| | 03:26 | It will appear right here in
the Project Files in Espresso.
| | 03:31 | So this particular library is not going
to work if you preview it on your browser.
| | 03:36 | At any rate, most developers don't
have really old versions of Internet
| | 03:39 | Explorer installed.
| | 03:40 | It's something that you are
going to have to see on a web server,
| | 03:43 | so you are going to need to copy these
files onto your server. And there's one more
| | 03:47 | issue that you might have with this
particular file that needs to be addressed:
| | 03:50 | you will need to create a file that
will make sure that your server understands
| | 03:55 | how to read this file properly.
| | 03:56 | This actually happens quite a bit
with different types of HTML5 elements.
| | 04:00 | A lot of times they are in a format
that the server will not understand.
| | 04:04 | In this particular case, we've
got a file that's called PIE.htc.
| | 04:08 | If your server doesn't understand how
to deal with that HTC file, they will be
| | 04:11 | served with the wrong type of information and
your server will interpret them as text files.
| | 04:16 | So in order to fix that, we are going to
need to create what's called an htaccess file.
| | 04:21 | So I'm going to show you
how to do that on a server.
| | 04:25 | You would go into an FTP
program and connect to a server.
| | 04:28 | So I already have a server that I've
created to upload these files to, and I'm
| | 04:33 | just going double-click on
this shortcut right here.
| | 04:35 | And on the server that you want to place
this PIE.htc file, you want to create a
| | 04:41 | file and call this file .htaccess.
| | 04:45 | You can't really create this file on
your local machine and upload it, because
| | 04:49 | by default, an htaccess file--or any
file that begins with a period at the
| | 04:53 | beginning--will be an invisible
file in some platforms like Mac OS.
| | 04:58 | So if you try to create this file on
your desktop, the file would either
| | 05:01 | immediately disappear or it won't
let you create it at all on the machine
| | 05:05 | that you are working on.
| | 05:06 | So you're going to have to do this in
the server and hit Create new file here
| | 05:09 | which you could do by right-clicking
and selecting New File from Cyberduck--
| | 05:13 | just about any FTP program will let
you create a new file though--and type in
| | 05:16 | the name .htaccess and hit Create.
| | 05:20 | Once the file is created then you can
edit that file. And in this case my default
| | 05:25 | editor for Cyberduck happens to be Espresso,
| | 05:27 | so I can just click on this file to
edit it. And I'm going to need to copy
| | 05:31 | something from the codesnippets,
which is this command right here.
| | 05:35 | So all that this is doing is letting
the server know that from now on when it
| | 05:38 | encounters files with the extension
.htc, that it should interpret it as a type
| | 05:44 | of text/x-component, as
opposed to a simple text file.
| | 05:47 | So I'm going to come over here,
paste this, save this file,
| | 05:51 | it'll upload it to my server,
and I'm going to close it.
| | 05:55 | I'm going to refresh Cyberduck,
just to make sure that it did upload.
| | 05:57 | Notice that now instead
of having a 0 byte size,
| | 06:01 | it now has 29 bytes, which means that
it does have some information in it.
| | 06:04 | You don't really need to do this all time.
| | 06:06 | As a matter of fact, if you put this
on this folder, any folders that you
| | 06:09 | create in this same directory will also
automatically pick up that command from
| | 06:14 | this htaccess file.
| | 06:15 | Htaccess files are quite handy
for handling a lot of issues,
| | 06:18 | so that's the way that you have to create them.
| | 06:20 | It's a little bit weird, but it'll
prevent you from having a headache and
| | 06:23 | noticing that this PIE file is not working.
| | 06:26 | So once you've done that then
everything should be fine with your document.
| | 06:29 | Just remember, before you upload the
rest of your files you want to make sure
| | 06:32 | that you have an htaccess file so that
it knows how to handle right file type.
| | 06:37 | So I'm going to close out of here and go
back into our form and continue to work on this.
| | 06:41 | So now I'm going to copy some additional
code that will set up the basics of our
| | 06:45 | HTML page, and it's going to reset the
input type text fields a little bit more.
| | 06:49 | So I'm going to copy this from our
codesnippets.txt, and I'm going to go
| | 06:53 | into mystyle.css file.
| | 06:55 | I'll double-click on it so that it
comes in to the Workspace, and I'm going to
| | 06:59 | paste this bit of code right here.
| | 07:01 | You can see that I already
brought in a lot of different things.
| | 07:03 | I brought in the background, and I am
displacing the position of the form a
| | 07:07 | little bit, by 50 pixels, and I am
also calling the PIE.htc file in here.
| | 07:13 | Now if you only want certain
elements in your document to be backwards
| | 07:16 | compatible with older browsers,
| | 07:18 | you can just place this call in any
element that you want to attach that to.
| | 07:23 | If you want to make it available to all
of your form elements, you could use the
| | 07:26 | asterisk universal selector--and I'm
using that here with the form selector to
| | 07:30 | make sure that all my form
elements are calling the PIE.htc file.
| | 07:34 | So once I've done that then I reset
some of the appearance in browsers for
| | 07:38 | different elements, mainly the text
fields right here, and I'm going to set the
| | 07:41 | borders of things and the radius and
all that other stuff to zero, clearing
| | 07:44 | everything out. And here on the body
section is where I add a basic background
| | 07:48 | color as well as the background that
has the little line pattern that I want.
| | 07:52 | So let me go back into codesnippets,
and we'll grab the next piece of code. And
| | 07:57 | what we're going to do is, instead of
trying to style the actual input field
| | 08:00 | to have rounded edges,
| | 08:02 | we're actually going to style the form
element to look like an input field and
| | 08:05 | make our input field to be
placed inside that form element.
| | 08:09 | So I'm going to copy this piece of code
right here. And this is a really large
| | 08:13 | piece of code, but it's really
just a bunch of browser prefixes.
| | 08:17 | So I'll copy that and go back into my
style sheet and paste that right here,
| | 08:21 | and you can see that it already started to
add quite a bit of information into our style.
| | 08:25 | So what we're doing now is setting the
position of this element to relative and
| | 08:30 | the width and the height to a
certain width and height, and this particular
| | 08:33 | piece of code right here, setting the
element to have a margin of 0 and auto is
| | 08:37 | going to center the element.
| | 08:38 | Let me take these out so
you can see them at work.
| | 08:39 | So if I take that out, you can see
that the element's still on the left.
| | 08:42 | Right now, if I add that in, adding
the margin zero auto is actually what's
| | 08:47 | going to be centering that element in
the middle of the page, no matter how
| | 08:50 | wide I make the page.
| | 08:51 | And I'm giving it a
simple one-pixel white border.
| | 08:54 | It's just like a slight border around
the whole thing. And then I go through
| | 08:58 | and I set different background
elements. So this is adding a magnifying glass
| | 09:02 | picture, or a magnifying glass image,
which is right here, as well as a basic
| | 09:07 | background color for older browsers, and
I'm also adding this version of the PIE
| | 09:13 | background command.
| | 09:14 | So normally when you do background
elements with gradients or background
| | 09:18 | images, you will be adding a bunch of
different rules for different browsers,
| | 09:22 | including WebKit, Mozilla.
| | 09:24 | So when you're adding gradients or
background elements, you add a gradient for
| | 09:29 | each type of the different
browsers that you're using.
| | 09:31 | When you are using PIE, you're going to
need to add a background rule for PIE itself.
| | 09:36 | There are other things like border
radiuses and shadows that it will try to
| | 09:41 | pick up automatically, but for
backgrounds and gradients you're going to have
| | 09:45 | to use this special call.
| | 09:46 | So you should definitely take a note of that.
| | 09:48 | The next thing we're doing is adding a
little bit of border radius to our form element.
| | 09:53 | So you could see that if don't add
them, the borders are rectangular;
| | 09:57 | if add them, the borders
have that nice round edge.
| | 09:59 | Then I'm also adding a drop shadow.
| | 10:02 | So you could see that there's an
inside drop shadow that gets added with
| | 10:07 | this command right here.
| | 10:08 | Let's go back into our codesnippets
and keep on plugging along with the code.
| | 10:12 | Now we'll style the input type submit.
| | 10:14 | It's also another very big piece of
code, but it's a bunch of different rules
| | 10:18 | with a bunch of browser prefixes.
| | 10:21 | So we'll go back here and we'll paste that.
| | 10:23 | You could see that now our
button looks really nice.
| | 10:25 | I'm actually positioning this button to
the right of the form element. But since the
| | 10:31 | position of the container, the
form element, is set to relative,
| | 10:35 | if I position this as an absolutely
positioned element, it's going to align it
| | 10:39 | to the previous form element and align
it to the right of that form element and
| | 10:44 | give it about the same
width and height and no border,
| | 10:47 | so it doesn't have that default
border that buttons have a lot of times.
| | 10:51 | Then I set up a bunch of gradients again.
| | 10:53 | They're really not that
complicated, except that we have to add the
| | 10:56 | different prefixes.
| | 10:57 | Then I set some border radiuses for the
button itself again, and some shadows as well.
| | 11:02 | Plus I'm adding a border to the left
so that I get an extra little border to
| | 11:07 | the left of the image,
so it has a more of an embossed look.
| | 11:11 | Then I set the color of the text inside that
input field from the default black to white.
| | 11:16 | Finally, I also need to create a hover
state, so when somebody rolls over this
| | 11:20 | button, I want it to have a little bit.
| | 11:22 | So I'm going to copy this
and I go into my style sheet.
| | 11:25 | I'll paste it right here, and now when I
hover over the button, it shows me that
| | 11:30 | slightly different gradient,
but this is really just another gradient.
| | 11:33 | Same sort of rules as this,
just a different color.
| | 11:36 | Go back to my codesnippets and do
the same thing with the text field
| | 11:41 | that's going to go inside.
| | 11:42 | Right now the text field
is a little bit further out.
| | 11:44 | Because remember, it looks like right
now the text field is this form element,
| | 11:48 | but in reality the form element is what
allows us to place this icon back there.
| | 11:52 | We need to change this input field so
that it moved a little bit over to the
| | 11:56 | right and aligned a little bit better.
| | 11:58 | So that's the next piece of code that
we're going to add, back into my style
| | 12:01 | sheet, and now our text, looks a little
bit better, and it's positioned better. And
| | 12:06 | these are just some plain simple rules:
positioning this, floating it, and
| | 12:10 | aligning it so that it shows
up in the browser properly.
| | 12:13 | Now we're also changing the outline
property because some browsers will
| | 12:17 | automatically place an
outline on focused elements.
| | 12:20 | That's another thing that you might
need to take out in some of your projects.
| | 12:24 | One last thing that you are going to
have to worry about is that even with CSS
| | 12:27 | PIE, some browsers are not going to
be able to recognize all the rules.
| | 12:31 | Thankfully there's a really easy way to
serve different code to different versions
| | 12:36 | of Internet Explorer.
| | 12:38 | To do that, we can use a conditional
piece of HTML that will display a slightly
| | 12:42 | different style sheet to browsers
that are older than certain versions.
| | 12:46 | So I know that this particular code
is going to look really well on all
| | 12:49 | browsers, including IE9, but versions
before IE9 won't display some of the
| | 12:54 | elements. Specifically the submit
button won't be displayed properly.
| | 12:58 | So I'm going to copy this piece of code,
and this is actually going to be added
| | 13:01 | into our index.html file.
| | 13:03 | It's not going to make an impact right
here because this browser supports all
| | 13:07 | the features, but by adding this
piece of code, we're telling the browser to
| | 13:11 | make sure that if the browser version
is earlier than Internet Explorer 9, then
| | 13:16 | it's going to modify the input submit
button to not have a border and to not
| | 13:21 | have the little extra left border right here,
plus the shadow that we used in the element.
| | 13:25 | So I'm going to save that.
| | 13:26 | I'm going to show you how that works.
| | 13:28 | I'm going to switch to Adobe BrowserLab,
and I'm going to pull a version of this
| | 13:32 | form that's finished and show you that
using that code allows this form to display
| | 13:39 | properly on Internet Explorer 7.
| | 13:41 | It looks a lot better in Internet Explorer 9.
| | 13:43 | It did pick up some of this gradient
in Internet Explorer 9, and it looks
| | 13:47 | wonderful in other browsers
| | 13:48 | that can pick everything
that we've styled on this form.
| | 13:52 | And I'm going to take off my
conditional code in the version that are uploaded
| | 13:55 | to the server, and I'm going to tell
Adobe BrowserLab to refresh and show that
| | 14:01 | without the conditional code, Internet
Explorer 7 does pick up the gradient and
| | 14:05 | it picks up the border radius for the
input submit button, but not the
| | 14:08 | border radius for the form field.
| | 14:11 | Even though CSS PIE tries to do its
best to make things compatible in older
| | 14:16 | browsers, it isn't always perfect, and you
always have to watch out for this kind of thing.
| | 14:20 | So I'd highly recommend using
something like BrowserLab to always check your
| | 14:23 | work across different browsers.
| | 14:25 | I'm going to go ahead and also just take
the call to our PIE file so that you can see--
| | 14:29 | so I'm going to save this
and I'm going to reload it--
| | 14:31 | so you can see, without CSS3 PIE, the
gradient doesn't get picked up properly.
| | 14:36 | So CSS3 PIE does a decent job of
trying to make things that are older as
| | 14:41 | compatible as possible, but like
anything else, it's not perfect.
| | 14:44 | I think it's best to try to
determine which browsers you are going to be
| | 14:47 | supporting and making sure that you
have something like BrowserLab that can
| | 14:50 | check the version of your
code in different browsers.
| | Collapse this transcript |
| Working with text fields| 00:00 | By far, the most common element you'll
style with CSS is a text type field.
| | 00:05 | There are different flavors of the text
field, like the input type text or input
| | 00:09 | type password and the text area fields,
and working with these fields is similar
| | 00:14 | to working with other types of CSS elements.
| | 00:16 | So let's take a look at how we would style them.
| | 00:18 | I am going to open up the exercise files
and open up the Starting Points folder,
| | 00:24 | find the folder for this video, and drag
a copy of it onto the desktop, and I am
| | 00:30 | going to drag this onto Espresso.
| | 00:32 | Finally, drag the
codesnippets.txt file into the Workspace.
| | 00:38 | Double-click on the index.html file
to bring it up also into the Workspace,
| | 00:42 | and I am going to also double-click
into the mystyle.css file to also bring it
| | 00:46 | up into the Workspace.
| | 00:48 | And finally I am going to move this
over to the side and Option+Click on the
| | 00:53 | preview icon to bring up
this form on a live preview.
| | 00:56 | So you can see this is a pretty simple form.
| | 01:01 | It has a few different types of input
fields, as well as the text area field, and
| | 01:06 | let's take a look at what it
will look like when we get done.
| | 01:08 | This is a version that's
already being completed.
| | 01:11 | See that we have a background
element, and we have these different fields
| | 01:15 | with different gradients and inset
drop shadows, as well as an icon inside
| | 01:19 | one of these elements.
| | 01:20 | You could see that when I click on these,
they highlight to a different color.
| | 01:24 | So we are using quite a bit of CSS
styling to accomplish all these things.
| | 01:28 | Now we are also using a number of
libraries with this project, like the
| | 01:32 | normalize.css library available at this
URL, as well as the CSS3PIE library, and
| | 01:40 | this library tries to make some of the
older browsers understand some of the
| | 01:44 | newer features in CSS3.
| | 01:46 | Now we've covered how to install some
of these libraries in the previous movie,
| | 01:50 | and you can also check the movie on
setting up the exercise files to check out
| | 01:55 | how to install these
libraries into your projects.
| | 01:58 | So let's go back into our files and we
are going to open up the codesnippets.txt
| | 02:02 | file, scroll to the section for this movie.
| | 02:05 | We are going to copy this first piece of
code, and notice that we are calling our
| | 02:11 | normalize.css file that we have already
installed in this folder, as well as the
| | 02:16 | style sheet for this project and a
custom font from Google web font.
| | 02:20 | If you want to find out more about
installing custom web fonts, check out the
| | 02:24 | movie on using custom fonts.
| | 02:26 | So I am going to copy that, come back
to my index.html file, and paste this code
| | 02:32 | into the head section of my site.
| | 02:33 | You see that it had already--some of
the normalizing takes effect, and I am
| | 02:38 | going to go back into codesnippets and
copy the next piece of code, and in here
| | 02:43 | I am calling my PIE.htc file, which
will try to make some of the older versions
| | 02:48 | of IE understand some of the new CSS3 rules.
| | 02:51 | So I am going to copy that and I'm going
to go into my style sheet and paste that
| | 02:56 | in. And we are clearing out some
additional elements here, you know, making sure
| | 03:00 | that all our input fields have an
appearance of nothing and clearing out some of
| | 03:04 | the other elements from here.
| | 03:05 | We are also copying a special piece
of code that is going to take care of
| | 03:09 | fixing another issue that you run into
when you are creating elements that are
| | 03:14 | set to float in CSS.
| | 03:16 | This is a common problem. And let's take
a look at our index file to take a look
| | 03:20 | at what we have done to fix this issue.
| | 03:22 | So you see that this form looks pretty
good, except for a couple of things that
| | 03:27 | I am doing differently here.
| | 03:28 | Number one is you see that I added a
class called group, and that class is the
| | 03:32 | class that I have defined in my
index.css file. And the job of this class is to
| | 03:38 | make sure that when I float elements
the container of the element is going to
| | 03:42 | be able to track the
height of the floated elements.
| | 03:46 | When you float items with CSS,
whatever element contains those items is not
| | 03:51 | going to be able to understand
the height of those elements.
| | 03:54 | If it doesn't make any sense, it will
in just a minute, whenever I add some
| | 03:57 | additional code, and I'll take these out
so you could see what effect adding
| | 04:01 | this CSS does to our files.
| | 04:03 | So let's go back into the index and take a
look at the other thing that we have done here.
| | 04:07 | The other thing that's different is
that most of the time when you create
| | 04:10 | labels you use the for field to
associate the label to an input element.
| | 04:15 | So we have these labels
right here with a for field.
| | 04:18 | We have to add an ID to our inputs to
make sure these two things are tied together.
| | 04:23 | In the case of this particular file, we
have actually used the label element to
| | 04:27 | wrap our input field.
| | 04:29 | So when you do that, the for and
the ID fields are not necessary.
| | 04:33 | So you don't actually need to have those,
only in the case of where you are using
| | 04:38 | the label as a container of a field.
| | 04:40 | So we can actually get rid of these.
Because the labels are wrapping the input fields,
| | 04:46 | it is implied that the labels
belong with the input fields.
| | 04:51 | So we can take these out, the IDs as
well as the for attributes in the labels.
| | 04:58 | This is a little bit simpler to write, but
it's not always as semantic as the other method.
| | 05:02 | This format is easier to write when
you want to place some of the labels on
| | 05:06 | top of your input fields.
| | 05:07 | For our labels, we are also
going to copy some simple styles.
| | 05:10 | We are going to first copy the
background image for our body and as well as a
| | 05:16 | simple form element that will just
center this form and put it further down from
| | 05:21 | the top of the screen. So I am going to copy this into
mystyles and paste that so that we get the
| | 05:26 | background. The form is now centered
in the middle of the page, and we are
| | 05:32 | going to go back into codesnippets
and copy this code for the labels. Back
| | 05:38 | into my style sheet file.
| | 05:40 | I am going to paste that, and you can
see that my labels are now sitting right
| | 05:44 | now next to the fields.
| | 05:45 | So let's go back into our codesnippets
and actually grab the code for our input fields.
| | 05:52 | And this is quite a bit of code, but
again, it's just a bunch of different
| | 05:55 | browser prefixes. So we'll go into our
style sheet and paste this entire bunch of
| | 06:00 | code that will actually do most of the
styling for the different input fields.
| | 06:05 | We have created some styling for the
input fields that make them display as block.
| | 06:11 | When you display an element as a block
element you can set the width of the
| | 06:15 | element, so we set the width of these
fields to be 250 pixels, and we have also
| | 06:21 | made these fields center
by using this margin 0 auto.
| | 06:25 | That way they will center on the middle
of the screen as we resize the screen.
| | 06:29 | You added a little bit of padding
inside the element, so that when you click
| | 06:34 | right here, the elements will
have a little bit of breathing room.
| | 06:37 | We have given it a basic background,
which we then overwrite over here with a
| | 06:41 | bunch of background CSS, plus
added a border, which is white--
| | 06:46 | you can barely see that border right
here on the edge--and made the font that
| | 06:50 | you type in here a little bit
different by choosing that Ubuntu Mono, changed
| | 06:54 | the font size, and then added a border
radius to give the edges a little bit of
| | 06:59 | a round feel, as well as added a very slight
background gradient from white to a very light gray.
| | 07:06 | Finally, we have added an inset drop
shadow to each one of the elements, so
| | 07:10 | you could see there.
| | 07:12 | So if I take that out, you could see the
shadow will be gone. It's kind of nice
| | 07:15 | to see these when you take them out.
| | 07:17 | You can see if we take out the
gradient, then it just becomes this default
| | 07:20 | color. And if we take out the
radius, we could see that these fields
| | 07:23 | become rectangular.
| | 07:25 | Okay, now we need to do
something with our Submit button,
| | 07:29 | so let's grab the code for that,
paste it into mystyles.css.
| | 07:36 | You can see that we are floating that
button to the right side, adding no border
| | 07:42 | to get rid of the default border that
buttons normally have, and then just
| | 07:45 | adding some basic background color, as
well as a little bit of padding to give
| | 07:49 | it more breathing room,
| | 07:51 | and just a little bit of breathing room
overall, as well as a border radius to
| | 07:56 | make it have rounded edges.
| | 07:59 | So we can also add some code to make
sure that our text fields actually change
| | 08:04 | when they become focused.
| | 08:06 | So I am going to copy this piece of code
right here, and what that is going to do
| | 08:10 | is add an outline that has a color of
red when the element becomes focused.
| | 08:16 | So whenever the element gains focus
like this, I am hitting just Tab to tab
| | 08:21 | through different fields. Then it
will get an outline that is solid red.
| | 08:26 | Now the outline is super similar to the
border, except that the outline doesn't
| | 08:31 | actually take up any space like a border would.
| | 08:33 | So you would use border normally
when you want to just add a border to an
| | 08:38 | element, and the width of that
border would actually affect the width of
| | 08:42 | the element itself.
| | 08:43 | Outline doesn't, but with form fields,
when you wanted to style the focus, you
| | 08:49 | have to use the outline
field, not the border field.
| | 08:51 | The border field won't have any effect
on the actual outline of the element.
| | 08:56 | So as you could see, we are using the
pseudo-class focus to change how the input
| | 09:01 | fields look when they become focused,
and obviously how the text area's fields
| | 09:07 | look when they become focus as well.
| | 09:09 | So now we are going to add an icon
besides one of our text elements, so I am
| | 09:13 | going to go back to codesnippets.
| | 09:13 | I am going to copy this code
right here. Back into our style sheets.
| | 09:20 | So you could see that in this field I am
using the pseudo-class type=text to let
| | 09:25 | us choose fields that are only of type text.
| | 09:28 | This is the only text input field in the code.
| | 09:31 | You can see that this right here is the
only text input field that we have; the
| | 09:36 | other one is an input type password,
and the last one is the text area.
| | 09:40 | And we've added a special class to this
field to let the browser know that this
| | 09:43 | is a required element, so we can add a
background image or some other kind of
| | 09:48 | styling to the required fields.
| | 09:50 | What I have done here is I created a
class called required. Because I want
| | 09:54 | to make sure that when users type their text,
the text doesn't start where it normally would--
| | 09:58 | I want it to be indented a little bit--
| | 10:00 | I have to add a little
bit of padding to my forms.
| | 10:02 | If I take that out, you'll see that the
form becomes smaller, and now when I type
| | 10:06 | text, it's on top of the background icon.
| | 10:09 | The problem is whenever I change the
padding of a field, it also affects the
| | 10:13 | width of the element. So if I take the
padding out, you'll see that my element
| | 10:18 | actually becomes shorter.
| | 10:19 | So I have to make up for that shorter
version of the element by adjusting the
| | 10:24 | width. So if I didn't do this, my form
will be too big. By changing the padding
| | 10:29 | left so it indents in and then
changing also the width, which on most input
| | 10:34 | fields the width is normally 250, and
here I have to adjust the width a little
| | 10:38 | bit to make sure that I
give it that breathing room.
| | 10:41 | And here I am styling the required input
fields and adding a background image to
| | 10:47 | it, as well as a slight gradient.
| | 10:50 | This gradient used to be there.
Before we just added to the left of it
| | 10:54 | an additional image.
| | 10:56 | So here is a normal gradient that you could see.
| | 10:59 | It's the same colors.
| | 11:00 | Down here we've added that same
gradient, as well as a background image.
| | 11:05 | We can't just simply add the
background image because it would replace the
| | 11:08 | gradient that shows up, so you have to
add both the gradient and the background
| | 11:11 | image. And that shows up as
that icon that you see right there.
| | 11:16 | Finally, we can also style things
whenever we hover on top of them, so whenever
| | 11:19 | we roll our mouse on top of some
elements, we can also change a color.
| | 11:23 | I'm going to open up the codesnippets file.
| | 11:25 | So what we are going to do is when we
hover over a label element, we are going to
| | 11:31 | affect the way that the
input type text field looks.
| | 11:36 | So whenever we hover over an element,
it's going to affect the way all these
| | 11:40 | different types of fields look by
changing the outline to solid orange.
| | 11:46 | Using the pseudo-classes, you can give
a bunch of feedback to your users when
| | 11:50 | they do different things, like when
they hover or when they click on a
| | 11:53 | specific element by using these
different pseudo-classes and with the
| | 11:57 | different input types.
| | 11:58 | So working with text elements is a
bit different than other elements.
| | 12:02 | We don't just have to worry about
background patterns, but we can also take a
| | 12:05 | look at things like customizing the way
that our input fields work, when users
| | 12:09 | hover over different fields or change
the outline when things become focused.
| | 12:13 | So there are a few extra different
pseudo-classes that are available to your
| | 12:17 | input and text fields that are
not available in other places.
| | Collapse this transcript |
| Designing labels| 00:00 | Styling labels is a lot
like styling other elements.
| | 00:03 | Remember that you can use gradients,
shadows, and even images on your labels.
| | 00:08 | Let's see how we can do some of that with CSS.
| | 00:10 | So I am going to go open up the
exercise files and open out the Starting Points
| | 00:14 | folder, find a folder for this
project, and copy it onto our desktop.
| | 00:20 | Then I'm going to drag this on to
Espresso, and I am also going to move the
| | 00:26 | codesnippets.txt file in the Workspace.
| | 00:28 | I am going to also double-click on the
index.html file and the mystyle.css file
| | 00:35 | to bring them into the Workspace, and
finally, I am going to scoot this over
| | 00:39 | and click on the index.html and Option+Click on
the Preview icon to bring up the live preview.
| | 00:44 | Now I am using a few libraries here, like
the normalize.css library and the PIE.htc.
| | 00:51 | You can find those at this location for
normalize.css and at this URL for css3pie.
| | 00:58 | You also find out more information
about how to install and work with these in
| | 01:03 | the video on exercise files.
| | 01:05 | So let me start by going to the
codesnippets file and slide over to the
| | 01:10 | section for this movie, and we are
going to start off by copying the code to
| | 01:14 | include our normalize.css
file and the mystyle.css file.
| | 01:18 | So we'll copy that, bring into the
index file, paste that right there.
| | 01:23 | You can see how it's already affecting
some of our elements. And then we are
| | 01:27 | going to go back into codesnippets and
we are going to copy some more of this
| | 01:32 | basic resetting code.
| | 01:33 | I'm going to copy that, bring it into
the mystyle.css file. And by applying that,
| | 01:39 | you will see that we've cleared the
remainder of this style sheet defaults,
| | 01:43 | we moved the form down a little bit
by 50 pixels, and we made all the form
| | 01:48 | elements transparent.
| | 01:49 | We call the PIE.htc behavior, which
will try to make some of the new3css rules
| | 01:55 | work in older browser, and we've reset
the appearance of the input type text
| | 02:00 | fields right here, clearing out
all the borders and everything else.
| | 02:04 | Plus we have a clear fix for clearing
items that we are going to be floating,
| | 02:09 | which we will do in this particular form.
| | 02:11 | If you go back into the index file, you
can see that we've created a form with
| | 02:15 | the class of group, and each individual
item in here has also an additional class
| | 02:21 | of group to make sure that the
containers that have the elements understand the
| | 02:25 | height of these elements.
| | 02:27 | So we will go back into the codesnippets file.
| | 02:30 | Our basic code here sets up a color for
the background and then brings in a JPEG
| | 02:35 | file as the background image for the body.
And then we are going to center and
| | 02:39 | position the form elements.
| | 02:40 | I am going to copy this and bring it
to mystyle.css, paste that in there, and
| | 02:45 | you can see that with this piece of code
right here, we'll bring in an image that
| | 02:49 | we've uploaded into this folder. Just
in case that it has problems with that
| | 02:53 | image, we have backup
background color right there.
| | 02:57 | The form element has been positioned
relative to where it normally is, and I've
| | 03:03 | set up a width for the element here,
and this particular piece of code here
| | 03:06 | centers the element.
| | 03:07 | If I take that out, you can
see that the element left-aligns.
| | 03:10 | But by doing this, the element will
center on the width of the browser.
| | 03:14 | You can't see some of the borders, so
you can't see that there is an input
| | 03:16 | field here that makes the item a little bit
more centered, plus some other room right there.
| | 03:21 | So we'll go back into codesnippets.
And the way that we have coded this
| | 03:26 | particular form is we set up a series of
items in our HTML, so we have this item
| | 03:32 | and this item, and these items are containers.
| | 03:37 | Let's take a look what this project
is going to look like when we get done.
| | 03:40 | So this form is going to look like this.
| | 03:42 | You could see the form is centered.
| | 03:44 | We have a background image with a drop
shadow, and we have a label, and to the
| | 03:49 | right of the label, we have an input
type text field. Because we want to style
| | 03:53 | the input background, we are actually
creating an element called the item, and
| | 03:59 | that is what actually has this rounded
border with a little bit of transparency on
| | 04:03 | the background, and it contains this input field.
| | 04:06 | So we are not styling the actual input field;
| | 04:08 | we're making the input field be
transparent and styling the item containing
| | 04:13 | the input field, and as well as styling the
labels with the background image and a drop shadow.
| | 04:21 | So that's where we are going, and
this is how we've set up the HTML.
| | 04:24 | Each one of these items is going to
have the background style with the rounded
| | 04:27 | edges, and then the input fields are
going to be styled inside that, and the
| | 04:32 | labels are also going to be inside this
container, and that's why we have applied
| | 04:36 | the clearing CSS so that the container
understands the height of these label and
| | 04:41 | the input element inside it.
| | 04:43 | So let's go back into the
codesnippets, and we'll get the CSS for the items.
| | 04:50 | This looks like a lot of CSS, but
it's really just a few rules with a bunch
| | 04:54 | of browser prefixes.
| | 04:56 | So we'll go back into mystyle.css,
paste that code, and you can see the
| | 05:00 | background of item has taken over. And
what we've done here--let me expand
| | 05:05 | this so you could read all
the browser prefixes together--
| | 05:08 | so we just created a slight border,
given it a little bit of a margin so that they
| | 05:12 | have a little room between, so
let me take out the borders.
| | 05:15 | So you could see the border right there.
| | 05:16 | If I take out the margin, you could
see that there is a little bit less room
| | 05:20 | in between the elements, and we've set
up a height for each element; otherwise
| | 05:24 | they look like this.
| | 05:25 | It's not particularly good.
They look kind of skinny.
| | 05:28 | Then we set up a gradient that
has a copy of the brown lines.
| | 05:32 | This is actually quite interesting.
| | 05:34 | We have a copy of the same
background that's back here and on top of that
| | 05:39 | background, we have created a
gradient that goes from pure white to a
| | 05:44 | slight white, at 30%.
| | 05:46 | That's what this means right here.
| | 05:47 | We are using an rgba color in
combination with a solid color.
| | 05:52 | So we are using rgba because we want
this color to be partially transparent and
| | 05:56 | show some of these brown
lines behind the element.
| | 05:59 | So right now the only one that's
affecting this, because this is a WebKit
| | 06:02 | preview, is this one.
| | 06:04 | So if I take this out, you could see
that there is no background, and you can
| | 06:07 | see that we've got two layers: one layer with
the brown lines and one layer with a gradient.
| | 06:15 | If I don't put in the brown lines, it's
actually going to still show part of the
| | 06:19 | ones that are in the background
that are little harder in this position.
| | 06:23 | So if I take this gradient out, you
can see that I have no white transparent
| | 06:29 | gradient on top of that.
| | 06:30 | We also set up a border radius,
| | 06:32 | so you could see that it just
makes everything nice and rounded.
| | 06:35 | And we've also set up a drop
shadow into these elements.
| | 06:40 | Normally, I make the drop shadow
black or an rgba color, but I just made it a
| | 06:44 | hexadecimal, that is, one of these green
colors, from the background, just to put a
| | 06:48 | very slight drop shadow on that item element.
| | 06:52 | So once we have that, we need to go into our
codesnippets and grab the code for the labels.
| | 06:59 | So in here we have added
essentially just a label,
| | 07:02 | we've give the label a width,
and we floated them to the left.
| | 07:06 | We've also aligned the labels in the
center of the box and just given the boxes
| | 07:12 | a white color, a little bit padding.
| | 07:14 | Otherwise, I need to have this padding that
will show to be the height of the other element.
| | 07:20 | We added a leaf background as
well as some roundness to the edges.
| | 07:26 | You need to add that to the labels
also, because the background is already
| | 07:30 | rounded. And then we added
a drop shadow that is inset,
| | 07:34 | so the drop shadow goes inside the element.
| | 07:37 | We've also added a text shadow, which
makes the text a little bit easier to read,
| | 07:41 | because of the pattern in the
leaf texture that we grabbed.
| | 07:44 | So that looks pretty good.
| | 07:46 | We need to actually add some additional
styles for the input type text, and we'll
| | 07:51 | copy that and paste it, because right now
if we look at the input type text field,
| | 07:57 | it's kind of sitting not
exactly where it should be sitting.
| | 08:01 | We need to make sure that
we format it appropriately,
| | 08:02 | so in the mystyle.css we are going to add a
bit of code to make sure that we give it a
| | 08:07 | width, display this block,
add some padding to it.
| | 08:11 | Make sure that we clear the outline out.
| | 08:14 | You could see that it's
already taken effect over here.
| | 08:16 | So setting a width, displaying this as
block. We are floating this to the left,
| | 08:21 | changing the size of the font, and some
other styles there, and making sure that also
| | 08:25 | the outline is transparent.
| | 08:26 | You are not going to able to see what
this does here, but if you are previewing
| | 08:29 | this in Safari, Safari by default puts
sort of soft-blue outline whenever you
| | 08:34 | focus on an element, which become
annoying when you want your elements not to
| | 08:38 | show an outline at all.
| | 08:39 | It kind of breaks the illusion of
having this kind of cool transparent field if
| | 08:44 | you see a big outline of a box right behind it.
| | 08:47 | So this clears that out,
| | 08:48 | this outline style right there,
and there we have those labels.
| | 08:52 | Now let's check this out on Adobe
BrowserLab, so we can take a look at how
| | 08:56 | different browsers support it, and go
into BrowserLab. And I load up a copy of
| | 09:01 | this document that I've
already placed on a server.
| | 09:04 | You can see that Internet Explorer 7
doesn't do a perfect job of taking care of
| | 09:10 | some of those elements, but it does pretty well.
| | 09:13 | I mean, I think this is pretty decent for IE7.
| | 09:15 | If you go to IE8, it looks kind of the same.
| | 09:18 | It doesn't pick up any of the drop
shadow elements, definitely not the inset
| | 09:21 | drop shadow that we styled, but
Internet Explorer 9 does a much better job. And
| | 09:26 | as we go other browsers, you could
see that they do a much better job of
| | 09:30 | understanding the styles.
| | 09:32 | So this looks pretty nice.
| | 09:34 | One way that you can style
labels is by adding background images.
| | 09:37 | I think it works really well. And you can use
positioning to place them wherever you want.
| | 09:41 | You should be getting the hang of
styling individual elements by now. Practicing
| | 09:45 | what you can do with backgrounds on
existing elements is a great way to get
| | 09:49 | better acquainted with
more advanced CSS features.
| | Collapse this transcript |
| Custom radio and check box styles| 00:00 | Radio and check box styles look
dramatically different depending on the browser
| | 00:04 | and platform you are using.
| | 00:06 | There is a great way to style them to
give them a custom look and feel, and we are
| | 00:10 | going to take a look at how we can do
that with CSS. However, just remember that
| | 00:15 | it's not going to look perfect in every browser.
| | 00:18 | So I am going to open up the exercise
files and open up the Starting Points,
| | 00:23 | find a Starting Point folder for this
video, and make a copy of this Working
| | 00:27 | Folder into our desktop, and I am
going to drag that onto Espresso.
| | 00:32 | I want to drag the codesnippets.txt file
into the Workspace, double-click on the
| | 00:38 | index.html as well as the mystyle.css
files. And I am going to move this over to
| | 00:44 | the left, click on the index.html file,
and Option+Click on the Preview icon to
| | 00:50 | get a live preview of our project.
| | 00:52 | Taking a look at the HTML, whenever
you use radio on check box fields, they
| | 00:58 | usually appear as a group of elements.
| | 01:01 | So we've created two distinct divs to
hold the two different groups that appear
| | 01:06 | over here as a group of items.
| | 01:08 | So we have this div right here for the
Food Favorites and for this Ratings area,
| | 01:13 | we have a separate div that
groups these elements together.
| | 01:16 | Let's take a look at what this project
is going to look like when we get done.
| | 01:19 | I've already placed a version of this
on a web server, and you could see that we
| | 01:23 | are going to be doing quite a bit
of customizing into the element.
| | 01:27 | Now one thing that's going to be really
critical is that we actually label our
| | 01:31 | fields, because what going to be
holding the background elements is going to be
| | 01:35 | the label and not the input field itself.
| | 01:39 | So we'll start up our form by going to
the codesnippets file, moving over to the
| | 01:45 | section for this video, and I am going to
copy the links to my style sheets, to the
| | 01:51 | normalize.css file and the mystyle.css document.
| | 01:54 | I'll go back into our index file
and add those on the head section.
| | 01:58 | You could see that the normalize CSS
file has already done a little bit of
| | 02:03 | work on the form itself.
| | 02:04 | We're going to go back into our
codesnippets and copy a few lines basic code
| | 02:09 | that resets some of the other elements
and adds this group clearing code to make
| | 02:14 | sure our container has the right height.
| | 02:16 | So I'll go back into mystyle.css and
paste some of that code in there, and you
| | 02:20 | can see that we are just
moving the form down a little bit.
| | 02:23 | We are resetting some of the
styles, of some of our elements.
| | 02:27 | Right now, it says change this to be
input type check box and input type radio.
| | 02:32 | We are also calling this PIE.htc file
that will try to make these things as
| | 02:37 | backwards-compatible as
possible with some other versions of IE.
| | 02:41 | Let's go back into codesnippet
and grab the next piece of code.
| | 02:45 | This just sets up a pattern for the background.
| | 02:47 | I'm going to go into mystyle
and paste that in there.
| | 02:51 | You could see that we have a
background pattern on this.
| | 02:54 | It's really just a little bit of code
setting up a height for our background and a
| | 02:59 | background pattern, as well as
a very slight gray gradient.
| | 03:03 | So you could see that there is our
background that looks really nice.
| | 03:07 | This diamond pattern, we are going to
use this diamond pattern inside the form
| | 03:11 | itself as well. So just by using a
slightly transparent background we can change
| | 03:17 | some of the colors in the gradient
that's behind it and be able to use the
| | 03:21 | same background for different purposes.
| | 03:23 | So we'll go back into out codesnippets
and grab the code for the form itself.
| | 03:27 | Again, this looks pretty long, but it's
just a bunch of different browser prefixes
| | 03:31 | for the different types of
things that we want to do here.
| | 03:33 | So I am going to copy this, go back into
mystyle.css, and get down here. Paste this thing.
| | 03:40 | You could see that in here we are
changing the position of the form itself so
| | 03:45 | that it is centered onscreen, and
we set up a width right here for it.
| | 03:49 | We also set a basic color for the
text elements within, add a little bit of
| | 03:54 | padding, then add a little bit of text shadow.
| | 03:56 | You could see the text shadow on the
edge of some of these text elements.
| | 04:01 | So if you take that out, you could see
how it gives it a little bit more depth
| | 04:04 | when you add the text shadow. Then we add,
| | 04:06 | it's the same copy of the pattern,
but this time we use a partially
| | 04:10 | transparent gradient that
is two shades of black.
| | 04:14 | We are using the gradient as
20% black here to 85% black.
| | 04:19 | So if we took that out, you could see
that it would just be a solid color. And
| | 04:23 | this gradient, by using the same exact
pattern on a different color gradient, we
| | 04:28 | can get a slightly different
effect than on the basic backgrounds.
| | 04:31 | So we could reuse this
diamondpattern over and over.
| | 04:34 | Finally, we give this thing a border
radius so the edges have a little bit of a
| | 04:38 | radius around them, and we also have a
WebKit box shadow that just sets up an
| | 04:44 | inset or an internal drop shadow
inside this element, and that I think looks
| | 04:49 | really good for this form.
| | 04:50 | You're not going to be able to see
that in all browsers, but it looks
| | 04:52 | really nice from here.
| | 04:55 | Going back into our codesnippets, we
will look for some other pieces of codes.
| | 05:00 | So in this particular form I am using some
h2 elements for the titles of this section.
| | 05:05 | So I am going to grab this piece of
code, and it's just simply going to style
| | 05:08 | those a little bit different, just to
make a little smaller, and clean up some of
| | 05:12 | the margins around the h2 tags.
| | 05:15 | Next I am going to style the input
type check box and the input type radio
| | 05:20 | to actually hide them.
| | 05:21 | In this particular case, we want to use
a background that is going to be part of
| | 05:26 | the label, so we don't really want to
see these check boxes, although we still
| | 05:31 | want them to be there so
that they can't become active.
| | 05:33 | Remember that because we associate
the labels with the check boxes, we can
| | 05:38 | simply click on the labels
to activate the check boxes.
| | 05:41 | We don't have to click on
the check boxes themselves.
| | 05:44 | So even though we hide them, we can
still activate them by clicking on the label.
| | 05:48 | So I am come back here to my styles.
| | 05:51 | In this particular style, I am going to
just hide both the input type check box
| | 05:56 | fields and the input type radio fields, by
setting the display of the elements to none.
| | 06:02 | That clears them out and even though
they are not visible, they can still become
| | 06:05 | active, by clicking on the labels.
| | 06:08 | So let's go back into our codesnippet.txt file.
| | 06:11 | So here is the tricky part
about this particular project.
| | 06:15 | In order to have custom controls, we
need to hide the normal check box or
| | 06:20 | radio input fields.
| | 06:21 | We've already done that with the
simple rule that just hides the fields by
| | 06:25 | setting the display of the fields to none,
but we don't want to do that in early
| | 06:29 | version of Internet Explorer browsers,
| | 06:32 | so we need to modify our rules with a hack.
| | 06:34 | We are going to be using a not pseudo-
class, and the not pseudo-class lets us
| | 06:39 | select elements that are
not part of another selector.
| | 06:43 | If we use a selector that doesn't exist,
the rule will essentially cancel itself out
| | 06:49 | and as far as any modern browser that
understands this rule is concerned, it's as
| | 06:53 | good as not using it at all.
| | 06:55 | However, browsers that don't
understand the not rule will ignore the rule
| | 06:59 | altogether and not do any of these things
that we are about to do to these form elements.
| | 07:04 | Since older browsers do not
understand the not pseudo-class or this not rule,
| | 07:10 | they won't even try to display any
of these elements inside the selector.
| | 07:14 | So all these rules right here
will be ignored by browsers that do
| | 07:18 | understand this pseudo-class.
| | 07:21 | Let's copy this code that in most
browsers will take the input type check box
| | 07:25 | field and the input type
radio field and not display them.
| | 07:30 | I've already done that here, but the
problem is that on certain browsers we
| | 07:35 | don't want to hide these input fields.
| | 07:37 | So we are creating a rule that
essentially will work in every browser except for
| | 07:42 | early versions of Internet
explorer. By using this not rule,
| | 07:46 | the not pseudo-class lets us select
elements that are not part of anything
| | 07:50 | else. By using a selector
here that doesn't exist,
| | 07:54 | we are essentially telling new versions
of browsers to perform these rules, in
| | 08:00 | other words hiding the input type
radio and the input type check box like
| | 08:04 | we've done up here, and versions of
browsers that do not understand this not
| | 08:09 | rule, essentially Internet Explorer
before version 9, will not perform any of
| | 08:14 | these style changes.
| | 08:16 | So we are going to take this piece of
code right here and replace our code for
| | 08:21 | hiding the elements right here.
| | 08:23 | So now this code, although it's a
hack, it will prevent versions of Internet
| | 08:27 | Explorer that don't understand the
not rule from hiding the elements.
| | 08:31 | So we are going to do a few more of
those, and we are going to grab a whole bunch
| | 08:36 | of other style rules that will do things
only on browsers that we want to target,
| | 08:42 | which are browsers like
Internet Explorer 9 and later versions.
| | 08:46 | Just pretty much ignore everything
before this and read these style sheets as if
| | 08:51 | you were starting from this point.
| | 08:53 | On browsers that understand it, we want
to change our labels to display as block
| | 08:57 | elements, float to the left,
have a certain amount of padding.
| | 09:01 | It's giving them a little bit of
breathing room so they can have a background
| | 09:04 | image in them and changing the cursor
at the pointer, because normally when you
| | 09:10 | role over an element it
will show this default pointer.
| | 09:14 | So let's go ahead and add those styles here.
| | 09:16 | You will see that I've added
them right here to show you that
| | 09:22 | we've added a little bit of breathing
room to each one of the form elements.
| | 09:26 | We changed the cursor to pointer, so now
when we role over these fields, even when
| | 09:30 | we role over the labels, it will switch
the pointer to hand tool that we can use
| | 09:34 | to click on the elements.
| | 09:36 | This is just a visual change.
| | 09:39 | This is a rule that applies to all the
labels, regardless of the type of labels
| | 09:43 | that they are, whether they are for
check boxes or radio buttons. And then in here
| | 09:47 | I am putting different backgrounds.
| | 09:49 | If the input fields are check boxes
and they have a label, I want the label to
| | 09:54 | have a background of this file called uikit.png.
| | 09:58 | So that adds the check box
backgrounds to the labels.
| | 10:01 | Remember, the check box, not only is
it visually showing you a different
| | 10:06 | background, because if the item is
checked and it has a label, then I am
| | 10:11 | switching the background position of this
particular file that has our user interface.
| | 10:17 | Now I want to show you this file so
you could see how it's built, but we are
| | 10:21 | using something called a sprite so
that I can use a single
| | 10:25 | version of an image several times and
display them in different positions to
| | 10:30 | show different versions of the elements.
| | 10:32 | So if you look at this file called
uikit.png, you will see that in here I have
| | 10:37 | different versions of the radio buttons
and the check boxes and I can use this
| | 10:41 | one file positioned in different
places to show the different versions of this
| | 10:46 | input fields when they get checked on and off.
| | 10:49 | If we take a look at it, this file
here, and we look at our CSS, you could see
| | 10:54 | that I am using the same exact call to
the uikit.png file in each one of the
| | 11:00 | different versions of these input fields.
| | 11:02 | So we are saying, I want to you to choose
the input type check box and I want you
| | 11:07 | to modify the label element--
| | 11:09 | remember the label is actually what has
this background with what looks like a
| | 11:14 | check box or a radio button--and I
want you to make that background this file
| | 11:19 | called uikit at this X and Y position.
| | 11:23 | At this X and Y position, minus 43
pixels, the uikit is going to show the
| | 11:28 | unchecked version of our check box.
| | 11:31 | And when we go to the style sheet and we
see when we need a check version of the
| | 11:36 | labels, you could see that the
background position goes a little lower to
| | 11:40 | position 0 and minus 65, so it picks up
the checked version of this background.
| | 11:47 | The same thing happens to the radio
buttons. When I call the normal radio button,
| | 11:51 | notice that I don't need any X and Y
values that's because this uikit, by default,
| | 11:56 | starts off with the unchecked
radio button and when I look at the radio
| | 12:01 | button that has been
checked, I call the same file.
| | 12:04 | Notice that when I am using the checked
pseudo-class I don't need to set the background;
| | 12:09 | all I do is set the position of the
background to another X and Y position.
| | 12:13 | So let's take a look at how the
different versions of our files are
| | 12:18 | handling these elements.
| | 12:19 | So I am going to go to BrowserLabs and
I am going to load a copy of this file
| | 12:24 | that I've already uploaded.
| | 12:27 | Although it doesn't look at
great in IE7, it's still usable.
| | 12:31 | These check boxes are still on.
| | 12:33 | Similar thing happen on IE8, because we
prevented some of these backgrounds from showing.
| | 12:37 | If the backgrounds were showing, you
would actually see the check box on top
| | 12:41 | of the background, with the pretty
version of the check box, and that just
| | 12:44 | really doesn't look great.
| | 12:45 | However, IE9 looks a lot better.
It does use those backgrounds.
| | 12:49 | It doesn't have the inset drop
shadow or some of the other things, but
| | 12:54 | anything else, like Firefox and any
version of Chrome or Safari, will pick up
| | 13:00 | the entire style pretty well.
| | 13:02 | Although it doesn't look awesome in
every browser, I think it looks pretty
| | 13:05 | good, and it's still usable on earlier
versions that don't support some of these
| | 13:09 | new elements.
| | Collapse this transcript |
| Working with select fields| 00:00 | Although we've been able to find
creative ways to style other form elements,
| | 00:04 | select and option fields are
the black sheep of CSS styling.
| | 00:08 | Although a lot of browsers will
allow you to style many elements, browser
| | 00:11 | support is very inconsistent.
| | 00:13 | So I'm going to open up the exercise
files, and open up the Starting Points,
| | 00:18 | find a starting point for this video, and take
the Working Folder, copy it into our Desktop.
| | 00:24 | And I'm going to drag that into Espresso.
| | 00:26 | We are going to copy the codesnippets.txt file.
| | 00:30 | We're going to take it and drag it
into the Workspace, double-click onto our
| | 00:35 | style.css file to bring it into the
Workspace, and the index.html file to also
| | 00:40 | bring it into the Workspace.
| | 00:42 | And then I'm going to Option+Click
on the Preview to get a live preview.
| | 00:45 | This is a really simple page with just
a form element and a label for a select
| | 00:53 | field with a few options where
| | 00:55 | we can choose different
options of food favorites.
| | 00:58 | One thing that you'll notice about
working with select fields is that clicking
| | 01:02 | on the labels does not
automatically pop up the list.
| | 01:06 | When we work with check boxes, we can
click on the label to activate the check
| | 01:10 | box or the radio button.
| | 01:12 | We can't really do that with this.
| | 01:14 | So it prevents us from doing some tricks
to create the styling that we need and
| | 01:19 | properly hide the select field
while still being able to choose it.
| | 01:23 | So if we could do that, we could just
hide the select field and still be able to
| | 01:27 | turn it on by clicking on the label,
but because labels don't pop up select
| | 01:32 | fields, we can't use that trick.
| | 01:34 | For this particular project, we're
going to go to the codesnippets and scroll
| | 01:39 | down to the section for this video and
copy our style sheets that will normalize
| | 01:46 | our CSS and call our mystyle.css file.
So we'll go into the index document and
| | 01:52 | in the head section we'll call those.
| | 01:54 | You can see that it's already normalizing some
of the fonts and the spacings in our elements.
| | 01:59 | And now I'm going to go into the
codesnippets and grab some of the basic styling
| | 02:04 | to clear out some of the
other form element defaults.
| | 02:08 | So I'm going go into mystyle and paste
that, and you can see that I am moving the
| | 02:12 | form down, getting ride of some of
the default appearance for elements.
| | 02:16 | So that hid the outline of this select
field and made everything transparent.
| | 02:21 | We're also calling our PIE.htc file,
which will try to make some of the new CSS3
| | 02:27 | elements available for older browsers.
| | 02:29 | So let's go back into codesnippets, and
we will grab the next section of code.
| | 02:34 | And this is just some basic code that
will style different things like the
| | 02:40 | background and the form field and then try
to set a background for the select field.
| | 02:45 | So I'm going to copy this and go back
into my style sheet and apply it right here.
| | 02:50 | You can see that we've added a
background color, just a gray background, changed
| | 02:55 | our form to be positioned in the middle
of the screen, and given it a width so
| | 02:59 | it kind of centers this
in the middle of the screen.
| | 03:02 | And then we made an attempt
at styling our background.
| | 03:05 | It actually looks pretty
good on this particular browser.
| | 03:08 | It is setting a background color, a
border-radius. And I actually bring in a
| | 03:14 | select.png file that is just the
background with two different states.
| | 03:18 | You can see them right here.
| | 03:19 | If I activate the select box, it
will switch to that second state.
| | 03:25 | So when it's not selected you could see
that it looks like its gray and by using
| | 03:30 | this sprite, when I select it,
you can see that it turns blue.
| | 03:34 | So when it has focus it changes the
background to the same background add a
| | 03:38 | different position, and this
is what we call a CSS sprite.
| | 03:41 | We take a single file and we position
it in two different places when we need
| | 03:45 | an element to change.
| | 03:47 | And this looks really good on this browser.
| | 03:49 | We've done some styling to the option,
which should theoretically show us a
| | 03:54 | different style when we
actually use the pop-up menu.
| | 03:56 | However, you could see that Safari
doesn't take any of the style that we've
| | 04:00 | added here into account.
| | 04:01 | We set the background to a gray color,
changed the color of the font to a
| | 04:05 | lighter gray color, and added
some padding and text alignment.
| | 04:09 | You could see that this WebKit
version of this browser completely ignored
| | 04:13 | everything that we have used in
this styles for this options fields.
| | 04:18 | This is kind of a
depressing state for select fields.
| | 04:21 | There is no way to make a lot of
| | 04:23 | even the newer browsers behave consistently
when displaying select fields or option fields.
| | 04:28 | Let's take a look at how this
file looks on different browsers.
| | 04:32 | I'm going to switch over to BrowserLab
and pull up a version of this file that
| | 04:36 | I've already uploaded to a server.
| | 04:41 | You could see that Internet
Explorer 7 doesn't even bother changing the
| | 04:44 | background of this element.
| | 04:45 | Internet Explorer 8 does, but it
places the default form element on top of
| | 04:51 | the background image.
| | 04:52 | It's not really horrible, except for
this little select field element right here.
| | 04:56 | And something similar happens in Firefox.
| | 04:59 | This looks beautiful, except that you see this
little form element that we can't get rid of.
| | 05:04 | And then we go to Chrome,
and that looks pretty good.
| | 05:08 | Safari also looks pretty good;
| | 05:10 | however, as we saw when we were
looking at it on a live browser, Safari
| | 05:15 | completely ignores the styling
of the option fields altogether.
| | 05:18 | I think your best bet is to just
create some styles, test it in different
| | 05:23 | browsers, try to find some sort of
middle ground, and live with the difference, or
| | 05:26 | just not try to style the
select and options field at all.
| | 05:31 | I'm not really holding my breath for browser
manufacturers to fix some of these problems.
| | 05:36 | I could see how some people might be
confused by inconsistent control elements.
| | 05:39 | There is a few ways that you can get
around this with JavaScript, but that
| | 05:43 | creates additional usability problems
for people that don't have JavaScript,
| | 05:47 | so that itself might not be the best solution.
| | Collapse this transcript |
|
|
3. Laying out FormsFloating fields| 00:00 | If your forms are simple and have only
text area and input fields, there is a
| | 00:04 | couple of quick ways we can lay them out.
| | 00:06 | So I am going to open up the exercise
files, open up the Starting Points folder,
| | 00:10 | and find a starting point for this movie.
| | 00:14 | And I am going to copy the Working
Folder onto the Desktop, take the Working
| | 00:18 | Folder and drag it into Espresso,
and I am also going to copy the
| | 00:23 | codesnippets.txt file by dragging it
into the Workspace, and double-click on the
| | 00:28 | index.html file and the mystyle.
css to open that into the Workspace.
| | 00:33 | And I am going to put this on this side.
| | 00:35 | First I am going to click on the index.
html file and Option+Click on Preview to
| | 00:41 | bring up the live preview of the form.
| | 00:43 | It's a pretty simple form that
has a couple of input fields.
| | 00:46 | You can see a text input
field and a password input field.
| | 00:49 | Input fields and labels are by default
displayed as inline items, which means
| | 00:54 | that they'll all run together, and that
may not be the best way to display them.
| | 00:58 | So I am going to show you a couple of
ways of laying out these elements, but
| | 01:02 | first we need to go ahead and normalize
a CSS file to reset the styles for all
| | 01:06 | browsers and add a link to the empty CSS file.
| | 01:09 | I am going to go back to codesnippets
and find the section for this movie.
| | 01:14 | And I am going to copy these two lines
right here into our index file, in the
| | 01:18 | head section, so we are
linking to those two style sheets.
| | 01:23 | And the normalize.css file will try to
make these elements appear as consistent
| | 01:28 | as possible in multiple browsers.
| | 01:31 | So we are going to go back now into
codesnippets and grab the first piece
| | 01:36 | of code for our form.
| | 01:38 | It is just going to have additional
reset code and code for styling the body,
| | 01:44 | which will place the background on the
body, as well as the h2 and the paragraph
| | 01:48 | tag that we see on the form.
| | 01:50 | So I am going to copy that, bring it into
the mystyle.css file, and paste it right there.
| | 01:54 | You can see that the background_wood
pattern that we have in our HTML file
| | 01:59 | appears, and we have also the h2
tag and the paragraphs tag style with
| | 02:03 | pretty simple styles.
| | 02:04 | I am going to go back to codesnippets
and grab some basic code for the form.
| | 02:09 | And on this code, we are going to
see the basic elements that style our
| | 02:19 | background, which are just the width and
a piece of centering code for the width.
| | 02:24 | I am going to position this a little bit,
50 pixels below the top of the screen.
| | 02:28 | And then we have some gradients
with browser prefixes for the different
| | 02:33 | browsers, as well as a radius for the
edges of this form and a shadow, a slight
| | 02:41 | shadow, and then finally we add a
little bit of padding, so we are offset.
| | 02:46 | We have a little bit of
breathing room inside this form element.
| | 02:49 | So back to our Codesnippets.
| | 02:51 | I am going to grab the next piece
of code, which will style the button.
| | 02:54 | And back into the mystyle.css file.
| | 02:59 | We'll paste this.
| | 03:02 | And in this case we are just creating
some basic styles for the buttons, but
| | 03:07 | because we want to align the button to
the right-hand side of the screen, we are
| | 03:10 | floating the button to the right.
| | 03:12 | And that creates a little bit of a problem.
| | 03:14 | Whenever you float an element, the
container of the element loses track of the
| | 03:19 | height of this element that's been floated.
| | 03:22 | So what we need to do is clear the
floating of this element by adding some code.
| | 03:28 | And unfortunately, different browsers
require different versions of this code,
| | 03:32 | so I am going to go back into
codesnippets and grab the next piece of code.
| | 03:36 | So this will let the container
know about the height of this element.
| | 03:41 | And I am going to copy this back
into mystyle.css, and I am just going to
| | 03:45 | paste that right there.
| | 03:46 | And I have created this in a class
called group, so we need to add this class
| | 03:51 | to the HTML element.
| | 03:53 | We'll do that by going to the index file and
adding a class right next to our login form.
| | 03:59 | We have class already, but you can add
multiple classes to an element by using a
| | 04:03 | space between classes.
| | 04:04 | So we could just simply type in
the group class and you can see that
| | 04:07 | immediately, the container
understands the height of this element.
| | 04:11 | One option for laying out this form
is to align our labels to the top.
| | 04:16 | So we'll get in- to our
codesnippets file and scroll down to grab this
| | 04:20 | version of the code.
| | 04:21 | And I am going to paste that at
the bottom of the mystyle.css form.
| | 04:28 | You can see that now the labels are at
the top, and what we've done here is just
| | 04:32 | simply declared the labels of the
document to be a display type block.
| | 04:37 | That makes them appear on their own line.
| | 04:39 | And then we set some basic fonts for it.
| | 04:42 | And then for the input fields, all we
are doing is just setting up a width to
| | 04:46 | make sure that it aligns nicely with
the edge of the form, and that's a pretty
| | 04:50 | quick and easy way of setting
the labels to appear at the top.
| | 04:54 | So labels at the top of the form are a
little bit better for mobile devices,
| | 04:59 | because when you pull up a form in a
mobile device, the browser in the mobile
| | 05:04 | device will zoom into the form.
| | 05:06 | And if you have the labels to the left
of the form, it's a little bit difficult
| | 05:09 | sometimes to read them.
| | 05:10 | So let's go ahead and pull up
this form in our iOS Simulator.
| | 05:14 | So I am going to find the iOS Simulator.
| | 05:16 | I am going to open up Safari.
| | 05:18 | We'll need to drag this index file
into our browser, so I am going to drag it
| | 05:22 | from the Project Files into our browser.
| | 05:25 | If I click on an input field,
the form automatically zooms in.
| | 05:29 | Now if the label was to the left of the form,
we would have a hard time reading the label.
| | 05:33 | But because it's at the top of the form, we
can read it very well because it's right there.
| | 05:38 | So if you are designing forms for
mobile devices, sometimes putting the labels
| | 05:43 | at the top is really convenient;
| | 05:44 | however, sometimes there is a lot of
room on horizontal layouts on desktop
| | 05:49 | devices, so labels to the side might be better.
| | 05:51 | So let's see how we could do that.
| | 05:53 | I am going to go back into my
codesnippets file and find this version of the
| | 06:01 | code and replace from the label all the
way to the input fields, so that we can
| | 06:09 | have a new version of the code.
| | 06:10 | You could see that now the labels
are side by side, and to do that, we've
| | 06:13 | floated the labels to the left but
aligned the text to the right and then added
| | 06:19 | some padding, and then we
floated the input fields to the right.
| | 06:23 | Now if you look at that on our mobile
device--I need to make sure that I save
| | 06:29 | this so that we can preview it on
a mobile device, so let me save the
| | 06:32 | mystyle.css file and then go to mobile
Safari, hit refresh-- we could see that
| | 06:37 | the labels appear to the side.
| | 06:39 | I am going to zoom out all the way and
when I click on the labels, you can see
| | 06:43 | that the labels to the side are a
little bit hard to read on mobile devices;
| | 06:46 | people might have to click and drag to
see what you are supposed to type in there.
| | 06:50 | So definitely this layout is a
little tougher for mobile devices.
| | 06:54 | However, you could see that the other
layout with the labels on top obviously
| | 06:58 | takes up a lot of vertical room, so that
might not be the best thing for desktop
| | 07:03 | devices where you have a lot of horizontal room.
| | 07:06 | But you know, most people use their
mobile devices in portrait orientation, and
| | 07:12 | so you'd really have to balance what it
is that you want to accomplish and maybe
| | 07:16 | perhaps do different
layouts for different devices.
| | Collapse this transcript |
| Organizing forms with lists| 00:00 | If you think about it, a form is really
just a list of elements and labels, and
| | 00:04 | some people like to code more complex
forms with lists, especially when the
| | 00:09 | forms have radio or check box fields.
| | 00:11 | So let's see how you could do that.
| | 00:12 | I am going to open out the exercise
files and find the Starting Points folder,
| | 00:17 | open that up, and then go to the
starting point folder for this video, make a
| | 00:21 | copy of the Working Folder into our Desktop.
| | 00:24 | I am going to drag that into Espresso.
| | 00:27 | Okay and then I am going
to copy the codesnippets.
| | 00:31 | I am going to move the codesnippets.txt file
into our Workspace and move this over here.
| | 00:37 | Double-click on the index file and the
mystyle.css file to bring them into the
| | 00:42 | Workspace, and finally I am going to
resize this and click on the index file and
| | 00:47 | Option+Click on the Preview
to pull up a live preview.
| | 00:52 | So this particular form doesn't
have anything in the body section,
| | 00:56 | so right now it doesn't look like anything.
| | 00:58 | So let's take a look at how you
would code this form without using lists.
| | 01:01 | First, I am going to go into
codesnippets and find the section for this video.
| | 01:12 | And first I am going to grab this
version of the form and paste it into an index
| | 01:17 | file and the body section.
| | 01:18 | So you could see that this is just a form.
| | 01:21 | One of the problems without using list
elements is that everything kind of runs
| | 01:25 | together on a form. By using lists, we
can have nice containers that are very
| | 01:29 | easily targeted with CSS.
| | 01:31 | So let's see how this same exact
form could be coded with list items.
| | 01:37 | So we'll go back in here and
copy this version of the form.
| | 01:41 | It's a little bit longer.
| | 01:44 | Back into the index.html file, and I am
going to replace this form element with
| | 01:50 | the new version of the form.
| | 01:51 | You can see that it
already looks more organized.
| | 01:53 | We are going to have to do a few
things to get rid of these numbers that an
| | 01:57 | ordered list places when you create it.
| | 02:00 | So, I don't necessarily
want these numbers to be there.
| | 02:03 | But you could see that our lists are
now nicely grouped into list items, so
| | 02:07 | every label and input field in a list item.
| | 02:10 | And when we get to the radio fields you
can see that that is coded as a sublist
| | 02:16 | that is inside this other list element.
| | 02:18 | So again, it's easier to get to targets
when you group them into elements in HTML.
| | 02:24 | So, let's see how would style this.
| | 02:26 | First I am going to go back into
codesnippets.txt. And the first thing I am going to
| | 02:30 | do is just copy the normalize
and mystyle.css links into our HTML.
| | 02:37 | So back in here, I am going to go up and I
am going to paste this into our head section.
| | 02:42 | You could see that some of the styles
are already being applied over here.
| | 02:46 | And then back into codesnippets, we
are going to grab just a little bit more
| | 02:52 | normalizing code, as well as a float-
clearing piece of code right here, just in
| | 02:57 | case we float any items when
we are designing this form.
| | 02:59 | So, I am going to copy that, click on
the mystyle.css document, and paste that.
| | 03:04 | And it cleared some additional things
about this form element, so we're ready to start
| | 03:08 | to start our main styling for this form.
| | 03:10 | So back into codesnippets, and we are
going to get some code for the body element.
| | 03:15 | The body element is just going to
have a nice background with a bunch of
| | 03:19 | prefixes. So I am going to go into
mystyle.css, paste that, and you could see
| | 03:24 | there is just a gradient that goes
from top and bottom, and we have all the
| | 03:28 | different browser prefixes here.
| | 03:30 | So and that's why it look so long.
| | 03:34 | So back into codesnippets. Now we are
going to style the form element itself.
| | 03:39 | It looks super long, but it's just a
bunch of different things we're doing with
| | 03:44 | prefixes for the different browsers. So
I am going to paste that, and you could
| | 03:48 | see that I get a background with a
pattern and a gradient behind the pattern, and
| | 03:55 | you could see that we have also moved
this center form element and moved it
| | 03:59 | down a little bit and set
up some padding and a border.
| | 04:04 | So everything else is just making the
edges round here and also just adding a
| | 04:09 | shadow onto the form.
| | 04:10 | So it looks a little nice, but we have
to make it really long to make sure it
| | 04:14 | works in as many browsers as possible.
| | 04:16 | Okay, so we are going to copy the next
piece of code, which is going to style the
| | 04:22 | input fields and the buttons. And I
am going to copy that back into the
| | 04:27 | mystyle.css, and I am going to paste that.
| | 04:29 | You could see that the input fields get
a nice border around the input fields, a
| | 04:36 | white background, and they get a width
and they get aligned also to the right so
| | 04:40 | they aligned with the right of the form.
| | 04:42 | And our buttons are also aligned to the
right by floating them to the right, and
| | 04:47 | thank goodness we have the clearing
code that makes sure that the form element
| | 04:50 | takes into account the height of each
of these other elements. And we have some
| | 04:55 | padding and just some backgrounds
with the different browser prefixes.
| | 04:59 | So, if you look at it like this, you
could see that the button gets a background
| | 05:06 | right here, and different versions of
different browsers use these different
| | 05:11 | prefixes to make that work.
| | 05:12 | And we also give it a little border again.
| | 05:14 | Some browsers give
button borders and some don't,
| | 05:17 | so that's why we have to clear them all
out first and then insert them back in
| | 05:19 | at a later point with CSS.
| | 05:22 | So this form is looking pretty good.
Some of these other elements aren't
| | 05:24 | perfectly aligned yet, but we'll fix
that in a minute. Back into codesnippets.
| | 05:29 | And now I am going to add
some code to fix our list items.
| | 05:33 | So I am going to copy this into my
style sheet, and I am going to paste this
| | 05:43 | code. And when we get done with it, you'll
see that the form looks really beautiful now.
| | 05:48 | So let's go into the
different pieces of what we are doing.
| | 05:51 | The first thing that you have to do
with any list items is make sure that you
| | 05:55 | clear the default indentation that
happens with form elements, the default
| | 06:01 | indentation that happens with lists, and
also get rid of the number system that
| | 06:06 | happens with lists as well.
| | 06:07 | So, if you get rid of this, you can
see that ordered lists by default have a
| | 06:12 | little bit of margin to them.
| | 06:14 | So by clearing this out, we make sure
that our forms align a little better.
| | 06:18 | And then whenever we have an item
like this, we are not targeting the first
| | 06:23 | level of the lists, but we are actually
targeting the second level of the lists.
| | 06:28 | So we are doing something similar to
make sure that our set member of this
| | 06:31 | Beginner and Pro section are check boxes
that are a list inside this other list element.
| | 06:36 | So we have to deal with how we want to pad
them in this case and how we want to float them.
| | 06:41 | If we didn't float these elements,
they would not align properly to the edge
| | 06:45 | of the other fields.
| | 06:46 | So, a little bit of cleanup there. And
then each individual list item that is a
| | 06:51 | second level list item
| | 06:53 | we have to display as inline so that
they appear side by side, because you may
| | 06:58 | want your radio buttons to appear right
on top of each other, but if you don't,
| | 07:01 | you have to change how that second-
level list, not the first-level list, but
| | 07:06 | the second-level list displays.
| | 07:08 | And if you set it to display as
inline, the radio buttons will come right
| | 07:12 | up next to each other.
| | 07:14 | Then we have to worry about styling
our label and our labels, as you could see
| | 07:19 | right here, for the second level list.
| | 07:22 | So this is dealing with ordered lists
inside other ordered lists, and for that
| | 07:26 | we need to apply some styling to make
sure that they don't this, because these
| | 07:31 | list items, if they don't have custom
styles, will take up the same structure as
| | 07:37 | these normal list items.
| | 07:39 | And so we want to get those to be a
little bit different, and so we are
| | 07:42 | fixing that right there.
| | 07:43 | Finally, we need to also take into
account the labels right here for these
| | 07:49 | elements, as well as this element right
here. And if you look at the HTML, you'll
| | 07:53 | notice that this element called Sign up
for is not really a label, because the
| | 08:00 | labels on radio buttons are placed to
the right of the radio buttons themselves.
| | 08:06 | These are actually the labels.
| | 08:08 | Whereas in the Username and Password,
we can style the label field itself,
| | 08:12 | because it's to the left of the fields.
| | 08:14 | When we get into this label group,
we need to have a separate label that is not
| | 08:19 | attached to a specific element like
these other ones are, and so we need to style
| | 08:24 | both the list item labels, which are
right here, as well as this other class that
| | 08:31 | I created called a group label that
will group these elements together.
| | 08:35 | And that just gets a specific font and
some other basic alignment and display
| | 08:40 | elements, as you could see right here.
| | 08:42 | So, this targets this label as well as
these other labels and by separating a
| | 08:48 | style with a comma, we can define a
style for two different fields or for two
| | 08:53 | different elements in the same place.
| | 08:54 | So we are making sure that those
styles all match together and are the same.
| | 08:58 | Let me pull up a BrowserLabs over
here. And you could see that the layout is
| | 09:05 | not perfect in Internet Explorer 7, and the
form looks decent on these other older browsers.
| | 09:11 | It looks a lot better on 9.0 and Firefox.
| | 09:15 | It looks really good.
| | 09:16 | It really picks up everything on
some of these more modern browsers.
| | 09:20 | If you want to try to emulate some of
these elements into the older browsers,
| | 09:24 | like the gradients, you may try to use CSS3 PIE.
| | 09:28 | I don't use that particular library all
the time because it can cause problems,
| | 09:32 | especially when you have more
complicated forms or more complicated layouts in
| | 09:37 | your forms. But you may give it a shot
and see how well it works with something
| | 09:41 | like BrowserLabs to check out how
they work in older versions of browsers.
| | 09:46 | And with any of these kind of advance
lab techniques you are going to have to
| | 09:50 | make a decision as to how
far back you want to support.
| | 09:53 | I think as long as you give a decent
experience to older browsers, it's a good
| | 09:58 | thing, but don't go overboard trying
to make everything work on every single
| | 10:01 | browser and platform.
| | Collapse this transcript |
| Grouping elements| 00:00 | Creating groups of form elements helps
you organize the content in your forms
| | 00:04 | into sections that can be used for
layout purposes, or just to make the
| | 00:08 | information in a long form easier to read.
| | 00:11 | You can organize the information using
the field set tag and add a title to the
| | 00:15 | form through the legend field;
| | 00:17 | there are some compatibility issues,
so we'll take a look at how we deal
| | 00:21 | with grouping elements.
| | 00:22 | I'm going to open up the exercise files,
and open up the Starting Points folder
| | 00:27 | and find a starting point for this movie.
| | 00:29 | I'm going to grab the Working Folder
and make a copy of it onto the desktop.
| | 00:36 | And then I'm going to drag
that folder into Espresso.
| | 00:39 | I'm going to get the codesnippets.txt
document and drag them to the workspace,
| | 00:46 | double-click on the index.html file.
| | 00:49 | For this project we're using something
that you might have already seen in James
| | 00:53 | Williamson's CSS: Core Concepts classes.
| | 00:56 | Some of these assets are from things
that he has done on this particular course,
| | 01:01 | if you want to take a look at how he
creates the styles for this project, make
| | 01:04 | sure you take a look at this course.
| | 01:06 | We are going to isolate our form element
CSS into a separate CSS file, so for this
| | 01:12 | project we have a main.css file that
we're already calling in here, and we're
| | 01:17 | going to call this form.css file.
| | 01:19 | We're going to double-click on it,
because that's the one that we're going to be
| | 01:23 | working on, and I've isolated all
the form code into the separate file.
| | 01:27 | So if you go to the index page, and you
Option + Click on Preview to see the file,
| | 01:33 | you'll see that the page itself has a
lot of different styles that are already
| | 01:38 | built into the project, and we're
just going to add a form here, and add a
| | 01:42 | form.css to style the form.
| | 01:49 | So obviously the first thing we need
to do is go to the codesnippet and make
| | 01:53 | sure we include the form.css call into
our index file, so I'm going to go into
| | 01:58 | the HTML document and right after the
call to the main.css, I'll add another one
| | 02:03 | to our form.css file and we're going to
add some styles into that form element.
| | 02:07 | So going to switch to codesnippets again
and we'll get a simple version of our form.
| | 02:13 | So I'm going to select that and copy
it and paste it into an index file,
| | 02:20 | I've saved a large hole right here for our
form, so I'm going to paste that in there.
| | 02:25 | You can see that we have a basic form,
right now it has no styles, other than
| | 02:30 | the default browser styles, so
everything is kind of running together, all these
| | 02:34 | input fields are running together, we
have a list, we have a text area and this
| | 02:37 | is just your typical comments form, and
it has a little bit of James' humor, So
| | 02:43 | pour your heart out, and
Oh really?, which is cool!
| | 02:46 | And we're going to style those,
but it's a really simple form, pretty
| | 02:50 | straightforward, just different form
elements, so we'll go to codesnippets and
| | 02:56 | create some basic styles for some of
the fields, so we'll grab this and this
| | 03:01 | is just making the label block element,
the input fields, giving them a width,
| | 03:06 | and styling our submit buttons, and go into
the form.css file, we'll paste this in here.
| | 03:12 | You can see that the form already takes
up quite a good look and feel with just
| | 03:17 | a little bit of code that we've added here.
| | 03:19 | So just some basic styles, it
doesn't group these elements into different
| | 03:24 | sections and we're going to do that right now.
| | 03:25 | So if you take a look at this form,
there are two distinct groups of
| | 03:28 | information in the form.
| | 03:30 | First there is user information area
and then a couple of questions about the
| | 03:34 | type of information that people need
to type, and a few questions about the
| | 03:41 | information that you're after here
and then the actual comments field.
| | 03:45 | So in order to create groups of elements,
HTML provides the field set tag and you
| | 03:50 | shouldn't arbitrarily create groups of
elements just to put them together, the
| | 03:54 | fields should be related
into different field sets.
| | 03:57 | So I'm going to grab some code with
this same form already split up into
| | 04:01 | different field sets and this is
pretty much the same code as before, but
| | 04:06 | we've added these field set tags right here
and you see the other group is right there.
| | 04:11 | So I'm going to grab this, it's a little
long, but it's the same code as before,
| | 04:15 | just with these additional field set tags.
| | 04:18 | I'm going to copy that, go back into my
index file, and I'll just replace this
| | 04:22 | entire form right here
with the new version of it.
| | 04:26 | So when you add a field set, by default
the browser places a border around the
| | 04:30 | section, you can see
that it created this border.
| | 04:32 | And I think it's pretty ugly, so we
need to go ahead and redefine the way that
| | 04:38 | the browser is displaying these things.
| | 04:40 | So we're going to grab another piece
of CSS, back into our codesnippets, and
| | 04:45 | you'll see that I just have some basic
styling, because I really don't like the
| | 04:49 | default sort of border that the
browsers give onto field sets.
| | 04:53 | So I'll just grab that, go back
into our form.css, and I'll add this.
| | 04:57 | And this is just making sure we get
rid of that ugly border, giving it a
| | 05:01 | background color and then actually
giving it a radius only on one side of the
| | 05:08 | form, so you could see the radius is
right here, not on the other side, and just
| | 05:13 | adding a little bit of breathing room
into the form, so that already looks a lot
| | 05:17 | better than it did just a minute ago.
| | 05:19 | So you can add headlines to your
different field sets by adding a tag called the
| | 05:24 | legend tag, and the legend tag
describes what these sections are about.
| | 05:29 | The tags are pretty simple.
| | 05:30 | We'll go into our codesnippets and grab
another version of our form, this one is
| | 05:34 | again the same as the previous version,
except that it adds a legend field right
| | 05:38 | here and right here to define a legend
for each one of the field set sections.
| | 05:42 | So I'm going to grab this code, and
I'll copy this, go back into our index file
| | 05:49 | and I'll replace this version of the form.
| | 05:54 | And you could see that at the top of our
forms, we see these legends that define
| | 05:59 | what the forms are supposed to be about.
| | 06:01 | Now I don't really like the way that
the browsers display this and as a matter
| | 06:06 | of a fact there's a problem because
there are some serious inconsistencies
| | 06:09 | between the different platforms
when they display those borders.
| | 06:13 | If you go to Internet Explorer and take
a look at this form, you'll see that the
| | 06:17 | legends are displayed within the field set box.
| | 06:21 | In any other platform the field sets are
around the border, which I don't really
| | 06:25 | agree with it being around the border
like this, but that's the way most browsers
| | 06:29 | treat it, and so we're going to have
to do some code in order to fix it, but
| | 06:33 | let me show you how this
looks on different browsers.
| | 06:35 | So to do that, I'm going to make sure
that I save this file, and I'm going
| | 06:40 | to actually upload it to a server, so
that we can pull it up in BrowserLabs
| | 06:44 | to take a look at it.
| | 06:45 | So I'm going to close these things out
and I'm going to open up my FTP program,
| | 06:52 | which is Cyberduck and I've
already created a link to our server.
| | 06:58 | If you need help with this make sure
you take a look at the movie on setting up
| | 07:01 | your working environment.
| | 07:02 | So I'm going to double-click to open
up this shortcut to our server, and I'm
| | 07:08 | going to open up the Working Folder and
copy all these files into our server, so
| | 07:14 | just click and drag, it will take
a second to upload all the files.
| | 07:20 | Once this is done, we can switch over
to Adobe BrowserLab and pull up this web
| | 07:24 | site address into BrowserLabs to
see how it looks on different browsers.
| | 07:28 | So as you can see we're looking at
this thing in Internet Explorer 7 and the
| | 07:33 | field set display is inside the box,
which really seems like the right way of
| | 07:37 | doing it, but any browser like Safari,
or let's try Chrome, it's right here on
| | 07:45 | the edge of the border of the field set,
you can see Firefox, everything else,
| | 07:51 | other than Internet
Explorer, let's check out IE 9.
| | 07:54 | It also displays it within, so we're
going to have to figure out a way of
| | 07:58 | making it look the same on different
browsers, and it's going to be a doozie,
| | 08:02 | let me show you how you do that.
| | 08:06 | So, I'm quitting out of Cyberduck,
because I'm done with that and I'm going to
| | 08:08 | pull back my Espresso window and
what we're going to do is go back into
| | 08:13 | codesnippets, and the first thing we
need to do is actually hide the legend, so
| | 08:19 | we're going to hide the legend that
appears right here, and then we have some
| | 08:23 | special code to actually add the legend back
into browsers that are not Internet Explorer.
| | 08:30 | So, we are going to make the legend
disappear, except on browsers that are not
| | 08:34 | Internet Explorer. In those browsers we
are going to add the legend back using
| | 08:39 | the before pseudo-class, this pseudo-
class will add content into a container.
| | 08:45 | In this case it's going to
be the field set container.
| | 08:47 | So we are going to take this legend
out of here and we are going to put it at
| | 08:50 | the top of our field set.
| | 08:51 | So let me copy this, and go back into our
form.css file and we'll add this piece of code.
| | 08:58 | What we are going to do is hide the
legend, and then we added some code that
| | 09:03 | is going to add this legend back into the
field set using an attribute called title.
| | 09:09 | Now, we don't have that attribute yet, so all
we've managed to do here is hide the legend.
| | 09:13 | So I'm going to go back into
codesnippets and what I'm going to do is add the
| | 09:17 | title field into each field set, and
what that second piece of code is going to
| | 09:22 | do is take this title and put it
at the beginning of each field set.
| | 09:25 | It's going to add the legend back into
the form inside at the top of the field set.
| | 09:31 | I'm going to copy this form code and go
into our index file, and then I'm going
| | 09:36 | to find the form and replace it and
this is the same code as before, but all we
| | 09:41 | have done here is added the title tag
into the field set, and with our little
| | 09:48 | hack that we are doing here, we have
told the field set, to add the beginning
| | 09:53 | of the field set, add itself, the title
tag, and that's what this is, and then we
| | 09:58 | have defined a style for
how that's supposed to look.
| | 10:02 | Now this sounds really awesome, but
Internet Explorer 7 does not support the
| | 10:06 | before pseudo-class. This will work
in every browser, except for Internet
| | 10:10 | Explorer 7, so we actually need to do
another part of this hack which will be
| | 10:15 | adding a special piece of code, so that
we allow Internet Explorer 7 to display
| | 10:20 | the tag as it normally would.
| | 10:22 | So we'll go back into codesnippets and
grab our last piece of our hack here, and
| | 10:27 | what this will do is this is conditional
code for telling things that are lower
| | 10:31 | than, and that's what this lt stands
for, Internet Explorer 8, so Internet
| | 10:35 | Explorer 7 and before.
| | 10:37 | Since it already displays the legend
inside the field set anyways, we're
| | 10:41 | just going to tell it how to style that
legend so it displays properly on those browsers.
| | 10:46 | I'm going to copy this piece of code,
this will go in the index file and we can
| | 10:52 | put this in our head section,
so it goes before anything else.
| | 10:57 | And now this will display adequately
in all browsers, including Internet
| | 11:01 | Explorer 7, so let me go ahead and
save this and I will hide these again.
| | 11:08 | I will pull up my copy of Cyberduck,
and we are already logged into our form.
| | 11:15 | I'm going to open this working
folder and copy all these files in there.
| | 11:19 | I probably don't need to copy the
images file, let me just copy the CSS and
| | 11:26 | the index file, since this is the only things
that we changed, and we'll hit Continue
| | 11:35 | here to replace those files, and now let's go
back into BrowserLab and refresh our browser.
| | 11:42 | And as you can see Internet Explorer 9
is looking pretty good, let's go back
| | 11:46 | into Internet Explorer 8, it also
looks pretty good, both of those browsers
| | 11:50 | understand the before pseudo-class,
so they take the first part of the hack
| | 11:54 | and Internet Explorer 7 doesn't, but
because it already displayed the element
| | 11:59 | in here, all we had to do is create a
hack just for Internet Explorer 7, and
| | 12:02 | if we look at other browsers like
Firefox, they will all pick up the proper
| | 12:07 | styling for that element.
| | 12:11 | You should really look at grouping
similar content into content groups whenever
| | 12:15 | possible in your forms. We've also
managed to learn about a couple of ways to
| | 12:19 | handle form inconsistencies which
continues to be a very challenging topic
| | 12:24 | when dealing with forms.
| | Collapse this transcript |
| Floating groups| 00:00 | If you're using field set tags to
group elements in your forms, the field set
| | 00:04 | tag becomes a container that can
be floated or positioned with CSS.
| | 00:08 | In this video I am going to show you
how to take advantage of the extra space
| | 00:12 | in some desktop browsers by floating the
elements in our forms so that they are side by side.
| | 00:17 | We are going to start from the files
in the previous movie on group and form
| | 00:21 | elements, so if you have that working
folder on your desktop, you are ready to go.
| | 00:25 | Otherwise open up your exercise files
and find the Starting Points folder and
| | 00:30 | find the starting point for this video.
| | 00:34 | Copy that into the desktop, and I am
going to drag that into Espresso, opens
| | 00:43 | it up as a project.
| | 00:44 | I am going to drag the codesnippets
file into the work space, and I am going to
| | 00:50 | double-click on the index file and
open the _css folder and double-click in
| | 00:55 | the forms.css file.
| | 00:57 | So you could see that this file already
has a lot of styles in this forms.css.
| | 01:02 | We're going to modify them, so I am
going to drag this over here so that we
| | 01:05 | could see what this looks like, click
on the index file, option click on the
| | 01:09 | Preview icon to get the live preview,
you could see that this form looks
| | 01:14 | pretty good already.
| | 01:15 | But there's a lot of horizontal
spaces that's been unused and on desktop
| | 01:19 | browsers where you have windows that are
pretty wide, it will be nice to be able
| | 01:23 | to just have these two things side by side.
| | 01:25 | It doesn't really bother somebody to
see these elements side by side and
| | 01:29 | especially on desktop browsers we can
take advantage of all that extra space.
| | 01:33 | So let me show you how to do that, I am
going to move this and just resize this
| | 01:39 | window, so we could see our code.
| | 01:46 | First thing I am going to do is go
into my codesnippets and find the section
| | 01:49 | for this movie.
| | 01:51 | And what we need to do is we need to
change the way that these field sets are
| | 01:55 | styled, because since we want to have
one container that has both field sets in
| | 02:00 | it, we need to not give a background
and width to each one of the fields sets,
| | 02:05 | we need to actually create a container
for both field sets that's going to have
| | 02:09 | the background in it.
| | 02:10 | So we need to get rid of a few styles
and I am going to start off by copying
| | 02:14 | this part of the code here from the
snippets file and going into our form.css
| | 02:20 | and we are going to replace this part
right here, the field set, the legend and
| | 02:24 | the field set before with
new version of the code.
| | 02:27 | And all I'm doing these is just getting rid
of the background that happens in both elements.
| | 02:32 | So you can see -- I am also floating
these elements so that they are side by side.
| | 02:37 | So I took out the border which I did
before, I floated them to the left,
| | 02:42 | they weren't floated.
| | 02:43 | I made the elements 50% of the
horizontal room on the container that they're
| | 02:48 | in, which right now is a form
container and I adjusted the padding and the
| | 02:52 | margin, because I don't really want it
to have margins or padding, I don't need
| | 02:56 | breathing room around these form elements,
I just need breathing room around the
| | 03:00 | form element that contains them.
| | 03:02 | And we also modified the field set
before, which was a little hack that we
| | 03:07 | were doing to make sure that the way
that the legends were displayed was
| | 03:11 | consistent across browsers.
| | 03:13 | One thing we do have to do is grab this
piece of code right here from the field
| | 03:18 | set and make sure that we also add
that in the index file where we created a
| | 03:24 | little hack to make sure that IE 7.0
was able to display the legend in the same
| | 03:30 | way as other browsers.
| | 03:31 | And really all I am doing here is just
getting rid of this width of 80%,
| | 03:35 | just pretty much taken that out.
| | 03:38 | Make sure that this style is consistent
in this field in Internet Explorer 7.0.
| | 03:43 | So back on to the codesnippets and as
you could see this looks great except
| | 03:48 | that now we have lost
that really nice background.
| | 03:50 | So we're going to need to go back into
our snippets file, you can grab the code
| | 03:56 | from here if you want to.
| | 03:57 | And I'm going to go and now I need to
define a style for my form element and
| | 04:02 | that's going to be form a contact and
because I am using floats, let me copy
| | 04:08 | this and paste this it into
the CSS and see how it looks.
| | 04:13 | So I've got the form contact as
an element here and I am giving it a
| | 04:18 | background color with this kind of brownie
light brown that you see right there,
| | 04:21 | and it looks really good as a color,
but you could see that because these
| | 04:26 | elements are floated, the container,
the form container, has lost track of the
| | 04:32 | height of these elements.
| | 04:33 | To fix that we need to have a clear
fixing code which is what we've done right
| | 04:37 | here, we created a group tag that
automatically clears the floats on these
| | 04:41 | elements so that the container here
understands the height of these other field
| | 04:46 | sets and is able to display things properly.
| | 04:48 | And now that we've created a class, we
have to go back into our index file and
| | 04:52 | make sure that we add that
class into the form element.
| | 04:55 | So here is our form code and all we
have to do is add the class group for this
| | 05:02 | form and you could see that it
fixes the height of this background
| | 05:05 | appropriately and if we scroll over to
the right we'll see that it even has the
| | 05:09 | rounded edges on that one side.
| | 05:10 | So this is actually a very cool thing
to do on forms in desktop browsers where
| | 05:17 | you have a lot of room, but it's not
the best thing to with mobile devices
| | 05:21 | because as you know they zoom in when
they see this code and you wouldn't be able
| | 05:25 | to see the form on the right-hand side.
| | 05:27 | You may want to use media queries to
handle some of that and you can check out
| | 05:30 | the video later on, on dealing with
media queries to take a look at how you
| | 05:34 | can accomplish that.
| | Collapse this transcript |
| Positioning groups| 00:00 | Occasionally you'll want to place form
elements with pixel precision. We also
| | 00:04 | want to learn how to hide default input
field borders, so we are going to take
| | 00:08 | a look at creating a custom form layout that
uses a background image and CSS positioning.
| | 00:13 | So we are going to open the exercise
files, and open up the Starting Points
| | 00:18 | folder, find the folder for this
movie, copy the Working Folder onto the
| | 00:25 | desktop, drag that Working Folder
into Espresso so that it opens it up as a
| | 00:30 | project, and I am going to move the
codesnippets.txt file into my workspace,
| | 00:37 | double-click on the index.html file to
also bring it into the workspace, and
| | 00:42 | open the form.css file, so that
it also comes up in the workspace.
| | 00:47 | So we'll move that over, click on the
index file and Option + Click on the Preview
| | 00:53 | icon to get a live preview.
| | 00:55 | This form looks very similar to forms
that we've worked on in previous movies
| | 00:59 | but there are some significant
differences that I need to talk about here.
| | 01:02 | So if you look at the index file,
we've got this form section right here, and
| | 01:07 | we've got our labels are wrapping our
input fields, and we've created a separate
| | 01:13 | tag with a hidden class to make sure
that we are able to hide the labels; the
| | 01:18 | actual text of what's inside
the labels for these elements.
| | 01:21 | We don't really want any of these to
show, we want a background to show that
| | 01:26 | has a richer texture, so we are hiding these
by putting them into a class that we can hide.
| | 01:32 | Now let me show you what this form
looks like so you can get an idea of what
| | 01:35 | this is going to be when it gets done.
| | 01:37 | So I pull this up in a web site that
already has the form built in and we could
| | 01:42 | see that we don't really see the
text labels, but we can type comments into
| | 01:47 | here. So you could see I also have a
custom font that I am using from Google web
| | 01:52 | fonts. If you want to find out more
information about working with custom fonts,
| | 01:55 | make sure you check out the
movie on using custom fonts.
| | 02:00 | So you could see that some things we
can't really achieve, some special effects
| | 02:05 | with CSS, it's really hard to get this
sort of textured labels with CSS, it's
| | 02:10 | practically impossible, and we also
want to do a different kind of image button
| | 02:15 | for our normal button here.
| | 02:17 | I am going to go back and show you
the rest of how this is structured.
| | 02:20 | So we definitely want to be able to
hide the text inside each of the labels and
| | 02:24 | we are using the labels, because we
want to position these labels at different
| | 02:29 | places within the postcard.
| | 02:31 | So we want to have a nice container
that we can use to position things wherever
| | 02:34 | we want, so we wrapped every one of
these input fields into the labels, which
| | 02:39 | is perfectly legal.
| | 02:40 | When you do that you also imply that
when you click on the label, you are going
| | 02:45 | to activate the field itself.
| | 02:48 | So we don't have to use the for element
like we normally do on labels, if we're
| | 02:52 | placing the input fields inside the
labels, it's implied that when you click on
| | 02:57 | the label text that you want
to activate the input field.
| | 03:00 | So we've done that as well.
| | 03:01 | Another thing that we have done is we
have changed the tab index order, because
| | 03:05 | on this form we want the comments to be
the first thing that people tab into in a
| | 03:10 | browser, so when we go through this form,
we get to this form and we tab, we want
| | 03:17 | to tab into the comments field.
| | 03:19 | Now normally the comments field wouldn't
be the first thing on a page, it would
| | 03:22 | be right after you type in your
name, email and web site address.
| | 03:25 | So structurally it's correct to have it
after each one of these other fields, but in
| | 03:30 | this particular case, the comments
belong on that side of the screen, so they
| | 03:35 | should be positioned first.
| | 03:37 | So I have changed the order, even
though I have quoted it in the normal way, I
| | 03:41 | have positioned these elements however
I want to, so the comments will actually
| | 03:44 | be on the left side and appear first,
and therefore, get a better tab index.
| | 03:49 | Now another thing that I did from
previous files is I got rid of the legends
| | 03:54 | that normally appear on top of the
different fields sets, I don't really need to
| | 03:57 | see the legends, so I
don't need to code them either.
| | 04:00 | In addition to that we've gotten rid
of a little piece of conditional code to
| | 04:04 | make sure that those legends appeared
in Internet Explorer 7, again, I don't
| | 04:08 | need the legend, so I don't need to code them.
| | 04:11 | One final thing is you'll notice that
my button appears here with a value of
| | 04:17 | nothing, that way the text for the button
will not appear in my browser, and it's
| | 04:22 | not something that I need to
also hide with a special code.
| | 04:25 | So the button is there and I am going
to put it right on top of an image, the
| | 04:30 | value of the button is nothing,
so that it doesn't appear.
| | 04:32 | So let's get into our code and we'll
go into the code snippets file, and we'll
| | 04:37 | find the section for this movie.
| | 04:44 | So the first thing we need to do if we
look at this plain code is get rid of
| | 04:47 | these ugly borders for the field sets,
and also make sure that all our labels
| | 04:53 | are hidden, so we are going to copy
this code right here and take that and put
| | 04:57 | it into our form.css file.
| | 04:59 | You can see that immediately we lose
all the field labels; don't panic, you are
| | 05:03 | going to see them in the form elements.
| | 05:06 | You are going to see them in the background.
| | 05:06 | We have taken all the text inside the
labels, and we set the display of them to
| | 05:12 | nothing, that way they also disappear, and we
could just put these elements where they belong.
| | 05:16 | So next up, we need to put the
background into our form and we are going to do
| | 05:21 | that by targeting the ID frmContact,
which is the ID of the form itself.
| | 05:25 | So all we are doing is loading up a
background and then specifying a width and
| | 05:30 | height for this image, and we're
also setting the position of these form
| | 05:34 | elements to be relative, which is
really important, so let me copy that and go
| | 05:38 | back into our form.css, and I
am going to paste that in there.
| | 05:42 | Now we can see the graphic up here
behind the form and we need to just position
| | 05:45 | some of these elements with CSS.
| | 05:48 | And let's go back into our codesnippets,
and the first area that we are going to
| | 05:54 | position is this comments area.
| | 05:56 | So I am going to grab the code for this
comment area and copy it, I'll go back
| | 06:00 | into my form.css file and paste it
right there, and although it almost looks
| | 06:06 | like nothing happened, if you were
looking before, the actual comments field was
| | 06:10 | the really big text area field right
here and it's already been moved into
| | 06:14 | position where it should go.
| | 06:18 | So it's already where it needs to go,
and the way that we did that is by setting
| | 06:23 | up the position of the field set
that has the comments field as absolute.
| | 06:29 | Whenever we set the position of an element
to absolute, it's going to position that
| | 06:33 | element in relationship to some sort of
anchor, something that will anchor the
| | 06:38 | position of this new element.
| | 06:40 | By positioning our elements using CSS,
we can change the order and position
| | 06:44 | elements outside of their normal flow.
| | 06:47 | Elements in HTML are drawn according to
the order that they have been coded in.
| | 06:52 | When we use the positioning attributes,
| | 06:54 | we can change that normal
flow into whatever we want.
| | 06:57 | Once you set the position of an
element to absolute, we take it out of its
| | 07:01 | normal order and place it according an anchor.
| | 07:04 | The anchor is going to be one of two things.
| | 07:06 | Either a container of the current
element, whose position has been set to
| | 07:11 | relative or absolute, or if that
doesn't exist, the position of the element
| | 07:16 | relative to the body tag.
| | 07:17 | So if we anchor this to another element,
like we've done here by setting the
| | 07:21 | position of this comments field set
to absolute, we have anchored it to
| | 07:26 | whatever container has this element,
in this case the form element that
| | 07:31 | we've set to relative.
| | 07:32 | If this position relative right here
didn't exist, it would keep on looking up
| | 07:37 | the DOM, the DOM tree, to see if there is
any other containers that had a position
| | 07:42 | of relative, and if it didn't find any of
those, it would anchor itself to the top of
| | 07:46 | the page or the body tag.
| | 07:49 | So by changing this position to absolute,
you could see we can move the element
| | 07:54 | to another position and of course we
can't see it right now, so let me just give
| | 07:58 | it a border, and we are not seeing a
border probably because I am resending the
| | 08:04 | border somewhere else, so not a good idea.
| | 08:06 | So let me type in some text in here
and change the position of this object.
| | 08:13 | You could see that that text is going
to move according to the position that I
| | 08:16 | specify here that's relative to this
image, which is the background of this
| | 08:22 | form element.
| | 08:25 | So the next thing we are doing is we
are positioning the text area element
| | 08:29 | inside the field set and in that case
we're changing the position of that
| | 08:33 | element to absolute, so it's actually
aligning to its previous container, which
| | 08:38 | will be this field set, and we are
specifying a width and height and essentially
| | 08:42 | just making it be the width and height
of this box right here, so as we type
| | 08:47 | things in, eventually when we type too
many things, it will scroll up and fit
| | 08:52 | really nicely into our
comments field right there.
| | 08:55 | So that just sets the position of that
element as well and now we can go back
| | 08:59 | into our codesnippets and
do the rest of the fields.
| | 09:01 | So in here I am going to set a
generic style for all of the input fields.
| | 09:06 | Notice that my input fields are all
hanging out up here, having a good time,
| | 09:10 | kind of on top of their form elements.
| | 09:11 | So I am going to copy this right here
and these other styles to modify the
| | 09:18 | way that they look, and I am going to
click back to the form.css file and I am
| | 09:25 | going to paste that.
| | 09:26 | You could see that they have now moved
into their normal position right here.
| | 09:31 | So, let's take a look at that code a little bit.
| | 09:37 | First we setup some generic styles for
the input fields, making sure that we
| | 09:41 | hide the normal appearance of those
elements in different browsers, setting the
| | 09:46 | background to transparent, so it
doesn't have that white background that they
| | 09:49 | normally have, setting up a font and
here I am using a custom Google web font,
| | 09:53 | wherein it's called satisfy, which gives
that nice sort of handwriting look, set
| | 09:57 | up a color and some other just generic things.
| | 10:00 | I have actually set up the opacity,
so the font actually blends a little;
| | 10:03 | it lets us see a little bit of this brown
line like what would happen if you wrote
| | 10:06 | with a pen on a post card.
| | 10:08 | And then after that then I am setting
the position of the field set, so the
| | 10:12 | field set actually has
all these elements inside.
| | 10:15 | Then I set up a basic style for the
labels, all three labels, the label for the
| | 10:22 | email, the name and the web site address.
Remember the label doesn't just have
| | 10:26 | what we used to read, but it
also the input field them self.
| | 10:29 | So I set the position of it to absolute
and the first element is always going to
| | 10:34 | be at the position of its container.
| | 10:37 | The container right here is set relative
to the position of its container which is
| | 10:41 | the form element, so if I change the
position of this you can see that it moves
| | 10:46 | from the left-hand side.
| | 10:47 | If I move this it moves up and down and
this first field is already positioned,
| | 10:54 | aligned to this container, which is the
field set, and all I need to do after
| | 10:59 | that is just change the position of the
email and the web site fields, so that
| | 11:05 | they move down from the top
of where this field set is.
| | 11:08 | So if I move these you could see that
they'll move to a different place.
| | 11:13 | So I just keep on adjusting those
numbers until they align perfectly.
| | 11:17 | So it's looking pretty good.
| | 11:18 | We still have a weird sort of empty
button right here that we need to style, and
| | 11:23 | for that button what I decided to do
was create it as a separate element, so
| | 11:27 | let's grab the code for that and that
element is this input type submit button.
| | 11:35 | I am going to copy this code, put the
code in the form.css file and that places
| | 11:42 | the button as a separate element and
it hides all the styling for the button
| | 11:47 | here, positions it as a absolute.
| | 11:50 | Now this button is also positioned, it's
in the code, it's outside the fields sets,
| | 11:55 | you could see the field sets are
right here, and here, and this button is
| | 11:59 | actually sitting outside.
| | 12:01 | So its position is relative to the form
element itself, and it gets a background
| | 12:08 | of postcardsendbtn, it's a PNG file
that I have placed in the images folder and
| | 12:14 | you could see that when somebody hovers
over the submit button; so if somebody
| | 12:19 | hovers over the input type submit, I
get the same copy of the image just at a
| | 12:24 | different position and
that's called a CSS sprite.
| | 12:26 | So if we look in the images folder,
we can look for the postcardsendbtn.
| | 12:33 | Here is what the button looks like.
| | 12:35 | So it has two different looks for
when somebody hovers over the button and
| | 12:39 | when somebody is not hovering, and what
we do with the CSS is just use that same
| | 12:44 | file, just position 50 pixels down.
| | 12:47 | If I change the position of this
button, when we hover over the button, you
| | 12:52 | could actually see the button being
misaligned, but by putting it perfectly at
| | 12:57 | 50 pixels up from where it used to be when
hover over the element we'll just get
| | 13:02 | immediately the second version of the button.
| | 13:07 | So understanding absolute
positioning and its relationship to relative
| | 13:11 | positioning is a real critical skill
and one that you need to have plenty of
| | 13:15 | practice with to be
successful in web development.
| | Collapse this transcript |
|
|
4. Using HTML5 AdditionsExploring new input types| 00:00 | HTML5 offers a lot of new elements
that you should start using right away.
| | 00:05 | They work fine even in older browsers
and provide a couple of enhancements to
| | 00:09 | users with modern browsers. Let's take
a look at some ways to improve our forms
| | 00:13 | with new HTML5 input types.
| | 00:15 | I'm going to open up the exercise files
and open up our Starting Point folder,
| | 00:20 | find the starting point for this movie,
and I'm going to drag the Working Folder
| | 00:25 | into our desktop, and I'm going to drag
that folder on to Espresso, so it opens
| | 00:32 | it up as a new project, and I'm going
to double-click on the index.html file,
| | 00:38 | then Option + Click on the
Preview to see a live preview.
| | 00:41 | We're not going to really do a lot of
coding on this particular movie, because
| | 00:45 | I'm just going to show you how
these different elements work.
| | 00:47 | If you want to find out more about
HTML5 elements you should also make sure
| | 00:51 | that you check out Joe Marini's
excellent course on HTML5: Web Forms in Depth
| | 00:57 | from the lynda.com library.
| | 00:59 | So HTML5 has added a number of new
input elements; normally we use input type
| | 01:04 | text to allow users to type in textual
information, and for an email field you
| | 01:10 | could also use an input type text,
but HTML5 provides a special input type
| | 01:14 | called the type email that has a few benefits.
| | 01:17 | Now I'm using a Safari based browser
here and it doesn't fully support this
| | 01:21 | text, so we're not going to see a
huge change in how the browser deals with
| | 01:24 | this tag, but other browsers will actually have
some advantages when using the proper input type.
| | 01:31 | So the first thing to know about using
new HTML5 input types is that browsers
| | 01:36 | that do not understand the new input
field will simply display them as text, and
| | 01:41 | this is because any field that does
not have an input type automatically
| | 01:45 | defaults to a standard text field. You
could see right here it's not taking the
| | 01:50 | style because we haven't told a field
width, we've only asked fields with input
| | 01:54 | type text to show this new style for
this particular field, but it still works
| | 01:59 | as a normal text field.
| | 02:00 | So I'm going to put that back and in
addition to that any other browsers
| | 02:04 | that doesn't understand new input elements
will just treat them as regular text elements.
| | 02:08 | The second really cool thing to note is
that super modern browsers like Chrome
| | 02:12 | will actually perform validation on
some of these fields, so if you pull this
| | 02:16 | form up in Google Chrome, and to do
that I'm going to grab the index file from
| | 02:20 | the Project Files, and drag it
onto the Google Chrome icon.
| | 02:24 | When the form comes up you'll see that
it looks just like it does over here and
| | 02:29 | when we type in something in the email
field, if it's not a valid email and we
| | 02:34 | try to submit the form, Google
Chrome actually performs a little bit of
| | 02:38 | validation and it let's us know that
it's not a valid email field, which is kind
| | 02:43 | of handy. Just by adding the proper
input fields we can have some of the
| | 02:46 | browsers perform automatic validation
without having to write any JavaScript.
| | 02:50 | Now this doesn't work in a lot of
places, but it's a huge improvement that we
| | 02:55 | achieve just by simply
using a different input type.
| | 02:58 | The third thing you'll notice is that
users with mobile devices will also get
| | 03:02 | some improvements from
using these new input types.
| | 03:05 | So I'm going to pull this form up in
the iOS Simulator and we'll take a look at
| | 03:08 | what it does when you use
some of these new input fields.
| | 03:10 | So let's check this out on an actual iOS device.
| | 03:14 | I've put these files on a live server so
that we can look at them on a regular iPhone.
| | 03:18 | And I'm going to click on the first
field which is a regular text field and as
| | 03:22 | you can see when I click on that it
gives me the normal iOS keyboard, but if I
| | 03:26 | click on the email field you can see
that the keyboard changes so that it has an
| | 03:31 | @ sign at the very bottom of the screen.
| | 03:33 | Same way if I go to the web site field,
which has a type of URL, I get the slash
| | 03:39 | and the dot com at the bottom of my
keyboard and I don't get the spacebar
| | 03:43 | because normally URLs don't have any spaces.
| | 03:46 | If I click on the age field I get a
custom keyboard that has the numeric keypad
| | 03:50 | at the very top of the screen.
| | 03:53 | And if I click on date and time, you could
see that I get the default iOS date picker.
| | 03:59 | And I can pick a date and a time, because
I've chosen an input type date and time.
| | 04:04 | Although you don't have a lot of
custom styling options on the iOS devices,
| | 04:09 | you get some really nice improvements
to the way users can enter information
| | 04:13 | by giving them custom keyboards and
custom UI elements that they can use to
| | 04:18 | enter their information.
| | 04:19 | Make sure you check out Joe Marini's
excellent course on the lynda.com online
| | 04:23 | training library to find out more
about the new form elements and how you can
| | 04:27 | use certain work arounds, some
custom input fields into older browsers.
| | Collapse this transcript |
| Working with new attributes| 00:00 | As useful as some of the new input
types like URL and date/time are in
| | 00:05 | browsers that support it, there is a
number of new attributes available in HTML5
| | 00:10 | that will enhance the way your forms
work and since they are new attributes, you
| | 00:14 | can also use CSS
attribute selectors to style them.
| | 00:17 | Now remember that browser support
varies widely when working with these new
| | 00:22 | input types and attributes.
| | 00:24 | So let's take a look at how you
would implement them in a form.
| | 00:27 | Let's go ahead and open the exercise
files, open up the Starting Points, open
| | 00:32 | the folder for this movie and copy
the Working Folder onto the desktop.
| | 00:36 | And I'm going to drag that onto Espresso,
and I'm going to double-click on the
| | 00:44 | index.html, and the mystyle.css file
because we'll be working with those.
| | 00:49 | I'm going to click on the index.html
and Option + Click on Preview to see the
| | 00:53 | live preview right here.
| | 00:55 | So one of the new useful attribute
types is autofocus. Autofocus will
| | 00:59 | automatically highlight a field and place
the cursor in there when the page loads.
| | 01:04 | So if we tell the email input field to
have the keyword autofocus, then as soon
| | 01:10 | as the page loads this input field will
automatically be selected and the user
| | 01:15 | will be ready to type
something in as soon as the page loads.
| | 01:18 | Of course only one element
should have this autofocus attribute.
| | 01:22 | Another useful attribute is the autocomplete
attribute and on browsers that
| | 01:27 | support this, it will try to auto complete a
form the second time the user types in a value.
| | 01:34 | So if a user comes back to your site
they will be able to see some of the
| | 01:38 | information that they've
already typed into the form fields.
| | 01:41 | This is good of course also if you
have certain input fields that you do not
| | 01:45 | want to have auto completion on by default.
| | 01:47 | Say if you're asking some sensitive
information like somebody's social
| | 01:51 | security number, you don't want to
have that information appear in and be
| | 01:55 | stored in an autocomplete field.
| | 01:57 | So to use that, all we have to do is
type in the autocomplete keyword, and
| | 02:05 | either type in on or off if we
want to turn that feature on and off.
| | 02:09 | And of course the browser that is
implementing this has to have the ability to
| | 02:13 | keep track of the autocomplete, or it
has to have autocomplete features and it
| | 02:18 | has to be available to this input field.
| | 02:19 | So we'll turn that on, I'm going to
show you that in Chrome, which actually
| | 02:23 | supports that feature, so I'm going to
drag my index.html file from my Project
| | 02:27 | Files onto Google Chrome, and in Google
Chrome if I fill out a field with some
| | 02:34 | data and I submit the form, the next
time I try to fill that field with the O,
| | 02:41 | that information will
automatically come up in a pop-up list.
| | 02:44 | And that can be handy and it can
be dangerous information to store in
| | 02:48 | this particular browser, so you
can turn that on and off with the
| | 02:51 | autocomplete feature.
| | 02:53 | Another Boolean attribute that is
quite handy is the required attribute.
| | 02:57 | On browsers that support it, it will add
validation that prevents the form from
| | 03:01 | submitting without this field being filled.
| | 03:04 | So I'm going to add that to the email
field, I'll just say, I'll just add the
| | 03:08 | keyword required, and I'll add that
keyword as well into the county field.
| | 03:14 | So I just in required
and I'm going to save that.
| | 03:17 | I'm going to go to Google Chrome,
refresh this form and if I try to submit the
| | 03:22 | form and I haven't filled out those
fields, it's going to ask you to, please
| | 03:25 | fill that information out.
| | 03:28 | It's also doing validation here so of
course I have to type in a valid email address.
| | 03:32 | And now I could hit the send
form then the form submits properly.
| | 03:36 | So if I don't fill those out it will
ask me to please fill them out, because I
| | 03:41 | put in the keyword required.
| | 03:42 | Now of course that only works
with browsers that support it.
| | 03:46 | The nice thing about these new input
types is that we can target them with CSS
| | 03:51 | using the Type selector.
| | 03:52 | So, since we've got these two fields
as required fields, I can go into the
| | 03:56 | stylesheet, mystyle.css, so we can
target the required fields by simply
| | 04:02 | typing in the input and then in brackets
typing in any attribute that we've typed in there.
| | 04:07 | We're going to type in the required
attribute, and then we're going to add a
| | 04:11 | style that sets the outline of input
fields with the require attribute to solid red.
| | 04:19 | And I'm going to save that, refresh
that, and now you can see that in Chrome
| | 04:23 | those fields with a required attribute are
automatically outlining with this red border.
| | 04:29 | One more handy feature is
the placeholder attribute.
| | 04:33 | If you add the placeholder attribute it
will give some instruction to the user
| | 04:37 | as to what they are supposed to type.
| | 04:39 | So I'm going to add the
attribute to the email field here.
| | 04:42 | I'll just put placeholder and
inside I'll just ask for Please enter a
| | 04:47 | valid email address.
| | 04:49 | I'm going to hit save.
| | 04:52 | And if I refresh this page, you can see
that if I don't have the email address
| | 04:57 | in focus it gives you that
little instruction right there.
| | 05:00 | As you soon as you'd click to highlight
that field, and you type something in, it
| | 05:04 | disappears automatically.
| | 05:06 | Finally, there's another attribute
that's handy for validation when supported
| | 05:10 | and that's the pattern attribute.
| | 05:12 | It allows you to specify and pre-validate
a pattern to be used when the visitor
| | 05:16 | enters information into a field.
| | 05:19 | So let's add that to our age.
| | 05:23 | In order to use the pattern attribute
we have to change the type of this field
| | 05:26 | from number to text, so this has to be
a regular text field and what we do is
| | 05:31 | we add a pattern attribute, and in the pattern
we can type any normal regular expression.
| | 05:38 | So I'm going to type in the number 0-9,
plus, so that's at least one number
| | 05:45 | or more, and I'm going to hit
save, come over here and refresh.
| | 05:49 | Now I've got some required
fields here so I better type those in.
| | 05:52 | And I'm going to go down here and
type in something other than a normal age.
| | 06:00 | If I try to send this it asks you to,
Please match the requested format.
| | 06:04 | So that is one place where you may want
to type in some additional instructions,
| | 06:09 | so perhaps the placeholder or the
title attribute might be handy in there, so
| | 06:13 | let's add those as well, age, placeholder,
| | 06:17 | Please enter a valid number for your age,
or we could use the title attribute.
| | 06:25 | We'll save that and refresh and now
at least we're giving the user some
| | 06:30 | instruction as to what they're
supposed to do in that section.
| | 06:34 | The one nice thing about these
attributes is that we can style with CSS by
| | 06:39 | targeting with the attribute selector.
| | 06:41 | Make sure you check out Joe Marini's
excellent course on HTML5: Web Forms in Depth.
| | 06:47 | If you're interested about patterns and
text fields you can also check out this
| | 06:51 | web site html5pattern.com that has a lot
of useful patterns for different things
| | 06:56 | like credit cards and other things that
you may use with the pattern attribute.
| | Collapse this transcript |
|
|
5. Styling for HandheldsCreating a responsive form| 00:00 | When designing with different devices in
mind, it's great to create a form whose
| | 00:04 | width is based not on pixels or other
static measurements, but that can grow and
| | 00:09 | shrink with the size of the device.
| | 00:11 | There are a couple of things you want
to watch out for so let's take a look.
| | 00:13 | So I am going to open up the exercise
files, and in the exercise files I am
| | 00:18 | going to find these Starting Points
folder and I am going to look for the
| | 00:22 | starting point for this movie.
| | 00:23 | I want to copy the Working Folder onto
the desktop, and I'm going to drag that
| | 00:30 | Working Folder into Espresso,
which will open it up as a project.
| | 00:34 | And then I am going to find the
codesnippets.txt file and drag it into the
| | 00:39 | workspace, double-click on the index
file and the mystyle.css file to open it up
| | 00:46 | in the workspace as well.
| | 00:48 | Finally, I am going to drag this to
this side, I'll click on the index.html and
| | 00:53 | Option + Click on this Preview icon
and that will give me a live preview.
| | 00:57 | So this form has three different
parts to it and each part is divided
| | 01:01 | into different legends.
| | 01:02 | The first part has some basic login
information, the second part is just
| | 01:06 | information we want to gather about
the user, and the third part is comments
| | 01:11 | that the user can type in.
| | 01:13 | Everything is coded into an ordered
list and we have added some HTML5 input
| | 01:19 | attributes like required and
autocomplete and use some new HTML5 input
| | 01:24 | types like email and URL.
| | 01:26 | If you want to find more information
about using the new input types and
| | 01:30 | attributes, make sure you check the
videos on working with new attributes
| | 01:33 | and new input types.
| | 01:35 | So let's see what this form
looks like when it is done.
| | 01:38 | As you could see the form has some
styling applied to it and when we resize
| | 01:43 | the browser the form will actually shrink and
grow up to certain point, so that's our goal.
| | 01:49 | Let's see how we could do that with CSS.
| | 01:51 | First thing we are going to do is go to
the codesnippets.txt file and find the
| | 01:56 | section for this video.
| | 01:58 | We are going to copy the normalize
and mystyle.css files into the head
| | 02:04 | section of our form here.
| | 02:05 | I am going to paste those links and
you could see that it already affects a
| | 02:10 | little bit of the form.
| | 02:10 | And I want to go back into codesnippets
and grab this piece of code which will
| | 02:14 | clear out some of the other
inconsistencies between the form elements.
| | 02:18 | So now we are going to go into the
mystyle.css file and paste those, and you
| | 02:22 | see that it cleared out all the input fields
and made everything a little bit more standard.
| | 02:26 | We also have added a little piece of
code to clear any floats that we do in the
| | 02:32 | document so they display
properly in all browsers.
| | 02:35 | Let's go back into codesnippets,
we'll grab the basic code for styling the
| | 02:39 | background which just has some
vertical lines and sets up the content of the
| | 02:44 | body down a little bit.
| | 02:45 | So we'll copy this, go into the
mystyle.css file and just paste it at the
| | 02:50 | bottom so you could see the little pattern
that we have right here under verticallines.png.
| | 02:56 | So set to the background, so I'll just
go back to codesnippets and grab the next
| | 03:00 | section, this is some
basic styling for the form.
| | 03:03 | So this is the myform ID that
we have applied to this form.
| | 03:07 | I want to copy in to mystyle.css, and
you could see that the form itself just
| | 03:13 | has some basic styling plus a
gradient and also a border radius so that the
| | 03:20 | borders of this form have round edges.
| | 03:23 | Right now you can't see them
very well, but they are right here.
| | 03:26 | We got the fields of borders around the
different field sets, so we'll need to take those out.
| | 03:31 | Let's go back into codesnippets
and here we are going to take care of
| | 03:36 | standardizing and cleaning up our field
sets and what I am doing here is -- let
| | 03:41 | me grab this code and copy it
over to the mystyle.css file.
| | 03:44 | As you can see now the field sets look
a little better, they don't have that
| | 03:51 | border that we had a second ago.
| | 03:53 | And what we are doing here is first we are
clearing out the border for the field set;
| | 03:58 | now you could see the
rounded edges a little bit better.
| | 04:01 | And we're also doing a little bit of a
hack to make sure that the fields set are
| | 04:05 | displayed the same way in different browsers.
| | 04:08 | So there is a discrepancy in the way
that Internet Explorer displays the legends.
| | 04:13 | So we are doing a little bit of a hack
here to make sure that they display the
| | 04:16 | same in all browsers.
| | 04:18 | And to do that we are using the before
pseudo-class and making sure that we tell
| | 04:22 | the normal legends not to display and
on every browser that understand the
| | 04:27 | before pseudo-class we are telling
title attribute of the fields set to become
| | 04:32 | the new headline for each fields set.
| | 04:34 | So if you look at the index file,
you'll see that everyone of this field sets
| | 04:41 | has an attribute called title and that's
what we are actually using here instead
| | 04:45 | of the legend, and although the legend
is no longer there, because we are hiding
| | 04:49 | it, it's as duplicate
information in this title field.
| | 04:53 | You could see that everywhere you see a
field set and a legend there is a title
| | 04:57 | field that matches the legend.
| | 05:02 | Okay, back into the codesnippets.
| | 05:04 | Unfortunately, Internet Explorer 7 does
not understand the before pseudo tag so
| | 05:10 | we have to do another hack to take care of that.
| | 05:12 | So I am going to copy the
code for fixing that hack.
| | 05:14 | I am going to go into the index.html
file and paste that into the head section.
| | 05:19 | So this is some conditional code that
tells the legend of the form to display
| | 05:25 | normally in versions of Internet
Explorer which would mean IE 7 and below.
| | 05:29 | And so in here, we're telling IE 7 to
display this normally and adding some
| | 05:33 | styles for the normal legend.
| | 05:36 | Okay, back into codesnippets, next thing
we are going to do is grab a little bit
| | 05:39 | of code to fix some of our form elements.
| | 05:42 | We don't want these numbers to be
displayed and we want to get rid of some of
| | 05:46 | the default padding and
margins that you see in list items.
| | 05:49 | So I am going to copy this code right
here and paste it into my stylesheets,
| | 05:55 | paste it into my stylesheet, so that it
get rids of a little bit of the spacing
| | 05:59 | and it gets rid of the numbers.
| | 06:01 | And this just adjusts the
first level of our list.
| | 06:05 | So you could see that some of these
elements have sublists like the comments
| | 06:10 | section and we go through
this area called request type.
| | 06:13 | We actually have a list that we don't
want to display in a separate line, we
| | 06:17 | want to display individually.
| | 06:19 | We have also added a border at the top
and the bottom of every list item and
| | 06:23 | we've added a border at the
top and a border at the bottom.
| | 06:27 | You could see that they
give that emboss look and feel.
| | 06:30 | And because we do that we want to make
sure that we clean those up so that the
| | 06:35 | first element doesn't have a border at
the top, otherwise you'd see this kind of
| | 06:39 | weird border without a border on the
very first list item of every field.
| | 06:44 | And we need to do the same thing at the
bottom because we don't want this other
| | 06:48 | weird border to be at the end without
a matching top one, so by doing that we
| | 06:54 | clear up anywhere where we have the
beginning and the end of a list from doing
| | 06:59 | the borders that we normally do between lists.
| | 07:02 | Okay back into codesnippets.
| | 07:03 | This part of the code fixes some of
the problems in having multiple lists.
| | 07:09 | Whatever you have in ol li that
targets the first list item inside an ordered
| | 07:14 | list, when you have them in pairs like
this it means that you are now targeting
| | 07:18 | the list items inside an ordered list
that are in a list item that are in an
| | 07:24 | ordered list, which means essentially
you're just targeting these elements right here.
| | 07:28 | And we are also getting the input type
check box to make sure that this element
| | 07:32 | displays inline as well.
| | 07:35 | So let me copy this and paste it into
the mystyle.css, and you could see that
| | 07:42 | now the request type is
here and this appears normally.
| | 07:48 | Go back into codesnippets and get
some fixes for the labels, there are some
| | 07:52 | problems with the labels right now,
remember that we have some text that are
| | 07:56 | actually coded as labels for each
one of these input fields right here.
| | 08:00 | But we have some texts that are
not coded as labels like this thing
| | 08:04 | called request type.
| | 08:06 | So we need to make sure
that we style those similarly.
| | 08:09 | We want these labels to all look the
same, including this one right here.
| | 08:13 | So we had in the code for the part
that says request type, we created a div
| | 08:22 | with a class of grouphead, and what we
are doing here in the codesnippets is
| | 08:25 | styling the labels and this item called
grouphead in the same exact way, so they look similar.
| | 08:29 | So I am going to copy that back into
mystyle.css, and I am going to paste that
| | 08:35 | and you can see that now the request
type is right here and all the other labels
| | 08:42 | are styled in an identical manner.
| | 08:45 | We also have a special
label for this single line item.
| | 08:48 | So this particular item right here,
subscribe to our mailing list, is in a list
| | 08:52 | item, but is not going to be on top of
the input field, the input field there's
| | 08:59 | a check box input field right here.
| | 09:00 | So we have to style that a little bit
differently and tell it to be inline just
| | 09:04 | to make sure that on all browsers it's
going to be right next to our check box.
| | 09:08 | Same thing, with the second level labels,
the second level labels would be the
| | 09:13 | labels for this element and this element.
| | 09:15 | We don't want the font weight to be bold.
| | 09:17 | Remember we just told here all the
groupheads and labels to be bold, so these
| | 09:21 | would actually be bold normally.
| | 09:23 | So we have to undo that, make
sure that we clear for that.
| | 09:28 | So in addition to that we are adding a
cursor pointer style so that when people
| | 09:32 | rollover on the labels, they can
actually click on these form elements.
| | 09:36 | Okay back to our codesnippets, we'll
grab the next piece of code, and this is
| | 09:41 | just a little bit of code that adjusts
all of our input fields and also our text
| | 09:46 | area to be the right width.
| | 09:48 | Notice that what we are doing here is
making sure that we are not adding pixel
| | 09:52 | widths but we are using widths that
are a percentage of the screen and that
| | 09:56 | we'll make sure that when we resize
the screen things adjust accordingly.
| | 10:00 | So you could see some of that already
in the form and you could see that in
| | 10:03 | this input field and text area, we've
also added some code that adjusts to the
| | 10:08 | width of the screen.
| | 10:09 | So let me copy all this code back into
mystyle.css, and there is a lot of stuff
| | 10:16 | going on in there, but it's
all related to the input fields.
| | 10:22 | So display them as block elements, give
them a percentage width and then for the
| | 10:26 | input fields in text
area we add a border radius.
| | 10:30 | Since we are using a required
attribute for some of the elements, namely the
| | 10:34 | name, the email and password fields, we
can style that by targeting it with an
| | 10:38 | attribute selector, so we can say I want
only the input fields that are required
| | 10:43 | to have a different border color
which is what we are doing here.
| | 10:49 | Then we do a little bit of styling
on the select box, we are not really
| | 10:52 | worrying about the option pop-ups
because those are all inconsistently styled
| | 10:57 | in different browsers, so we are just adding
some basic styles to the way the select boxes look.
| | 11:02 | Also notice that on some of these
items I am specifying the width by first
| | 11:06 | giving the element a pixel width, and
then giving the element a width of that's
| | 11:11 | a percentage of the screen.
| | 11:12 | The reason I am doing this is because
some older browsers are not going to
| | 11:15 | understand a dynamic width like this,
so we give those browsers a pixel width.
| | 11:21 | Then we are also using the min-width
attribute which has a cousin called a
| | 11:24 | max-width attribute, to make sure that
this particular select item never gets
| | 11:29 | smaller than a 100 pixels.
| | 11:30 | So I don't really want the select
item to get smaller than a certain amount
| | 11:36 | because I think it's annoying to see some
of the select things be super, super tiny.
| | 11:41 | In the same way, I use that in other
places just to make sure certain fields do
| | 11:45 | not grow smaller than a certain amount.
| | 11:48 | So I am going to go back into
codesnippets and grab the next section, this
| | 11:55 | styles the button, and I am doing
something similar there when I am specifying
| | 11:59 | a width and a percentage width and
then a minimum width to make sure that the
| | 12:03 | button never gets too small, and I am going to
copy that and paste it into the mystyle.css file.
| | 12:08 | And you could see that now
my buttons looks really nice.
| | 12:11 | It does adjust in size, but it never
gets smaller than what I consider to be
| | 12:16 | a comfortable amount.
| | 12:17 | To me there is a lot of sizes, just
adjust the width to be whatever the width of
| | 12:20 | the browser is, and when you have a
super wide browser that can get really
| | 12:25 | annoying because it can get really
hard to read very long lines of text.
| | 12:29 | I remember reading a lot of books where
when I am reading a very long line and I
| | 12:34 | finish reading that line and I tried
to read the next line I actually end up
| | 12:37 | reading the same line, because the line
widths are so wide that your eye doesn't
| | 12:42 | know how to move down properly to the next line.
| | 12:43 | So I would like to limit the
amount of resizing that I do.
| | 12:49 | And you could do that by using those
min-width and max-width attributes,
| | 12:53 | which are kind of handy.
| | 12:57 | Because we've used percentage styles
as well as minimum and maximum width
| | 13:01 | rules, we now have a form that will
behave well in lot of mobile devices,
| | 13:06 | especially tablets.
| | 13:07 | To find out more about designing for
multiple screens make sure you check out my
| | 13:11 | title on Creating an Adaptive
Web Site for Multiple Screens.
| | Collapse this transcript |
| Adjusting the viewport| 00:00 | Your page just might already be
optimized for desktop and tablets, but on
| | 00:04 | handheld devices, you should make some
additional improvements to the user experience.
| | 00:09 | Let's take a look at how we can use
the viewport tag to improve things.
| | 00:12 | So if you're working with the assets
from the previous video, you may already
| | 00:16 | have a working folder on your desktop,
we're going to continue from the code
| | 00:20 | that we did in the last section.
| | 00:22 | If this is the first time you're
opening this movie, then open up the
| | 00:26 | exercise files, then open up the
Starting Points folder and find the starting
| | 00:30 | point for this movie.
| | 00:33 | Copy the Working Folder on to your desktop.
| | 00:35 | I'm going to drag this while holding down on
the Alt key to make a copy of it, and then
| | 00:41 | open up that Working Folder in Espresso,
it'll open it up as a project and find
| | 00:46 | the codesnippets.txt and move it
into the workspace, double-click on the
| | 00:51 | index.html file to also
move it into the workspace.
| | 00:54 | And finally I'm going to drag this
over here and I'm going to hold down
| | 00:58 | Option and click on Preview
to bring up the live preview.
| | 01:01 | So this form automatically adjusts to
the screen.
| | 01:06 | But if we'll look at this form on a
handheld device, and to do that I'm going to
| | 01:10 | open up the iOS Simulator.
| | 01:15 | And on the iOS Simulator I'm going to
open up Safari and I'm going to drag the
| | 01:19 | index.html file from the Project Files and
drag that into the empty window in Mobile
| | 01:25 | Safari, and it'll pull up this form.
| | 01:27 | You can see that the form on a
handheld device shows up super, super tiny.
| | 01:32 | As soon as we click on a field you
could see that it does zoom in, but it would
| | 01:35 | be better if we could optimize the display
so that it looks better on a handheld device.
| | 01:40 | The problem is that most handheld
devices try to interpret any page on the web
| | 01:44 | as if it were a large web site.
| | 01:46 | We can dramatically improve the way
our form looks by using a single tag.
| | 01:51 | So we're going to the snippets.txt file and
we're going to locate the code for this video.
| | 01:57 | We're going to copy this single tag
right here and paste it into the head
| | 02:02 | section of our HTML file, and I'm
going to save this and go back into Mobile
| | 02:07 | Safari and I'm going to hit the refresh key.
| | 02:10 | Now you can see that when the page is
refreshed, instead of the form looking
| | 02:13 | really tiny on the screen it has
now been adjusted for a mobile device.
| | 02:17 | See that the form looks bigger on the
display, the fonts are larger and overall
| | 02:21 | it's easier to read, that's because the
viewport tag redefines how the mobile
| | 02:25 | browser displays the page.
| | 02:27 | So if we take a look at this viewport
tag you'll see that it's essentially a
| | 02:30 | meta tag, and the meta tag usually has a
name attribute and a content attribute.
| | 02:35 | And within the content
attribute, this is very important;
| | 02:38 | we have name and value pairs.
| | 02:40 | Notice that the content has quotes
around it, but the name and value pairs
| | 02:44 | don't. And we have a few different
values that we can add here, but most
| | 02:48 | important one is the width of the device.
| | 02:51 | And by default most mobile devices
assume that the page is going to be about a
| | 02:55 | 1,000 pixels, like 960 to 1,000 or
thereabouts, and so most pages are displayed
| | 03:02 | super tiny on the screen.
| | 03:04 | But by adjusting the width of the
device we're telling this mobile browser to
| | 03:09 | assume that this form is going to be
the width of whatever the device currently
| | 03:14 | is, and so in this case it zoomed into the form.
| | 03:17 | Notice that if we go into a regular form,
on the desktop it doesn't look any different;
| | 03:22 | it looks exactly like it did before.
| | 03:24 | So this is only going to effect
mobile devices, which is quite good.
| | 03:27 | So there's a few other options, you can
specify the initial scale or how much the
| | 03:33 | form will be zoomed in when the user
sees it, so you can actually have it be
| | 03:37 | zoomed in a little more if you wanted to.
| | 03:39 | There is really no reason to do that,
because the form looks really good at
| | 03:42 | that size and you also adjust how much
users can scale the form, which means
| | 03:48 | that if they try to zoom into the form it's
going to let them zoom only by this maximum-scale.
| | 03:52 | Since we have set the initial scale to
one and the maximum scale also to one,
| | 03:56 | it means that the browser is not going
to allow you to zoom into this form like
| | 03:59 | you normally would.
| | 04:00 | We have also set this users-scalable
value to know which also means that this
| | 04:05 | form is not scalable in any way.
| | 04:07 | But we can play with those if you want to.
| | 04:09 | This is a good starting
point for the viewport tag.
| | 04:11 | That sets it to the width of the
device and generally tells it not to scale.
| | 04:16 | You may turn some of these off,
because you may want users to be able to
| | 04:20 | scale even small forms.
| | 04:23 | We've managed to significantly improve on the
way the form looks by using a simple meta tag.
| | 04:28 | This tag is not just for forms, you
should be using the viewport meta tag to
| | 04:31 | optimize the display of your content
for mobile devices on all of your pages.
| | Collapse this transcript |
| Using media queries| 00:00 | You've probably run into an online form
that's been tough to fill out on your phone.
| | 00:05 | Using media queries you can provide
alternative style sheets that makes using
| | 00:09 | your forms less of a pain for your clients
on handheld devices, so let's take a look.
| | 00:14 | Open up the Exercise Files folder and
open up this the Starting Points folder
| | 00:19 | and find the Starting Points folder
for this video and I'm going to drag the
| | 00:24 | Working Folder onto the desktop and hold down
the Option key so that makes a copy of
| | 00:29 | it, and then when I drag that folder
into Espresso, it's going to open it up as a
| | 00:36 | project and I am going to move the
codesnippets.txt file into the workspace by
| | 00:43 | dragging it from the desktop, and double
-click on the index.html file and I'm
| | 00:49 | going to open up the _css folder.
| | 00:52 | You'll see that I have two different
style sheets here the regular form.css
| | 00:57 | and an additional style
sheet for handheld devices.
| | 01:00 | So I'm going to double-click on each of
those to bring them into the workspace,
| | 01:03 | you can see that the handheld.css
file is empty right now.
| | 01:06 | And the next thing we are going to
do is click on the index.html file in the
| | 01:10 | workspace, and move this over, hold down
the Option key and click on the Preview
| | 01:17 | icon to get a live preview of this form.
| | 01:20 | So this is the form that we did on
Chapter 3 and as you can see it's a
| | 01:25 | form where we floated the elements to
make sure they took advantage of the space
| | 01:29 | in a desktop browser.
| | 01:32 | Now if we pull this form up on a mobile
device we'll use the iOS Simulator,
| | 01:40 | I'm going to open up Mobile Safari here.
| | 01:42 | I am going to click on these index files
from the Project Files area and drag it
| | 01:47 | into Mobile Safari, go ahead and zoom
out, and I'm going to click on this area
| | 01:53 | right here of the form, you could see that
the form zooms in into this name section
| | 01:57 | and we can start filling out the form,
but these filter so big they
| | 02:01 | haven't really been optimized that it's
hard to fill out, plus when you're here
| | 02:06 | you might think you are done and you
start looking for those submit button and
| | 02:10 | it's nowhere to be found, so then you
have to kind of move this form around and
| | 02:14 | find the beginning of this part.
| | 02:15 | So it's really not the best experience,
so we can use media queries to try to
| | 02:20 | provide a better experience for a
mobile device users. We probably want the lay
| | 02:24 | this out a little bit differently so
that it's easier to see the form whenever
| | 02:28 | we first arrive onto the web site.
| | 02:30 | So let's see how that's done.
| | 02:32 | So I'm going to go to the coedsnippets.txt
file, and I want to find the section
| | 02:36 | for this video, and I want to copy this link
and paste it back into my index.html file,
| | 02:44 | this is going to go in the head
section of our document, and here we're using
| | 02:49 | what's called the media query; it's
really just a link to another style sheet,
| | 02:54 | just like you would do a link to a
style sheet like the ones that's right up
| | 02:56 | here, but we're adding an additional
attribute to this link that only displays
| | 03:01 | this style sheet if the device happens
to be no more than 480 pixels wide.
| | 03:06 | So I am going ahead and save this,
and this will link on mobile devices to this
| | 03:12 | alternative style sheet that we've
created here, but we don't have any code on
| | 03:16 | this alternative style sheets so I am
going to go into my codesnippets and grab
| | 03:19 | this next piece of code. What we are
doing here is instead of setting a pixel
| | 03:23 | width for each one of these devices, I
am actually setting a percentage width
| | 03:27 | for the device and resetting some of
the elements, so let me just copy this and
| | 03:32 | paste it into the form_handheld.css file,
and save it, and if I come over here and
| | 03:40 | I refresh my page you will see that this
form looks the same as it did before so
| | 03:45 | it's not taken effect in this particular form.
| | 03:47 | And if I come over here, I refresh the
page, let me zoom out you will see that
| | 03:56 | this form is now displayed
in a vertical orientation.
| | 03:59 | So now when the users click right here
and they hit this Next button, or they
| | 04:04 | keep on filling out the fields, it's a
little bit easier for them to see what it
| | 04:08 | is they are supposed to be doing.
| | 04:10 | So you could click on some of these
elements and keep on going and now your
| | 04:15 | Submit button or in this case the Oh really?
| | 04:17 | button is down here in a sequential manner.
| | 04:19 | So we've created the form that adjust to
different devices, on a desktop it takes
| | 04:25 | advantage of the extra width of the
screen and on a handheld device it presents
| | 04:29 | the form in a vertical fashion and we've
done that with this media query.
| | 04:33 | So let's take a look at what we are
telling the media query to do, so back into
| | 04:38 | our index.html file.
| | 04:40 | And you see that it looks exactly like
a normal link to a style sheet with an
| | 04:44 | additional media attribute.
| | 04:46 | So in this media attribute we can
specify that this style sheet would take
| | 04:49 | affect only screen type devices, you can
also specify print style sheets and also
| | 04:55 | on devices where the screen is no
bigger than a certain pixel amount.
| | 04:59 | There's a number of different pixel
amounts that you can check for so if you
| | 05:03 | wanted to do style sheet for perhaps
tablet devices you might change this number
| | 05:06 | to be a different number.
| | 05:08 | So in addition to creating a link to
a separate style sheet, you can have
| | 05:12 | conditional media queries
within your existing CSS.
| | 05:15 | So what I am going to do is I am going
to delete this section right here, so it
| | 05:19 | no longer calls a separate style sheet,
and I'm going to save that and go back
| | 05:23 | into my codesnippets, and here is a
different version of how you can use media
| | 05:28 | queries within existing CSS.
| | 05:31 | We took the code that was on the
separate style sheet right here and we've
| | 05:36 | applied a media query
that you can put on your CSS.
| | 05:40 | So I am going to copy this piece of
code and we can actually insert that into
| | 05:44 | a regular form.css.
| | 05:47 | So I am going to go all the way to
the bottom, paste that piece of code.
| | 05:51 | Here is where you have to be really
careful, notice that we've done is created
| | 05:56 | styles like this style with a beginning
curly bracket and ending curly bracket
| | 06:01 | inside a set of curly brackets here
and here, and we just created @media rule
| | 06:08 | looks pretty much the same as the media
query on the link element before, and the
| | 06:15 | rest of it is pretty much the same,
but the main difference is that you are
| | 06:18 | going to put your code within these,
make sure you don't get confused about the
| | 06:22 | quantity of these curly
brackets or this is not going to work.
| | 06:25 | So if we save this you will see -- you should
see that this doesn't take effect in the
| | 06:29 | normal browser, but in here we should
still see the form as a vertical element
| | 06:37 | when you refresh the page, so
it works exactly the same way.
| | 06:40 | It's not doing anything with this
separate style sheet, but you are doing
| | 06:44 | everything within the current style
sheet that you are doing, and all you need
| | 06:47 | to do is make a new version of whichever
elements you want to override in the original CSS.
| | 06:53 | If you want to find out more about
media queries, make sure you check my course
| | 06:58 | on iOS Web Applications with HTML5 and
CSS3, I have a video on targeting devices
| | 07:05 | and orientations with media queries
that goes more in depth into the different
| | 07:09 | media queries you would need
for different types of devices.
| | Collapse this transcript |
| Resizing elements| 00:00 | Anything that makes life easier for your
visitors is great, and one thing we can
| | 00:04 | do is make sure that things
are bigger on handheld devices.
| | 00:08 | So let's see how we might approach that.
| | 00:10 | Open up the Exercise Files folder, and
find the Starting Points folder and then
| | 00:15 | find the starting point for this video.
| | 00:17 | I want to copy the Working Folder onto
my desktop, and then I'm going to drag
| | 00:24 | the Working Folder into Espresso,
it'll open it up as a project.
| | 00:28 | Then I'm going to drag the codesnippets.txt
file into the workspace and I'm
| | 00:34 | going to move this over, and click on
the index.html file and Option + Click on
| | 00:40 | Preview to take a look at this form.
| | 00:42 | I'm going to also double-click on
this index.html file to bring it into
| | 00:49 | the workspace.
| | 00:50 | So this is the form that we worked on
before and we have a created a media query
| | 00:54 | to make sure this form displays
differently on handheld devices.
| | 00:57 | Let me go ahead and pull up the iOS Simulator.
| | 01:04 | And I'm going to run Mobile Safari, and
I'm going to drag the index.html file
| | 01:09 | from the Project Files, and I am going to
resize this form, you could see that on
| | 01:15 | a desktop this form has a two column
layout, and on a handheld device it has a
| | 01:20 | single column layout and that's a lot better
for our users, but it would be nice if
| | 01:24 | this text was bigger and more
visible on a handheld device.
| | 01:27 | If we need to take a look at how we
achieved these different layouts on
| | 01:31 | different devices you can take a look
at the movie on using media queries and
| | 01:35 | using the viewport tag.
| | 01:37 | So the easiest way to make the fonts
bigger is to use a property of WebKit
| | 01:41 | called the WebKit size adjust attribute,
just go into the codesnippets file and
| | 01:47 | find the section for this video.
| | 01:50 | And I'm going to copy this line of code
right here, and I'm going to open up the
| | 01:55 | CSS file for this project, we've got
the form code on a separate CSS file, so
| | 01:59 | I'll double-click on that.
| | 02:01 | If you look way down at the bottom of
this file, you'll see that we already have
| | 02:05 | a media query that targets handheld
devices and in here we're essentially just
| | 02:10 | telling everything to
display as a single column.
| | 02:14 | To make this apply into our form
elements, we can type in the form element with
| | 02:19 | the universal selector, and paste
this attribute into the universal form
| | 02:25 | selector, this will select every form
element underneath any one of our forms
| | 02:29 | and what we could do is ask the
text inside those elements to be 200%.
| | 02:34 | You can apply this to any specific
element so if you wanted to bring some of
| | 02:38 | these other fonts up that would be
great, but in this case I really just want
| | 02:41 | the form to be a lot bigger.
| | 02:43 | So I just want all my form elements
to adjust their text size by 200%.
| | 02:47 | Once we have added this rule we can go
into our form and refresh our form, and
| | 02:52 | our form elements are now all a lot bigger.
| | 02:55 | That's a really quick way of adjusting
the fonts for everything on a specific
| | 03:01 | section and like I said
you can add that anywhere.
| | 03:03 | In this particular case it just makes the
form a lot more visible on mobile devices.
| | 03:08 | Now certain mobile devices do not
support the WebKit-text-size-adjust attribute,
| | 03:14 | so in this case you would have to do
things manually, so let me go ahead and
| | 03:17 | delete this attribute here, and I'm
going to go back into my codesnippets and
| | 03:23 | grab this next version of the code, and
all we're doing here is adjusting the
| | 03:28 | label size, making it a lot bigger than
it used to be, I think it used to be 1em
| | 03:32 | and we have adjusted to 2em, and also
making the text inside the form element
| | 03:37 | bigger, so I'm going to copy
this, go back into my form CSS.
| | 03:41 | I deleted the not always supported
WebKit-text-size-adjust attribute, I'm going
| | 03:47 | to paste this underneath and
save it and refresh our form.
| | 03:53 | And you can see that it's not
exactly the same but it's another way of
| | 03:56 | making the text bigger, you can manually
just put in new values for some of the elements.
| | 04:02 | Either way this makes the form a lot
more visible to our users and a lot easier
| | 04:07 | to immediately recognize that we need to
do something with this page and what we
| | 04:11 | want you to do here is fill out this form.
| | 04:13 | So you should always try to make things as
easy and pleasant as possible for your users.
| | 04:18 | I'm sure you've had a hard time with
some forms, I know I have that are not
| | 04:22 | optimized for handhelds, and it's just
a pain to run it to those, so make sure
| | 04:26 | the same thing doesn't happen to your users.
| | Collapse this transcript |
|
|
6. Advanced Design PatternsStyling for progressions| 00:00 | Some forms can get so complicated
that you'll need to find ways of the
| | 00:03 | dividing the information
into different sections.
| | 00:06 | In this chapter, I am going to show
you how to style a form, so that the
| | 00:09 | different field sets appear as different tabs.
| | 00:13 | This video is part of a series where
I'll show you how to use jQuery to handle
| | 00:16 | navigation between field sets as well
as how to validate the form and style the
| | 00:22 | validation elements.
| | 00:25 | Let's get started by defining
our basic style sheet for our form.
| | 00:29 | So I am going to go to the exercise
files and open up the Starting Points
| | 00:33 | folder, find the starting point for this video.
| | 00:37 | And I am going to copy the Working
Folder onto the desktop, holding down the
| | 00:40 | Option key and dragging it, and then I
want to take this Working Folder and drag
| | 00:46 | it onto Espresso, so it
will open it up as a project.
| | 00:51 | And then I am going to take the
codesnippets.txt file and move it into the
| | 00:54 | workspace, and I'm also going to
double-click on the index.html file and the
| | 01:01 | mystyle.css, so it also goes into the workspace.
| | 01:05 | So let's take a look at our HTML
document and I'm going to hit the Preview
| | 01:09 | button holding down the Option key
so that we can get a live preview.
| | 01:13 | So we have an HTML form with
three different field sets;
| | 01:17 | one for login information, another one for
other information, and a section for comments.
| | 01:23 | Two of the fieldsets have an additional
class called hidden right here, that will
| | 01:28 | hide these fieldsets on the final form.
| | 01:31 | Let me show you what this page is going to
look like after we get done with this video.
| | 01:37 | Our page will look like this.
| | 01:38 | So we could do that.
| | 01:39 | We can get started by going into the
codesnippets.txt file and scrolling up to
| | 01:44 | the information for our current video.
| | 01:46 | So we'll copy the links to our normalize.css
document and then mystyle.css file
| | 01:52 | and we'll put that in the index
document, in the head section.
| | 01:57 | So you could see that some of these
styles have already taken effect, we'll go
| | 02:03 | back into codesnippets and grab some
additional code for clearing form elements
| | 02:09 | a bit further and to clear
any items that were floating.
| | 02:12 | So I am going now to the mystyle.css
document and I'm going to paste that and
| | 02:17 | you could see that we are clearing the
appearance of most of the input fields to
| | 02:21 | make them all start with similar look.
| | 02:24 | Back into codesnippets, I am going
to get some basic styling for the body
| | 02:27 | section as well as some basic styling
for the form, so I am going to copy that
| | 02:33 | and go back into my stylesheet.
| | 02:35 | And here I'm adding some background to
the body section, this looks like a lot
| | 02:40 | of code, but it's really just some code
for a background texture and a gradient
| | 02:46 | beneath that background texture with
different browser prefixes so that it
| | 02:51 | displays in most browsers.
| | 02:52 | Now for the form element we have added
a font and some other basic styling plus
| | 02:57 | a border-radius, so that the edges of
this form are rounded, as you can see
| | 03:02 | right here, and we have a different
texture that we have applied to the form
| | 03:07 | plus some roundness to the
edges and a slight drop shadow.
| | 03:14 | Now we need to fix the fieldset
outline and style the legends as well.
| | 03:17 | So we are going to go back into
codesnippets, scroll down and I am going to
| | 03:24 | grab this piece of code right here, go
back into our stylesheet and just paste
| | 03:29 | that at the bottom.
| | 03:31 | What this is going to do is just style
the fieldsets and because the fieldsets
| | 03:35 | display differently in different
versions of Internet Explorer and other
| | 03:40 | browsers, we need to do a little trick
that we have done before in other videos.
| | 03:44 | And because the legends will
display differently in different browsers,
| | 03:47 | especially versions of Internet
Explorer, we are going to hide the way the
| | 03:51 | legends are displayed and then display
the legends by grabbing the title from
| | 03:56 | the fieldset and styling then
that by using a before pseudo tag.
| | 04:02 | This will work for most versions of
Internet Explorer except for versions of
| | 04:06 | Internet Explorer before version 8.
| | 04:07 | So we are going to have to go back into
codesnippets and grab another piece of
| | 04:11 | code that will fix this
problem in Internet Explorer 7.
| | 04:15 | So we'll grab this little piece of code.
| | 04:16 | This is a conditional stylesheet that
applies only if the version of Internet
| | 04:21 | Explorer is less than Internet Explorer 8.
| | 04:23 | So we'll copy that, go back into our
index file and paste that in our head
| | 04:28 | section, and then we'll go back into
codesnippets to grab some code to handle
| | 04:36 | the list items. By default list items
display with numbers right next to them
| | 04:41 | and they're indented quite a bit, so we're
going to grab some code to take care of that.
| | 04:48 | Go back into mystyle.css.
| | 04:50 | I'm going to paste that and you can
see that here I took care of some of the
| | 04:54 | margins and the numbers that appear
normally on ordered lists, and I also took
| | 05:00 | care of adding a little bit of a
border before and after each one of the list
| | 05:04 | items giving the form an embossed
look between each one of the fields.
| | 05:09 | And then on the first element and the
last element of each list, I deleted the
| | 05:15 | borders so that we don't see these weird
kind of borders that will appear at the
| | 05:19 | beginning and at the end of the form.
| | 05:22 | So if we don't do this, you'll see an
extra border appear at the beginning and
| | 05:26 | end of each list item.
| | 05:30 | All right our form is looking pretty good.
| | 05:32 | This field right here needs to
be fixed a little bit further.
| | 05:35 | This is a second level ordered list,
so we'll go back into codesnippets and
| | 05:40 | we'll grab the code to fix those elements
asking them to be displayed as inline elements.
| | 05:47 | So now those appear as inline elements
right next to each other, how they should.
| | 05:52 | So back into codesnippets we'll grab a
little bit of code to fix our labels.
| | 05:57 | So back into mystyle.css, and this will
style all our labels so that they look
| | 06:03 | really nice now, and notice that I have
some basic code for the labels, and then
| | 06:09 | I have a special version of the code
for a singleline label, which is a special
| | 06:13 | class that I use for
styling this particular label.
| | 06:16 | I don't want this label to be bolded
like the other one, and for the labels
| | 06:21 | that are part of a group, so I have
this special request type text as a
| | 06:27 | grouphead class because technically
it's not a label, although it's a label
| | 06:31 | for these other elements.
| | 06:32 | Each one of these elements are already
a label.
| | 06:35 | So I can't style those.
| | 06:37 | I have to style a headline which I've
done with this group class right here.
| | 06:41 | You can see it in the index.html.
| | 06:42 | If I scroll down to that section on
the Comments, I have this div class that's
| | 06:49 | acting as our headline, have a class
of grouphead so that I can style it like
| | 06:53 | the other labels as well.
| | 06:55 | Back into our codesnippets, now we're
going to grab some code to handle the
| | 06:59 | text area and the input field.
| | 07:01 | So these inputs fields right now are
just a little bit too short and this text
| | 07:06 | area also needs to be a lot bigger
and have a little bit of a better style.
| | 07:10 | So we'll grab this, back into mystyle.css,
I'm going to paste that, and you can
| | 07:16 | see that our fields are now a good
width and so is our text area, and they have
| | 07:22 | essentially just a slight gradient so
that you can see they are just a bunch of
| | 07:27 | browser prefixes, and so they have a
nice little slight gradient for the inside
| | 07:32 | and some other settings here to just
give it a little bit of breathing room and
| | 07:37 | width that looks more appropriate to the form.
| | 07:41 | So back into the codesnippets, now we
are going to grab a section for second
| | 07:46 | level inputs. Notice what's happening
down here, our second level inputs are
| | 07:50 | displaying kind of right on top of each
other, because we've done that to all
| | 07:55 | these other input fields, we've all
told them to display right on top of each
| | 07:59 | other so that the labels appear on top.
| | 08:01 | So we need to fix that with this section
right here, and we are also going to --
| | 08:06 | let's go back to mystyle.css.
| | 08:09 | So that kind of fixes most of it.
| | 08:11 | I am going to refresh the screen
because sometimes the live preview in Espresso
| | 08:15 | doesn't refresh appropriately.
| | 08:17 | So you can see now by adding those
pieces of code we have fixed our second level
| | 08:22 | input fields, asked them to display as
inline, and we've also made sure that on
| | 08:28 | all browsers that the check boxes are
also displayed as inline elements that
| | 08:31 | way, this will always be right next to it.
| | 08:34 | Then we have added a little bit of a
taller height to our text area to make sure
| | 08:39 | we have plenty of room to write in here.
| | 08:42 | So back into the codesnippets, so let's
now style the select field which looks
| | 08:47 | a little plain, looking white like that,
so we're going to grab this piece of code.
| | 08:51 | And this is essentially just some
width and height styles plus a gradient
| | 08:55 | that looks really nice.
| | 08:56 | Let's go ahead and apply that so we can see it.
| | 08:58 | Let's see the gradient, it's a slight
gradient that just gives it a different
| | 09:02 | color, and we have a bunch of
different browser prefixes here as well as some
| | 09:08 | roundness to the edges.
| | 09:09 | So back into codesnippets, just about
the only thing that's left is to style the
| | 09:12 | button, so it gets a lot of code, but
again most of it is right here in the
| | 09:16 | background gradient that we are applying there.
| | 09:17 | So I am going to copy that, go back
into the mystyle.css area, and I'm going
| | 09:22 | to paste that and you can see that the send
button gets some standard width and height.
| | 09:28 | My entire form is using variable width,
so you could see that if I resize these
| | 09:32 | forms, the forms will
resize up to a certain point.
| | 09:38 | Finally, I am going to go back into my
codesnippets to get the hover version
| | 09:43 | of this arrow, and the hover
version of the arrow is just going to be a
| | 09:50 | different color background.
| | 09:52 | So back into the CSS file, and this has
the pseudo-class hover here, so all we
| | 09:58 | do here is just change the color of the
gradient so that when we roll over this
| | 10:01 | button, we get a different color gradient
and these are all just browser prefixes.
| | 10:08 | We've done a lot of styling that
you've probably seen in some of the other
| | 10:11 | videos in this series, and this already
looks like a great form, but in future
| | 10:16 | videos I am going to show you how
to add navigation and interactivity.
| | Collapse this transcript |
| Visualizing navigation| 00:00 | In this movie I am going to show you how
to style a form so that you can display
| | 00:03 | different fieldsets into different tabs.
| | 00:06 | When we get started, we'll have a form
that looks like this and we are going to
| | 00:10 | add navigation tabs at the top of the
screen, and buttons that allow you to
| | 00:15 | navigate between fieldsets.
| | 00:17 | In future movies, I'll show you how
to use jQuery to let visitors navigate
| | 00:21 | between these buttons and tabs,
plus add styles for validation.
| | 00:30 | Let's open up our exercise files and
open the Starting Points folder, find a
| | 00:36 | folder for this video and make a copy
of this Working Folder on our desktop.
| | 00:40 | I'm going to hold down the
Option key while I click and drag.
| | 00:44 | And then I am going to drag that folder
into Espresso, and I'm going to move the
| | 00:49 | codesnippets.txt file into the workspace,
double-click on the index.html file as
| | 00:55 | well as the mystyle.css.
| | 00:57 | Then I am going to move this over to
this side, make sure I am in the index.html
| | 01:02 | document and Option + Click on the
Preview button to pull up a live preview.
| | 01:07 | So you can see our form looks pretty
good right now, but we need to add some
| | 01:10 | navigational elements.
| | 01:11 | We're going to go into codesnippets.txt and
scroll down into our section for this video.
| | 01:19 | And I am going to copy
navigation buttons that will go into each
| | 01:24 | different fieldset.
| | 01:25 | So I'm going to copy the code for all
the buttons, then I am going to go to
| | 01:29 | the index.html file.
| | 01:31 | And at the bottom of our first fieldset
underneath the ordered list, I am going
| | 01:36 | to paste these, and then select the last
three items so that we just have a next
| | 01:42 | button at the bottom of this fieldset.
| | 01:45 | Then I am going to move over to the
end of the second fieldset, and after the
| | 01:49 | ordered list, I am going to paste those
elements and just keep the previous and
| | 01:54 | next version of the button.
| | 01:58 | And I'm going to go to the last
fieldset, and at the end after the ordered
| | 02:03 | list, before the button, I'm going to paste
the last version of the link to the button.
| | 02:06 | So you could see the buttons are right
here after the first fieldset and right
| | 02:11 | here after the second fieldset, and then
the previous button is right there right
| | 02:16 | at the end, before this Send button.
| | 02:19 | So now we need to style these to
make them match this Send button.
| | 02:24 | So we're going to go back into
codesnippets, and we are going to modify
| | 02:27 | two stylesheets here.
| | 02:28 | I'm going to grab these, go into
mystyle.css and find the piece of code that
| | 02:34 | says just myform button.
| | 02:37 | I'm going to select that, and I'm
going to paste this, delete the second one
| | 02:42 | because what I want to do is add the
myform .buttonnav and give it the same
| | 02:48 | style as our button navigation
for this previous element has.
| | 02:53 | So then we are going modify the hover
version of the button to add our second
| | 03:00 | style, so that they more or less match
the submit button which is right here.
| | 03:05 | They are a little out of place, but
we are going to fix that with some
| | 03:07 | additional styles, so we're just
setting up the basic shape and the background
| | 03:11 | of each one of those elements.
| | 03:13 | I'm going to go back into codesnippets
to grab the next version, and in here we're
| | 03:18 | going to add a piece of code that
cleans up a little bit of the craziness
| | 03:23 | that's happening here with these elements.
| | 03:24 | So I am going to grab that, go into
mystyle.css and at the end right here I am
| | 03:30 | going to paste that, and you can see
that now they are displayed a little more
| | 03:33 | evenly, they have just a little bit
-- we added a height and allowed these
| | 03:37 | elements to be displayed
as inline block elements.
| | 03:40 | Inline block elements are like
block elements, but can be resized.
| | 03:44 | Unfortunately some earlier versions of
Explorer did not support the inline block,
| | 03:50 | so we've added a little bit of a hack
here to fix some display problems in
| | 03:53 | Internet Explorer 7.
| | 03:56 | We still need to fix a little more code.
| | 03:58 | You could see the previous button
is happening before the send button.
| | 04:02 | So I am going to style the previous
button here as well as the hover version of
| | 04:08 | the previous button.
| | 04:09 | I am going to copy that, go back into
mystyle.css, and that really looks like a
| | 04:16 | lot of code, but it's a bunch of browser
prefixes, and I am going to paste that
| | 04:20 | code, I'm going to refresh my preview
here in Espresso because sometimes it
| | 04:24 | doesn't update when you do some of the changes.
| | 04:26 | You could see that now the
buttons are where they belong.
| | 04:29 | So this looks like a lot of code, but
it's really mostly a bunch of browser
| | 04:33 | prefixes for the different gradients.
| | 04:38 | And also a little bit of floating
that we are doing here, and other than the
| | 04:42 | floating and the margin that we do
here to make sure that they are not at
| | 04:46 | the edge of the screen.
| | 04:48 | So if we don't have this margin then
some of these buttons will go through the
| | 04:51 | edge improperly of the screen, right here.
| | 04:56 | And we also have a hover version of the
previous button and that version is what
| | 05:01 | happens when we roll over
these buttons right here.
| | 05:04 | You'll also notice that when we place
the background in the normal button,
| | 05:09 | we're asking this background to be
aligned to the right top of the document.
| | 05:15 | This background is a series of arrows
that has the left and right version of the
| | 05:20 | arrows in the same file.
| | 05:21 | They are partially transparent so I
can't show you the document or it will
| | 05:25 | look like a bunch of white, but there's
both versions of the arrows going to
| | 05:30 | the right and to the left, you
can see the other one down here.
| | 05:33 | And what I am doing to make sure that
they align properly is on these normal
| | 05:36 | versions of the arrow I am aligning the
graphic to the right top of the button,
| | 05:42 | and down here on the previous versions of the
buttons, I am aligning that to the left bottom.
| | 05:50 | So because these use the top version
of the image, it's showing you the
| | 05:55 | image to the right, and because this
used the bottom version of the image, it's
| | 05:59 | showing you what would be underneath
which would be the same graphic with the
| | 06:03 | graphics going to the other side.
| | 06:05 | Like I said, we do have that graphic
here, but it really doesn't show you the
| | 06:10 | background like it should.
| | 06:12 | Now let's go ahead and hide the
different fieldsets, so that these other
| | 06:19 | fieldsets that are in this form are
not showing up, we only -- we'll have the
| | 06:23 | first fieldset, we'll add a
bit of navigation at the top.
| | 06:26 | So I am going to go back into
codesnippets and just grab this piece of code.
| | 06:30 | We already have in our HTML a class for
each of these other two fieldsets that
| | 06:35 | we don't want to show up that's called hidden.
| | 06:37 | So if you look at the index.html, right
now this fieldset with the comments has
| | 06:42 | a class of hidden, and so does this
fieldset with the other section, which is
| | 06:48 | this part right here.
| | 06:49 | So I am going to go into mystyle.css,
all the way to the bottom and just paste
| | 06:53 | that and that will hide
both of the other fieldsets.
| | 06:56 | Then go back into my codesnippets and
I'm going to grab some code for basic
| | 07:01 | navigation and in this navigation,
this navigation happens to be a list of
| | 07:06 | items. I am going to go into my index file
and paste that before the form, after the body.
| | 07:11 | So right now you see it looks like a
normal list, so we are going to need to add
| | 07:15 | some styles to make that look like
navigation and to do that we are going to
| | 07:19 | grab basic code to style the
unordered list, so back in here, back to the
| | 07:26 | bottom, paste it, so that just indents
it and makes sure that it's aligned like
| | 07:30 | the rest of the form is centered on the page.
| | 07:34 | Back into codesnippets, now I am
going to grab some code for the list items
| | 07:38 | that's going to get rid of these
bullets right here and also just do some
| | 07:42 | additional styling to make them look like tabs.
| | 07:44 | So back into mystyle.css and every list
item is going to look like this orange
| | 07:51 | versions of the tab.
| | 07:52 | I have added a little bit of a drop
shadow that is inset that's not going to
| | 07:55 | show up in all browsers.
| | 07:57 | Plus I have added different border-
radiuses, so that they are rounded at the top
| | 08:01 | and they look like tabs.
| | 08:02 | And some other generic sort of styling
code, you see that I am styling these as
| | 08:06 | inline-block, that's so that
the lists will remain centered.
| | 08:11 | It's really hard to center block level elements.
| | 08:13 | So if you leave them as inline-block,
then it's easier to center them.
| | 08:16 | We do have a fix down here for
Internet Explorer 7 that does not understand
| | 08:21 | inline-block so this piece of
code right here is a little hack.
| | 08:24 | Plus we changed the cursor to a
pointer, when somebody rolls over
| | 08:28 | these different tabs.
| | 08:29 | Now this is the normal version of the tabs.
| | 08:31 | So we need a highlighted version of the tab.
| | 08:33 | And if you look at our HTML, we have
defined the tab that is active to have
| | 08:39 | an id of activetab.
| | 08:40 | When the form first loads, it's going to
be this Step 1 piece right here so I am
| | 08:44 | going to go into the codesnippets and
grab the code to style the activetab.
| | 08:48 | So I am going to copy that, go back
into the mystyle.css, paste that, and you
| | 08:56 | can see that now my first tab is
styled a little bit different than the other
| | 08:59 | ones because this one has an id of activetab.
| | 09:02 | Finally, I want to add a little
bit of code to make this thing behave a
| | 09:06 | little better in mobile browsers.
| | 09:07 | I am going to save this and pull up
the iOS Simulator, pull up Mobile Safari,
| | 09:15 | and then I am going to drag
this index.html file here.
| | 09:18 | It looks really good, but it
shows up really small on-screen.
| | 09:22 | So I really need to add a little bit
of code to make this behave better on a
| | 09:25 | mobile device so that it looks a lot bigger.
| | 09:27 | I'm going to go back into codesnippets,
and I'm going to add a viewport meta tag
| | 09:32 | to make sure that it thinks of this
form as being the width of this device.
| | 09:37 | So I am going to go back into index
and add this in my head section, save it,
| | 09:43 | and I am going to refresh this page,
and you will see that the form already
| | 09:46 | looks a lot bigger on mobile devices.
| | 09:48 | It won't have an effect on a
desktop device, but it looks a lot nicer.
| | 09:52 | There is a little bit of
additional spacing that I have here.
| | 09:55 | So I want to clean that
up only on mobile devices.
| | 09:59 | So I'm going to change the navigation
actually has a little bit of code to
| | 10:03 | push it down the screen a little on desktop
devices, just so it has more breathing room.
| | 10:08 | So what I am going to do is add a
media query that makes that margin be a lot
| | 10:12 | smaller on mobile devices, not the
delete it because then it would be flushed
| | 10:16 | right here to the top of this browser page.
| | 10:18 | So I'm going to go back into the
mystyle.css, and then at the end paste
| | 10:22 | that piece of code.
| | 10:23 | After I pasted this media query to
make sure that the navigation margin is
| | 10:27 | smaller, and refreshed this page,
I am noticing that it's not moving up.
| | 10:32 | The reason for that is earlier I had
put in a little bit of margin on the body
| | 10:36 | tag to try to make sure that it moved
down so although the actual form is moving
| | 10:42 | up, this margin at the top of
the body is taking over the space.
| | 10:46 | So if I remove this margin from the
body section, I'll save that and refresh,
| | 10:50 | we'll see that the form does move up.
| | 10:53 | Now that we have styled the form and
arranged the fieldsets so that they appear
| | 10:57 | in different tabs we
need to build interactivity.
| | 11:00 | We'll tackle that in the next movie.
| | Collapse this transcript |
| Adding jQuery navigation| 00:00 | In this movie I'm going to show you how
you build some interactivity into a form
| | 00:04 | with three fieldsets.
| | 00:05 | Each fieldset is in a different tab,
when we get started we'll have a form
| | 00:09 | that looks like this.
| | 00:11 | Right now the tabs don't show or hide
any of the other information and the
| | 00:15 | buttons don't take you to the next fieldset.
| | 00:19 | When we're done you'll be able to use
the tabs at the top of the screen as well
| | 00:24 | as the navigation buttons at
the bottom of each fieldset.
| | 00:28 | In future movies I'll show you how to add
validation elements and how to style them.
| | 00:32 | So let's open up our exercise files,
open up our Starting Points and find the
| | 00:38 | starting point for this video.
| | 00:40 | I'm going to drag a copy of the Working
Folder on to our desktop, holding down the
| | 00:46 | Option key to make a copy, and I'm going
to drag a copy of the Working Folder on
| | 00:50 | to Espresso to open it up as a project.
| | 00:53 | I'm also going to drag the codesnippets.txt
file into the workspace and I'm
| | 00:58 | going drag the index.html
document also into the workspace.
| | 01:03 | We'll go to the codesnippets and
drag down to our section for this video.
| | 01:08 | We're going to need to add a link to our
scripts, so I'm going to copy these two
| | 01:14 | links right here to script files.
| | 01:16 | I'm going to go to the index file and
in the head section of the document paste
| | 01:21 | the links to our two
scripts that we're going to need.
| | 01:24 | We're going to use a library called
jQuery that you'll need to download from the
| | 01:28 | jquery.com web site, and we want to
make sure that we choose the production
| | 01:32 | version that's already been minimized
so that it's as small as possible and hit
| | 01:36 | the download jQuery link.
| | 01:39 | You may have to save
this as a separate document.
| | 01:42 | So I'm going to put it on my desktop
and make sure that we choose Page Source
| | 01:48 | and we're going to add .js extension,
save it to the desktop, go back into our
| | 01:55 | file and I'm going to need to copy
this file into our Project Files.
| | 01:59 | To copy things into a project file
folder in Espresso you can simply just drag
| | 02:04 | into this Project Files section.
| | 02:06 | You can also drag it into the folder
on your desktop, either way will work.
| | 02:10 | I'll put it right here, it adds it right
there, and you could see this if I open
| | 02:14 | up this Working Folder it's
already added right there.
| | 02:16 | Since I have a link to an additional myscript.js
file, I'm going to need to add a new file.
| | 02:23 | So I'm going to click right here and select
New File, and I want to call it myscript.js.
| | 02:32 | And now we have the links to these two
files and we have a copy of each of these
| | 02:35 | two files in our index page.
| | 02:38 | So jQuery is a JavaScript library
that allows you to use versions of
| | 02:42 | JavaScript that have been optimized for
different browsers and take care of some
| | 02:47 | discrepancies between browsers in
the way JavaScript is implemented.
| | 02:51 | First thing we have to do when we work
with jQuery is define a function called
| | 02:55 | the document ready function that
executes after the page has been loaded.
| | 03:00 | So I'm going to do that by going to
the codesnippets, and I'm going to grab
| | 03:04 | this first piece of code right here and this
has the code for the document ready function.
| | 03:08 | Functions that we want to execute after
our page loads will be inserted inside
| | 03:13 | this function, so I'm going to copy
that and go into myscript.js file and paste
| | 03:19 | our document ready function.
| | 03:21 | So I want to go back into codesnippets
and the first thing I'm going to do is
| | 03:25 | make sure that we execute some code,
so that when somebody clicks on the
| | 03:29 | navigation list items, we make all the
tabs inactive which will hide them, and
| | 03:35 | then we will make the tab
that we clicked on active.
| | 03:38 | We do this by using a series of
selectors and then adding methods or functions
| | 03:43 | onto the selectors.
| | 03:44 | So jQuery is really cool in that, it
allows you to specify selectors much like
| | 03:49 | you would do with CSS.
| | 03:50 | So here we're asking jQuery to find any
item with the nav class that is also a
| | 03:57 | list item, and then we're asking to see
if that navigation link has an attribute
| | 04:03 | and setting that idea of
that attribute to nothing.
| | 04:06 | When we set the idea of the attribute to
nothing, if any of the IDs were active
| | 04:11 | tabs before, then it will make them
nothing, so this essentially makes all tabs
| | 04:15 | inactive and it clears in it.
| | 04:17 | Let me go ahead and move this window
over here, I'm going to click on my index
| | 04:21 | file, open up the Preview.
| | 04:23 | If it says that the document has been
renamed just because I named it before, so
| | 04:28 | I'm going to hit Save, I'm
going to go back to codesnippets.
| | 04:31 | I want to grab this piece of code here.
| | 04:34 | Now although Espresso has an excellent
live view, one of the things that it will
| | 04:39 | not update automatically is
any scripts that you type in.
| | 04:43 | Whenever you're typing scripts in
this movie make sure you save this script
| | 04:46 | before you try to preview the document,
and you'll need to come over here and
| | 04:49 | actually refresh the page unlike most of the
time when you're just updating CSS or HTML files.
| | 04:55 | So I'm going to save this and if I
come over here, just remember that most
| | 04:59 | of the time you'll have to remember
to refresh your HTML to make sure that
| | 05:04 | this operates properly.
| | 05:05 | So this particular piece of jQuery
takes care of making sure that these tabs
| | 05:10 | switch and activate whichever page we're
going to be on depending on which item we click.
| | 05:14 | So they do that by first looking for
using the selector, so it's going to look
| | 05:19 | for navigations that have list items in them.
| | 05:22 | And if we look at the HTML, when we
define the navigation we define it with a
| | 05:27 | class of navigation, and each tab
is defined as a different list item.
| | 05:32 | So it's going to look for all these
and it's going to clear out any IDs
| | 05:36 | that currently exist.
| | 05:38 | Right now there is only one id
that exists which is this activetab.
| | 05:42 | So the first piece of that code is going
to get rid of any IDs that currently exist.
| | 05:47 | So if I take this one out,
I'll save it, refresh over here.
| | 05:51 | When I click, you will see that it
will essentially clear out any tabs that
| | 05:56 | are active right now.
| | 05:57 | And then the second piece of code changes
the attribute of the item that we clicked on.
| | 06:02 | Since we're checking anytime somebody
clicks on a list item, it knows with this
| | 06:06 | variable that this is the item that we
clicked on and we can set the attribute
| | 06:10 | of id to be activetab, so what that
does is make sure that the item gets
| | 06:16 | highlighted once you refresh it.
| | 06:18 | Then when we click on these
different elements it will highlight them.
| | 06:21 | It doesn't switch any of these
fieldsets around but at least it's visually
| | 06:25 | showing you the different tabs.
| | 06:27 | So we'll need to take care of that next.
| | 06:28 | So I'm going to go back into
codesnippets and grab the next piece of code.
| | 06:31 | And that piece of code handles --
| | 06:33 | when somebody clicks on the navigation
links it's going to hide all the tabs,
| | 06:38 | make the one that we want active, and
then in addition that it's going to hide
| | 06:43 | all of the fieldsets in this part, and then
we're going to show the one that we want down here.
| | 06:47 | So let me just copy this part, and
go into myscript.js and replace this
| | 06:53 | section of the code with a new version
of the code, and I'll save it, come
| | 06:57 | over here, refresh.
| | 06:59 | Now when I clicked on these tabs
it's going to just hide all of them.
| | 07:02 | So whenever I click one of them, it's
going to switch the tab to be active and
| | 07:07 | have the proper style, and it's
going to hide all these other things.
| | 07:12 | That's good, move up to the next piece of code.
| | 07:16 | Remember that to hide the Step 2 and
Step 3 parts of our form, we had styled them
| | 07:22 | with the class hidden and what this is
doing is taking all the fieldsets and
| | 07:27 | giving them the class of
hidden, so it hides all of them.
| | 07:31 | So in the next piece of code we're
going to add a little more code right here,
| | 07:37 | so we'll replace this entire piece of code here.
| | 07:40 | So we've added just a
couple of other lines of code.
| | 07:42 | What this is doing is, we are looking
to see what the title of the item that
| | 07:48 | we clicked on is and we're going to store
that object into a variable called whichitem.
| | 07:52 | So what that will do is if you take a
look at the index.html you'll see that
| | 07:57 | each one of these list items has a
title and that title happens to match the
| | 08:02 | title of our legends.
| | 08:05 | This one says Login Info, this one
says Other Info, if you go down here into
| | 08:09 | this fieldset you'll see that there
is a title called Other Info, and if we
| | 08:13 | go down here to Comments you'll see that
there is another title here called Comment.
| | 08:16 | So on purpose I make sure
that those things matched.
| | 08:19 | And I'm going to go back into my
JavaScript and show you that it's going to find
| | 08:23 | out which one of those items we
clicked on, and then it's going to look for a
| | 08:27 | fieldset with the title of what we
just checked for, the matching title.
| | 08:33 | And then it's going to take that
fieldset and change the class of that
| | 08:37 | fieldset to nothing.
| | 08:38 | So that means that it will not be
hidden, because the ones with hidden input
| | 08:42 | fields are the ones that are hiding.
| | 08:44 | So I'm going to save that, come over
here, refresh, and now when I click you'll
| | 08:49 | see that it allows you to
navigate to the different fieldsets.
| | 08:53 | Back into our codesnippets.txt, now we
need to code the previous and next buttons.
| | 08:59 | So we'll grab a little piece of code
for the previous button, we'll do that one
| | 09:02 | first, the next button is
pretty much the same piece of code.
| | 09:06 | So, back into myscript.js,
be very careful about this;
| | 09:09 | we need to make sure that this is all
still within the document ready function.
| | 09:13 | So here is the function for handling
clicking on the navigation links, we don't
| | 09:18 | want to get rid of this one right here.
| | 09:19 | I'm going to add a few extra spaces down
there and add the next piece of code right here.
| | 09:25 | If you remember what we did with each
one of these list items, is create an id of
| | 09:30 | activetab to highlight which one of
these elements was the current element.
| | 09:36 | The next and previous buttons
can't understand which fieldset is active,
| | 09:41 | but by keeping track of which of these
tabs is active, we can know which number
| | 09:46 | fieldset is also active.
| | 09:47 | So that's what this part of the code does.
| | 09:50 | We look at the entire document for
anything with an id of activetab.
| | 09:55 | That will be one of these tabs right
here, whichever one happens to be active.
| | 09:59 | In the next line we find out the
index of that item, so we want to find out
| | 10:03 | which number tab is active.
| | 10:06 | So we could do that by taking a look
at which index of the list item is this
| | 10:12 | item that we have selected up here.
| | 10:14 | When we switch to another fieldset, we
want to update the tabs by making them all
| | 10:19 | inactive and then updating the tab
that belongs to fieldset that we want.
| | 10:24 | So this piece of code right now, if
we save it and we refresh, when we go to
| | 10:29 | another tab -- I'm going to hit the
previous button now to go to the
| | 10:33 | previous tab -- it's really only going to
update the tabs right now, because all
| | 10:37 | we have done is found out which one of
the tabs was active, which and when we
| | 10:42 | first reloaded this it was tab 2,
and we store that into this variable.
| | 10:46 | And then we just clear all
the tabs like we did before.
| | 10:49 | And then we have a selector here that
allows you to check which nav item is
| | 10:54 | equal to the current one that we have
clicked on, minus 1, so it's going to
| | 11:00 | find the nav item before the current
nav item, and it's going to change the id
| | 11:05 | of that nav item to activetab, activating
the tab so that it shows up as the current tab.
| | 11:10 | We haven't done anything with the
fieldsets yet, we're going to do that next.
| | 11:14 | So back into codesnippets,
this is the same code as before.
| | 11:18 | We're just adding a couple of
lines to care of the fieldset.
| | 11:20 | So let me grab that code, I'm going
to copy here, go back into myscript.js.
| | 11:25 | Again, make sure you're not deleting
this last piece of code, because it goes
| | 11:29 | with the document ready function.
| | 11:33 | And we're going to actually select
all of this and replace that code that
| | 11:37 | has the next two lines.
| | 11:39 | This is pretty much like the code that
we did before to hide all the fieldsets.
| | 11:42 | It just sets the attribute of all
the fieldsets to hidden, and then we do
| | 11:47 | something like what we did with the list
items, we're finding out which fieldset
| | 11:51 | is the current fieldset minus 1, which
will be the previous fieldset, and then
| | 11:56 | we're adding a class of nothing.
| | 11:57 | When we add the class of nothing to
the fieldsets, the nav fieldset would
| | 12:01 | actually show up, because over here we've
set all the fieldset to be of class hidden.
| | 12:06 | When they are not hidden, they are showing.
| | 12:07 | So I'm going to save that, come over
here and refresh, and I'm going to click
| | 12:12 | on Step 2 and I'm going to click on
the previous button and it's going to
| | 12:16 | navigate the tabs properly and it's
also going to show this fieldset that is
| | 12:21 | the first fieldset.
| | 12:22 | So that's pretty much all you
have to do for the previous button.
| | 12:26 | The next button is going to be pretty
much identical, but obviously we're not
| | 12:29 | going to go the previous item using minus 1,
we're going to the next item using plus 1.
| | 12:35 | So back into the codesnippets, and
we'll grab the next piece of code into our
| | 12:40 | scripts.js, and paste our
code for the next button.
| | 12:45 | This will be pretty
identical to the previous button.
| | 12:48 | The only difference is going to be
that here we're going to add 1 to the
| | 12:52 | whichOne item, so that it
increments to the next element.
| | 12:55 | So we'll save that, come over here,
refresh, we can hit this next button now and
| | 13:01 | it will clear all the tabs, activate
the current tab and then set the fieldset
| | 13:06 | to the proper fieldset.
| | 13:07 | We can hit the next button and go to
the third element and we can hit the
| | 13:11 | previous button, previous button, we
can hit the tabs to navigate and we have
| | 13:15 | built an animation to navigate
between our fieldset in different ways.
| | Collapse this transcript |
| Designing validation feedback| 00:00 | In this video I'm going to show you
how to style validation feedback and use
| | 00:05 | jQuery to activate it.
| | 00:07 | Make sure you watch the rest of the
videos in this series to see how the form
| | 00:10 | was styled and how I dealt with
programming the navigation elements.
| | 00:14 | So open up the exercise files and open
up the Starting Points folder, and find
| | 00:20 | the folder for this video.
| | 00:22 | Take the Working Folder and make a
copy of it on to your desktop, then I'm
| | 00:25 | going to drag that folder onto Espresso,
which will open it up as a project.
| | 00:30 | Then I am going to take the
codesnippets.txt document, drag it into our
| | 00:34 | workspace, and I'm going to double-click
on the index.html file, the myscript.js,
| | 00:41 | and the mystyle.css files to
bring them into the workspace.
| | 00:44 | I'm going to move this over to this
side, and then I'm going to click on the
| | 00:48 | index page and Option + Click on the
Preview icon to bring up the live preview.
| | 00:53 | So the first thing I need to do is to
add a thank you page to this document,
| | 00:58 | right now the form doesn't
submit anywhere, so we need to go into
| | 01:01 | codesnippets.txt, find the section
for this movie and copy this replacement
| | 01:07 | for the form field.
| | 01:09 | So I am going to go back into index.html
and I am going replace this form field
| | 01:14 | right here with the new version that's
going to send this form to a thank you
| | 01:18 | page when users submit it, of course
we have to create this thank you page
| | 01:22 | because we don't have it yet.
| | 01:23 | In Espresso I can just click right
here to create a new file and call it
| | 01:28 | thanks.html, and I'm going to go into
my codesnippets.txt and copy the code for
| | 01:35 | that page; it's pretty simple code,
just a div with an id of thanks and then a
| | 01:39 | headline and a paragraph.
| | 01:40 | So we'll go into the thanks.html file
and we'll paste the text for the page, hit
| | 01:48 | Save, I'm going to hit the Save again here.
| | 01:50 | And now when users submit the form they'll
go to a thank you page, we need to
| | 01:55 | add a few styles to make sure
that this thank you page looks nice.
| | 01:58 | So I'm going to go back to codesnippets,
and grab some basic styles for the thank
| | 02:02 | you page, copy that and go into mystyle.css,
and just add some very basic styling
| | 02:09 | to make the page look nice, save it.
| | 02:12 | So now I need to add some jQuery
that's going to prevent the form from
| | 02:16 | submitting unless they have
filled out the required fields.
| | 02:19 | So I'm going to go back over here
and click the back button, go into my
| | 02:23 | codesnippets, find the next section of
the code and grab this little piece of
| | 02:29 | jQuery right here, go into myscript.js.
| | 02:32 | And I want to add this code right here
after the last click function, but not
| | 02:38 | deleting this little piece of code
right here which goes with the document
| | 02:42 | ready function, the document ready function,
just execute this code after the page has loaded.
| | 02:47 | So I want the code to go right here.
| | 02:49 | I want to hit Paste.
| | 02:51 | And what this function does is make
sure that all the required fields have a
| | 02:55 | value of something when the form is submitted.
| | 02:58 | If the form is submitted and these
fields do not have a value, then this will
| | 03:03 | return a false value which will
prevent the form from being submitted.
| | 03:08 | If all of these values have a value
then this function will return true and
| | 03:13 | the form will submit.
| | 03:14 | So I'm going to save this, go back here,
make sure that whenever you are dealing
| | 03:18 | with JavaScript, you reload your page,
and then I am going to try to submit this
| | 03:23 | form and now the form doesn't submit,
it will only submit if I fill a value for
| | 03:29 | these different fields.
| | 03:30 | So I fill the required fields, when I
hit the send button it will take us to
| | 03:35 | the thank you page.
| | 03:36 | It would be nice to add some
feedback to the user to make sure that they
| | 03:40 | understand that they have failed to fill
out some of the fields that we require.
| | 03:44 | So I am going to go back into
codesnippets, grab the next piece of code,
| | 03:48 | which is just a div with an id of message so
that we can place some feedback code in there.
| | 03:53 | And so I'm going to go back into my
index.html file, and I want to place this
| | 03:58 | after the form field, but
before any of the field sets.
| | 04:02 | So it will appear at the top of the
form fields, go back and refresh this page,
| | 04:07 | it should appear right up here.
| | 04:10 | I'll paste that right there;
| | 04:11 | right now you can see that nothing is
showing because this doesn't have any text
| | 04:15 | in it, it will whenever
we program it with jQuery.
| | 04:17 | So I am going to save that.
| | 04:20 | The next thing I want to do is
actually create a style for the message.
| | 04:24 | So back into codesnippets and I'm
actually going to grab this and add it our
| | 04:28 | style sheet to make sure that our
messages have a little bit of a border radius
| | 04:32 | and some color, background color so
we'll go back into mystyle.css, and we'll
| | 04:38 | paste that right there, hit save.
| | 04:41 | Go back into the codesnippets and now
we are going to grab a slightly different
| | 04:46 | version of our submit function, copy
that back into myscript.js and I'm going to
| | 04:53 | replace this version of our submit function.
| | 04:56 | So this version is pretty much like
the last version, we have added an
| | 05:00 | additional if statement, check to see
if the name has been filled out and if it
| | 05:04 | hasn't been filled out it adds a
message, we've appended this message to the
| | 05:09 | message id section and
given it a class of message.
| | 05:13 | So when I save this, go back into my file,
I'm going to make sure I refresh this
| | 05:20 | page and I am going to go to step three,
try to submit the form and now I get a
| | 05:26 | little bit of feedback.
| | 05:27 | Notice that the feedback faded in a
little bit and I did that by adding
| | 05:31 | an animation function.
| | 05:32 | If I just append the message then the
message would appear immediately. In order
| | 05:37 | to fade it in, first I need to hide the
message and then fade it in and add a
| | 05:41 | millisecond amount here to tell
how fast it's going to fade in.
| | 05:44 | And we have a problem with this form
in that if we try to submit this form
| | 05:47 | again, it's going to keep on adding
messages on top of the field sets which
| | 05:52 | might not be optimal especially when
you have a lot of input elements that we're
| | 05:55 | checking, this will get a little
messy, so we need to clear this out when
| | 05:59 | somebody tries to submit the message.
| | 06:00 | So I'm going to go back to
codesnippets, and grab the next piece of code, go
| | 06:05 | back into myscript, replace the
submit function, in this version we are
| | 06:10 | clearing out all the messages when
people resubmit by setting the message id
| | 06:16 | that we created to empty.
| | 06:17 | So if I come back here, I want to
make sure I refresh this page, try to
| | 06:21 | submit it, it will appear the first time, if I
hit it again it will disappear and then reappear.
| | 06:27 | Now it would be nice to have an alert
that let us know where are on this page
| | 06:31 | we needed to type the information that
we forgot to include, so I am going to
| | 06:34 | do that next, go back into codesnippets and
grab the next version of our submit function.
| | 06:39 | I am going to go back into myscript,
replace this submit function, and in here
| | 06:46 | we're adding an alert message after the
myname input field, so you could see that
| | 06:52 | this is pretty much like the last thing
that we had, but we've added this line
| | 06:55 | right here that says you find the
element called myname and after it add an
| | 07:00 | alert that says enter your name.
| | 07:02 | So we'll save that, come back into our
form, make sure we refresh, try to submit
| | 07:07 | the form, we get this feedback right
here, and if we tab over to Step 1, we
| | 07:12 | can see that after the input field we
have a little message, it doesn't look
| | 07:16 | that great, so let's
style it a little bit better.
| | 07:18 | We'll go back into codesnippets and we
created a special style, and this style
| | 07:25 | just positions the element in the
middle of this input field and adds a little
| | 07:29 | bit of background color
and roundness to the element.
| | 07:31 | So we'll go into mystyle.css, and just
paste that at the end and you can already
| | 07:37 | see that feedback is a lot better with
this style, so I'll save that.
| | 07:42 | Back into our myscript.js file, we also
take care of clearing that message if
| | 07:47 | somebody resubmits the form in a
slightly different manner, we are going to find
| | 07:51 | the any alert class on the page and remove it.
| | 07:55 | We can't empty it because it's not
something that is inside this element, it's
| | 07:59 | an item that we want to completely
remove, so it's just going to remove this
| | 08:03 | class if we try to submit this even
though we forgot it this one time, we didn't
| | 08:07 | fill it out even when it asked us to,
if I try to submit it it's going to make
| | 08:11 | this disappear and reappear.
| | 08:13 | If I come back here I won't have
more than one of these elements onscreen
| | 08:17 | because I make sure that I am
clearing them out right here.
| | 08:20 | So now that we've done that for one
element all we have to do is repeat that for
| | 08:23 | all of the elements and I am going to
grab this last piece of code, copy that,
| | 08:29 | go into myscript.js, replace this
function, all this is doing is repeating the
| | 08:36 | same thing for all the other fields,
the email field and the URL field.
| | 08:40 | So I'll save this, I'll come over here,
I'll refresh this form, go to Step 3,
| | 08:45 | not fill anything out, try to submit it,
it gives us three lines of feedback.
| | 08:49 | If I go into Step 1, I can see the
feedback is also in the individual input
| | 08:53 | fields that needs to filled out,
so I'll type in just one of them.
| | 08:59 | Go to Step 3, try to submit this,
now it's telling us that we forgot
| | 09:02 | to include two things.
| | 09:03 | If we go back to Step 1, you'll see
that the little alert is no longer here,
| | 09:07 | and I fill out my email.
| | 09:10 | Go into Step 2, fill out a web site
address, and go to Step 3 and send the
| | 09:17 | form and now I can get to the thank you page.
| | 09:20 | In this video we learned how
to use jQuery and CSS to handle
| | 09:23 | navigation feedback.
| | 09:24 | To find out how this form was styled and
how to get the navigation to work, make
| | 09:29 | sure you check out the rest
of the videos in this chapter.
| | Collapse this transcript |
|
|
Additional ResourcesNext steps| 00:00 | To learn more about some of the
topics on this course, there's a lot of
| | 00:03 | excellent resources on the
lynda.com Online Training Library.
| | 00:07 | To find out more about designing
forms make sure you check out Web Form
| | 00:11 | Design Best Practices.
| | 00:13 | To find out more about HTML5 and web
forms, which gives you some tips on how to
| | 00:18 | create alternatives for some of the
new HTML5, form elements and attributes,
| | 00:23 | make sure you see Joe
Marini's HTML5: Web Forms in Depth.
| | 00:27 | You might also want to check out a
couple of my own courses Creating an Adaptive
| | 00:31 | Web Site for Multiple Screens, and iOS
Web Applications with HTML5 and CSS3.
| | 00:38 | In this course I'm using some Seamless
backgrounds and this is a really cool web
| | 00:41 | site that I like for backgrounds in
general, which also has some Seamless
| | 00:46 | backgrounds that you can
use on your web projects.
| | 00:49 | If you love reading books there's
a couple of really good books I like
| | 00:51 | Introducing HTML5 by Bruce Lawson and
Remy Sharp, it's a really good read, and
| | 00:57 | also the jQuery Cookbook from O'Reilly.
| | 01:01 | You can also check out my own web site,
planetoftheweb.com and you can find me
| | 01:05 | just about anywhere at planetoftheweb.
| | 01:07 | I hope you have a great day
and enjoy working on your code.
| | Collapse this transcript |
|
|
