HomeОбразованиеRelated VideosMore From: tutvid

Styling a Simple Form with CSS in Dreamweaver

303 ratings | 92931 views
Check out another of my videos: "BREAKDOWN: Select and Mask vs. Refine Edge - Photoshop CC" https://www.youtube.com/watch?v=DTw78XQNjAo -~-~~-~~~-~~-~- We will go ahead and create a form and then style it using CSS. Learn how to hand code a simple form and then hand code all of the CSS code you need to create a nice little form. The beauty of this tutorial is that you can do all of the coding in Dreamweaver or any HTML editing software, if you can type words and export an HTML file you will be able to follow this tutorial! Have fun learning some simple HTML and CSS! Follow me on Twitter! http://www.twitter.com/tutvid Be sure to check out http://www.tutvid.com Check out the blog @ http://tutvid.wordpress.com
Html code for embedding videos on your blog
Text Comments (84)
Mel Ky (9 months ago)
I Love your Videos, Any way you can create a Real Estate website, with search properties etc?
Tobie Harsh (1 year ago)
Great tutorial, thanks mate!
Dayang Diyana (1 year ago)
why can't i validate this form?
Rajesh Vidyut (2 years ago)
Extreme engine... +
tutvid (2 years ago)
TheNanoWeb (2 years ago)
Thanks a lot...
Nuno Silva (3 years ago)
Akash Amol (3 years ago)
Cleared my CSS doubts! Nice Explanation.
shadowflare99 (3 years ago)
where you put the : receiving e-mail address.
KatiushaVN4 (4 years ago)
You didn't insert your receiving e-mail address.
Sikes Pico (4 years ago)
If you're gonna code it by hand, why include dreamweaver in your title? 
CARambolagen (4 years ago)
This is all fine, but what about those people who don't want to look at oodles of hieroglyphs? The whole Point of a WYSIWIG Editor is to aid People who are not programmers. I find writing code really tiring and dull!
Those Epic Scenes (5 years ago)
You're not that good in explaining. 
TV Main (5 years ago)
Lmao @ 08:00 says "don't second guess me, don't second guess yourself" hahahahahah (btch do as I say and stfu! hahahah)
Amal Babu (5 years ago)
Am a beginner. Can anyone pls tell me why he didn't write input type="text" but only wrote input name="name" for the text field.
Sandy Dalrymple (5 years ago)
lol he says at 2:30 he's just going to style it
Tony Michael (5 years ago)
I'm pretty sure Adam Simpson is right. I think it's CSS 2.1. In your CSS file, on the #fieldWrapper ID, add border-radius: 20px; It will make your form look nice.
Charlie Sheen (5 years ago)
its css2 i think
aruna wadhwani (5 years ago)
can u plzzz tell which version of css u r using...????
aym313 (5 years ago)
Great tutorial!!
Suraj Rajbanshi (5 years ago)
very usefull
latheef malru (5 years ago)
hai, good nd very helpfull vedio
beinyourguard (6 years ago)
I know it's late, but it's the size of the 'M' character. So 2em = the distance of 'MM'.
ladyscarfwrap (6 years ago)
I would first like to thank you for great tutorials. They've been very helpful for my learning. I have a question about using CSS styles for creating a web site. I am creating a site that would contain about 20 pages and in time increase. I want to create 3 separate css files, one for layout of the page, second for styles (h1,h2...) and third for navigation bars, so I could use each of them for as many pages as I want. Is this a good practice? What is ur advice? Thnx
Brian Finn (6 years ago)
ha ha ha figured it out.......I didn't close my style tag.
Brian Finn (6 years ago)
As soon as I start styling with css the form disappears!? Why?
james dawwgg (6 years ago)
That was awesome man! Thanks allot!
TheBlakeWilliamson (6 years ago)
@davidknag look up phpacedemy. that's all php your talking about. this is css. lol
Robert Benson (6 years ago)
LOL.... dont second guess me ;)
Aconi (6 years ago)
@davidknag he said styling not formating.
Martin Benes (7 years ago)
R1D1 (7 years ago)
Hey everybody I just finished designing my website but I don't no what to call it! Can someone help me its for helping young graphic designers although I could use some help myself right now. Please send me a message if you even bother helping me Thank you!
lorenzom21 (7 years ago)
Why did your form buttons suddenly line up when you styled them?
Brick1411 (7 years ago)
lol jk nice vid
Brick1411 (7 years ago)
Yahya Al-Yafeai (7 years ago)
Great job
beinyourguard (7 years ago)
tutvid is the best tutorial channel ever.
mimshach lirfa (7 years ago)
also i use macromedia dreamweaver 8,i wanna know is it possible to create standard images like your header(barner) and so on with dreamweaver or i gata do that in another program like photoshop etc.pls nat, i await your reply.. thanks again.
mimshach lirfa (7 years ago)
but i gat a problem using tables, that's the normal tables, am made to understand that i can also use css to design a webpage but i tried looking for such videos here and couldn't get what exactly i was looking for, i was wondering if u could teach me that by doing a video for me, or even teach me how to use tables to design a table ,
mimshach lirfa (7 years ago)
hey nathaniel,am mimshach from Nigeria and i really love yr videos , i have really learnt alot from you. i wanna say thank you.i gat this littlle challenge,Ok. i can fairly design a webite now thanks to you and some other guys here on youtube...
Zenrion (7 years ago)
@sumosumo84 This was so long ago I don't even have it anymore
ANTERIOR (8 years ago)
@davidknag You did this for learning, you didn't do it for creating a whole website. Check his other tutorials, this is "Styling a Form with CSS" not "Creating a form for my website."
Aivars Priedītis (8 years ago)
@davidknag You need to use a php. This tutorial shows only how to make the visual part of contact form.
CodyL95 (8 years ago)
conTEXT is a good text editor i use for editing code on my Windows Vista
Rolly Rodrig (8 years ago)
Thank You so much Nathaniel, a'm learning a lot with your videotutorial, this code is a little hard, but i will try understand everycode^^, thank man, keep helping to world ^^, Greetings from peru ^^, Sorry for my bad English
DrJams (8 years ago)
Don't forget to use the accesskey Attribute in your forms. I love sites that use them. (so I can be lazy)
Theben0987 (8 years ago)
@davidknag If you go to his website, he has a tutorial on how to send it via php. :) if not, just good, how to send mail via php.
JohnnyRock2000 (8 years ago)
@fredv1 As you have said, if Dreamweaver is for noobs, what do you suggest? Experience is a teacher. Can you enlighten us at all. We are not geniuses here. Just looking for help in a complex display technology.
scientist100 (8 years ago)
@fredv1 not really, I use it for coding, 'not for design' but still is very helpful, when using any other program you sometimes misspell some words giving you headache, by the way I started using Programmer's Notepad, google it, it's great program. Handles php and many other languages, highlight etc ;)
scientist100 (8 years ago)
@tutvid you have a tutorial about this Nate and it works nicely, you should have pointed that out to him ;)
scientist100 (8 years ago)
even though the browser is smart enough to know that input is recognized as textbox, it's a better idea to use type to be specific, just some things, to keep in mind, maybe you just forgot to point that out. - J.
Shakaama (8 years ago)
hey what you think of aptana studio? I went to your website, the videos are so crystal clear on there. I didn't realize how bad youtube is. Thank you for this tut btw.
cmoivalou (8 years ago)
Nice tuto.
Not a fan of Google+ (8 years ago)
@tutvid Yeah, sounds good! I love your videos btw. When i was learning HTML and CSS in the beginning, you helped me a lot. And i still learn a few things watching your videos today.
BmoreGraphic (8 years ago)
I filled out the html in note pad. When I viewed it in firefox there was a comment box but no boxes for "name" or "email" nor were there any buttons. I then tried to do it in dream weaver... the same thing keeps happening. i keep pausing the video to double check my code... and yet nothing is different. Why is this happening?
Matt Law (8 years ago)
waaay to fast... i cant follow along...
crispypotato (8 years ago)
Ha ha- funny thing is the CSS still did not work correctly in Internet explorer-for me at least, Firefox, Chrome, Opera all did great. I'm starting to get annoyed by IE, 90% of the time things end up looking wrong on it, and you end up spending 2h on a separate style sheet for IE. :( Great tutorial BTW-thank you!
James Dolan (8 years ago)
Awesome tutorial but how do I make it send to a certain email address? I was hoping the tutorial would show that. Cheers TutVid!
flamemon11 (8 years ago)
can you make a video on how to make a website with css using dreamweaver cs4 plz and thank you
Shawn Kelly (8 years ago)
@tutvid not a problem, Your vids have really helped me when I started out in dreamweaver.
skjlab (8 years ago)
is not Safari pickier then Explorer?
tutvid (8 years ago)
@xxashyy Yep, changed a few settings, hopefully it is nice and clear for most everybody. N.
tutvid (8 years ago)
@antorobertson Caught! Yes, I typically try to shorthand as much as I can, but I forget sometimes. :) Thanks for the heads up pal! N.
tutvid (8 years ago)
@i3ak3ri301 I would run a quick Google search for a "PHP form handler" you should find either a nice little script or even a tutorial on how to pop one together. N.
tutvid (8 years ago)
@tirathmistry Thanks man! I appreciate that! N.
macjsus (8 years ago)
I wish the HTML wasnt yellow, you should change it to green or orange or something that contrast better against white.
tutvid (8 years ago)
@Jebrone Glad it helps(ed) you out! N.
tutvid (8 years ago)
@Fancylooks Thank you for watching! N.
tutvid (8 years ago)
@NikkexD Haha, yes, there are a look of great time saving features of HTML5 and CSS3, but I really didn't want to get into them here. This is a pretty basic tutorial, you gotta take it one step at a time. I am planning on getting some HTML5 and CSS3 tutorials out in the very near future however. N.
tutvid (8 years ago)
@Skelly85 I'll take a look at changing or darkening the yellow to make it a little easier. Thanks for the heads up! N.
Paul Houde (8 years ago)
This is exactly what I needed! Thank you!!
Shawn Kelly (8 years ago)
The yellow font is hard to see.
neoc03 (8 years ago)
This was an amazing tutorial!!! Thank you
Not a fan of Google+ (8 years ago)
@NikkexD also, with the new HTML5 you don't need to set the type of either style or script tags. Style will be automatically set to text/css and script will be automatically set to text/javascript. You can begin using that already, even though HTML5 hasn't been fully released yet.. it will work. :)
Not a fan of Google+ (8 years ago)
I don't see why you are using images? The only, yes, only image you need is the background. The border of the wrappper can be made by using a border and outline, and the inner gradient can be done with CSS3, and as it's barely even visible, i don't think a IE6 user would take sucide if he didn't see it.
Stuart Mansfield (8 years ago)
Nathaniel great job clean and so much better than using a table based form .
Fancylooks (8 years ago)
This is really proffessional teaching for free! It is great, thank you so much!
Anto (8 years ago)
@FlegDesigns yea it does the same true, but keeping your code short, keeps it neat, and just reduces your load times, not much, but yea..
Tirath Mistry (8 years ago)
Thank you so much Mr. Nathaniel for all your time in preparing these wonderful Detail video tutorials. I must say i am your fan of you & your no 1 tutorials also. You have done a great job in keeping the content as simple as possible for any newbie like me (to graphics world) to understand. Much appreciated and keep up your good efforts. Keep educate us on youtube Thank you God bless you :-)
Zenrion (8 years ago)
Hey Nathaniel, I got my whole entire form set up, but I tried to test it by sending an e-mail to myself and nothing happened. Do you know what might be the problem? I'm sorry if I sound so ignorant about this, I'm fairly new to coding and such.
Anto (8 years ago)
margin:0 auto 0 auto, does the same job as margin:0 auto; you should explain that man. Keep your code clean :P.
CodyL95 (8 years ago)
you can also use a live HTML editor on the internet to see what your editing i use them all the time when im experimenting with HTML and CSS
endx2 (8 years ago)
wow, where was this last week lol
Jarock123 (8 years ago)
Thanks for the tutorial.

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.