Dreamweaver CS4 Tutorial - 37 - Finishing up Forms Video Lecture | How to create Responsive Websites with DreamWeaver - IT & Software

hey what's up in this last forms
tutorial we are going to create a form
that allows a user to schedule a meeting
and for this form we are going to create
four different items of input we're
going to create a name and email a date
and a time whenever you're creating
forms you have to think about how you're
going to format them in this particular
case we're going to use tables we're
going to use a table with four rows and
2 columns to format the the label on the
left and the actual input the form input
on the right so let's get started if you
do not have any experience with tables
then I would recommend going back and
checking out my tutorial earlier on in
the Dreamweaver cs4 series about tables
I'm first going to create a table with
four rows I'm going to create one row at
a time going to create the first row and
then I'm going to create two columns
inside that row and then I'm going to
copy that row four times just like this
there we go so now we have four rows
inside of our table the next thing we're
going to want to do is actually create a
form to to wrap up our form items in so
we're going to go over here to our
insert forms and we're going to click on
form and we're going to put the action
as a number sign which usually you would
insert the link to some PHP years from
cold fusion or ASP code to handle the
form but for this example we're just
dealing with actual building actually
building the forms themselves and not
handling them we are going to validate
them though so now we have our form I'm
going to take this closing tag and I cut
that and put it at the end
table here just like that all right so
now that we have our form we have to
think about what we're going to put in
our forum and as I said before we're
going to put it a name we're going to
put in an email we're going to put in a
date also put the time and what I did
right there was I put the label in the
first column of each row and in the
second column in vitro we're going to
put our input so for the name we're not
going to validate it we're just going to
give it a text field and we're going to
give it a name of meeting name and now
we're going to have an actual text field
that's going to be validated based on an
email so we're going to click inside of
the second column in the second row and
click on spry validation text field just
like that I'm going to give it an ID of
email there we go and since it's the
properties of this spry aren't showing
up down here i'm going to click on page
properties and say ok and now we have
our sprite excelled properties down here
and for this particular input box we're
going to make sure that it's going to be
validated on an email address and that
is that for the email and now we're
going to do the same thing except
instead of email we're going to date so
say spry validation text field ID is
date and click on page properties say ok
and now we can see that this is of type
date we can also see the format here and
we're going to go ahead and add that to
the hint just so they know just the user
knows exactly what they need to put in
side that particular field and lastly
we're going to give the user the ability
to select a time from a drop-down list
so to do this we're going to click on
spry validation select when gave an ID
of time and we're going to say okay and
that has created our select tag for us
and so we need to actually add some list
values we're going to start let's say
nine am-10 a.m. 11am and 12pm there we
go okay so now we have some options
inside of our select menu and to get the
actual values are the properties for our
job down we're going to click on page
properties and say okay and I'm going to
go ahead and copy this option with a 9am
and paste it above the one I just copied
and then i'm going to change this value
to blank just like that and refresh here
and make sure you have that do not allow
blank value inside of the surprise
select that way if they try to submit
this blank value then it's not going to
allow them to do that and that well
actually that is not it we still need to
add in our submit button so go ahead and
say button submit and then say okay let
me just take a look at this code make
sure everything's alright looks like
that's good good to go we have our form
and submit alright so let's just take
this and put it outside the table there
we go all right now let's check this out
so you can see that the cement went to
the very top and that's strange look at
that in the code in a second we're going
to type a name and email and then
say 2010 give it a time of 11am and that
should be good enough to submit and what
should happen is these should turn green
just to say okay they're good to go and
you saw them turn green and that is
basically all you need to do to create a
working form let's go back here and
let's create a row for this submit
button that way it's not at the very top
and I added in that call span 2 which
means that it spans two columns there we
go let's run this and this should look a
little bit cleaner there we go alright
and that wraps up our forms series and
the next series is going to be on
creating interactive web pages it's
going to be a lot of fun it's going to
be super sweet so make sure you guys
subscribe stay tuned and keep watching
these tutorials you're sure to learn
something and I will see you in the next
tutorial