Using CSS for a form

[misstheresa2009]

Hello Everyone! I hope you are having a great morning.

I have spent the last few weeks learning CSS. I have watched tutorials, read articles and books and I think I am finally understanding how it works. But I have a question about web form graphics and how to fix them so that users can put a cursor in them.

I am studying on how to use CSS with a login form created in Photoshop that I found on the internet. In order to make it come alive would I use a class such as 'input[type=text]? Is this how web designers work with these types of forms? I've seen several of these types of forms created in Photoshop or Illustrator and I was always confused about how these work.

Also, does anyone know about any tutorials on this subject?

BTW, here is a picture of the login form I am trying to work with:

[kohoutek]

You'll obviously need to learn the basics of CSS and HTML and Accessibility to create a solid form. The style you have shown isn't difficult.

See some examples below:

http://codepen.io/joshnh/pen/21
http://codepen.io/skat-delayed/pen/snmfD

[ralph.m]

Hi misstheresa2009. Welcome to the forums.

Unfortunately, Photoshop maketh not the web! It creates pretty pictures that have little to do with anything on the web, because, as you've seen, a form is not a picture. It's better to start from the basic code and then apply styles to that. As kohoutek's examples show, you can create that look with CSS alone, thanks to newer developments in CSS3. You can also use images to an extent, but only in small doses.

If you Google "CSS3", "form", "jQuery" and perhaps a dose of "sexy" thrown in, you'll find a lot of tutorials online.

[misstheresa2009]

Thanks for those links, kohoutek. I checked them out and those forms look really good. I will have to study the code to get a better understanding of how CSS and forms work.


Best regards,

misstheresa2009

[misstheresa2009]

Hi misstheresa2009. Welcome to the forums.

Unfortunately, Photoshop maketh not the web! It creates pretty pictures that have little to do with anything on the web, because, as you've seen, a form is not a picture. It's better to start from the basic code and then apply styles to that. As kohoutek's examples show, you can create that look with CSS alone, thanks to newer developments in CSS3. You can also use images to an extent, but only in small doses.

If you Google "CSS3", "form", "jQuery" and perhaps a dose of "sexy" thrown in, you'll find a lot of tutorials online.

Hello and thank you Ralph.m for that advice. CSS is becoming a pain to learn but I can see it really is useful. I am blown away that so many people are so good at it. I will look online for some tutorials using the keywords you mentioned. I guess I'll start with YouTube.

Best regards,

misstheresa2009