Sign-in or Register: Form Design From Scratch (Day 2)
videos

Sign-in or Register: Form Design From Scratch (Day 2)

on Sep 23rd 2011 with 23 comments
Tutorial Details
  • Topic: Form markup and styling
  • Difficulty: Beginner
  • Screencast duration: 2 hrs 35 mins
Download Source Files
Demo View It Online

Having completed our form design in Photoshop, we’re now going to turn our attention to the nuts and bolts of the process. Let’s slice up the PSD, sort out some markup, style the whole lot, add some jQuery flourishes, then finish off with some inline form validation.

There’s a lot to do, so let’s get started!

Section 4: The HTML Markup

Let’s continue our forms by laying out the HTML markup based on our design.

Don’t like ads? Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes!

Section 5: Slicing up the PSD

It’s now time to turn our attention to the PSD again. We’re going to slice up the visual elements we need, then begin some styling in the CSS.

Don’t like ads? Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes!

Section 6: Styling the Sign In Form

Having styled our basic tab structure, let’s now look at the sign in form.

Don’t like ads? Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes!

Section 7: Styling the Sign Up Form

We’re now going to treat our sign up form in a similar way. Let’s also add some jQuery magic to the tab layout.

Don’t like ads? Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes!

Section 8: Inline Validation

Having completed the build of our forms, let’s now concentrate on the functionality. We’re going to apply some nifty inline validation, and polish up the final touches.

Don’t like ads? Download the video, or subscribe to Webdesigntuts+ screencasts via iTunes!

Further Reading and Useful References

Adi Purdila is AdiPurdila on Themeforest
 
Enjoyed this Post?

Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!

By

Rollover to read this author's bio or click through to see a full list of posts by this author.

Whether it’s websites, logos or print materials, my work philosophy is the same: never take any shortcuts and always put my heart and soul into each project because in the end, it’s the small details that count and the more effort I put into a project, the better it represents myself as a person and a designer and at the same time, it represents my client in a manner that’s appropriate to his needs. If you’re interested in the HTML Templates and Landing Pages I’m developing, you can check them out on my portfolio page on ThemeForest.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • cos

    Great stuff Adi,

    i like the way your explain all this, very nice work

    Im looking forward to see more tuts from you =)

    • http://laranzjoe.blogspot.com lawrence77

      +1

  • supprof1

    you re doing your tutorials with perfection
    i never seen before this, free tutorial us professional us Adi Purdila tutorials
    taking care of every pixel and details.
    thank you very mutch
    may be you can extend one of your psd to html tutorials to wordpress theme?
    thank you very mutch Adi Purdila.
    realy thank you!!

  • SoccerGuy3

    How are you expanding the short codes in Coda?

    • http://www.snaptin.com Ian Yates

      He’s using TextExpander – check out this quick tip (by Adi, as it happens) and all will become clear :)

  • dj

    Adi… Only three comments at this late date. You should NOT think that the topic wasn’t one which was useful or interesting. It is. In fact, you should not think that you didn’t have many items which were very worthwhile instruction. There were. However, 20 – 30 minutes to present 3 minutes worth of material… really! You have not reached the level to be able to “wing it” live. Perhaps a run-through, or two or three, would help make the final tut more direct and to the point. By the end of the last one you seemed lethargic and distracted and I just have a feeling that you know your stuff better than how you came across.

    Also, I’ve scoured the web for tut’s on making a sign-up system (obviously with the purpose of premium content). Tut’s just like yours seem to be ubiquitous and almost a dime a dozen. What is NOT found anywhere is to actually follow through and make this actually USEFUL and DO SOMETHING instead of being just a mere eye-candy styling tut. (i.e. what’s next? When the submit button is hit, how does one capture the data? What code/styling is necessary on the protected content to prevent viewing? etc.)

    Here’s hoping I get to see another tut of yours perhaps a bit more showing what you really can do.

    • http://www.adipurdila.com AdiPurdila
      Author

      Hi dj,

      Remember this is Webdesign Tuts, so diving into PHP is not really what we do here. If you don’t know how to capture the data, I suggest you Google it, there are some great articles on form submission. Or, head over to Net Tuts and do a search.

      Oh, remember that resource section at the end of the article? It’s there for a reason. It has a link to a post on Net Tuts about a contact form. That one has some beautiful PHP scripts for capturing and managing the form data. Here, I’ll make it easy for you: http://net.tutsplus.com/tutorials/html-css-techniques/build-a-neat-html5-powered-contact-form/

      As always, thanks for your helpful feedback :)

      • supprof1

        long life to you Adi paurdila
        you’re doing an amazing job
        thank you very mutch
        out there there in the internet there is a lot of premium an paying tutorial witch are not us good us yours
        but when we do something for free even if it is the bet tutorial. there will be people who will say that they are not good.
        thank you for this website and your efforts

      • Dougieladd

        Hi Adi,

        A good teacher assumes nothing (or very little) from thier students. The responsibility of learning rests on the teachers shoulders. If he doesn’t explain correctly, you don’t learn. In your case Adi you are doing everything correctly! I enjoy your material because it is in depth from beginning to end and there is very little assumed knowledge (apart from the obvious). Please don’t change your teaching method to please the nerds :)

        Remember people…Web Design tuts is for the creative stuff… the clue is in the words “Web Design”.

        Thanks again for a great tutorial.

        D

        • http://www.adipurdila.com AdiPurdila
          Author

          Thanks Dougie,

          I try not to assume too much, but I can’t do beginner tuts indefinitely. Most of the techniques I’m using are explained in more detail in some previous tuts of mine, so I’m “assuming” some people watched those as well :D

          Glad you found useful stuff in this tutorial :)

  • Ivan

    I partially agree with Dj’s comment, but I comprehend your final “distracted and lethargic part” (I loved this phrase!) may be due to lack of time (or a strict deliver time) that obliged you to rush the whole thing up :)

    I just wanted to thank you for what you’ve done with this tutorial. I really appreciated it and I learned a lot of new things which I really want to nail, like you do — congratulations!

    (oh, and since this is my first comment on the Tuts+ network, I wanted to congratulate with all the Envato/Tuts team — you’re doing an amazing work! Keep it up!)

  • http://blog.foxandxss.net/ Foxandxss

    I found Adi tutorials life saving. Im a developer but I want to learn web design too.

    I agree that they are kinda slow, sometimes you got stuck on thinking but meh, it’s normal.

    I learnt a lot of photoshop tricks and good suggestions too like “Dont worry if the psd is not exaaactly centered, you will do that on CSS”.

    Keep working that hard please, I was worried about using photoshop and making some web design but this rocks.

  • mxl

    Adi, would you consider doing a one page scrolling website? I’ve seen some slick ones where the navigation stays on top but the page slides underneath it…that’ll be cool.

    Cheers, keep up the good work.

    • http://www.adipurdila.com AdiPurdila
      Author

      Thanks mxl, sounds like a great idea for a tutorial :D

      • mxl

        Yaaaaaaaay, I haven’t really seen one online (tutorial) yet, this might be a first…looking forward to seeing this one day.

  • Marcel

    Hello Adi.

    Thanks for an outstanding tutorial. Very informative. I learned a whole heap of things to apply in future projects. As for the comments on your methodology – well if there are people who can do better than this, please would they step up to the plate and put their talents where there mouths are. It’s easy to criticize – much more difficult to build. You certainly get my vote of confidence mate!

    Cheers and thanks again!

    • http://www.adipurdila.com AdiPurdila
      Author

      Thanks Marcel :)

  • Ryan Melnikas

    Great Tut, loved it and learnt so much,

  • http://cincinnatibannersandsigns.com Cincinnati Signs Company

    Very informative. I learned a ton by going through this tut! awesome job

  • supprof1

    hi audi, i found here some tutorial how to create a wordpress and a joomla theme, why not a wordpress theme? !!!!
    thank you audi you’re doing gret

  • Pingback: Land-of-web » Weekly Fresh Web Design Freebies – Vol. 11 (10-5-2011)

  • André

    Hello Adi

    Your tutorial was great for me! Learned a buch of new things. Thank you very much!

    Here is my result:
    http://www.aqportfolio.com/exercicio1/

    • http://www.mironc.com Miron Catalin Gabriel

      André, it’s very easy to do things the same but is slightly more difficult when applying methods in other projects.
      I do not want to get critical, but what you did is the same as the work of Adi.

      A friendly advice that you should consider it is: Think outside the box!

      PS: A tutorial that can be followed very well. Thanks Adi Purdila

  • SoccerGuy3

    You mentioned something about IE compatibility in the video. These forms look like crud in IE, can you point me in the right direction to help with IE?

  • Pingback: Land-of-web » Ultimate Collection of FREE PSD Website Templates 2011

  • Pingback: Ultimate Collection of FREE PSD Website Templates 2011 « CSS Tips

  • Pingback: The Most Amazing PSD Website Templates for Free - [DAP] More | [DAP] More

  • Pingback: 120 FREE Ultimate Collection of PSD Website Templates | suresh yalla