Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 3 1 2 3 LastLast
Results 1 to 10 of 23

Thread: Custom forms

  1. #1
    Senior Member
    Join Date
    Mar 2011
    Location
    Nashville, TN
    Posts
    340
    Member #
    27244
    Liked
    26 times
    Ive always done default forms, meaning let the browsers use the default settings. I have passed color to them before. BUT i have a friend that wants a standard look and design no matter what browser. So i was wondering in key or interesting tid bits you guys may suggest on it.


  2.  

  3. #2
    Senior Member
    Join Date
    Mar 2011
    Location
    Nashville, TN
    Posts
    340
    Member #
    27244
    Liked
    26 times
    i also need to remember how to print a page where i can pass all the data to the printer and it will print it out in a document. Its been awile


  4. #3
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,485
    Member #
    425
    Liked
    2783 times
    If you want to print it out in a document, you can either use print-specific CSS or generate a file on the fly. I'd go print-specific CSS myself.

    As far as forms go, I have a default stylesheet that includes certain form default properties and then if I need to I can use the stylesheet I create for the customer from there.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  5. #4
    Senior Member Webzarus's Avatar
    Join Date
    May 2011
    Location
    South Carolina Coast
    Posts
    3,322
    Member #
    27709
    Liked
    770 times
    CSS is the way to go for both... CSS allow you to control colors, layout, fonts, etc... and all modern browsers will follow the CSS.

    CSS will allow you to also define your "print" layout... and I use a javascript onload window print to call the Print API when the requested page is loaded... so all the user has to do is select his printer... and if the user doesn't have javascript turned on for some reason... they will still be able to print it in the old fashion way... "press the print button"...

  6. #5
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    If all you're looking for is consistency, you can simply pull the default styles from one of the browsers' user agent stylesheet. You can get them here. Scroll all the way down for sheets from browsers other than IE. Just pull the styles for the one you like best, and add it to your own stylesheet, then add your changes after that.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  7. #6
    Senior Member
    Join Date
    Mar 2011
    Location
    Nashville, TN
    Posts
    340
    Member #
    27244
    Liked
    26 times
    my apologies, i wasnt clear... Im looking for specific styles for the actual button area. Ive seen it for CSS 3.0 but im looking to replace it with an image.


  8. #7
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Location
    Oklahoma City
    Posts
    3,141
    Member #
    27197
    Liked
    959 times
    Let's say you have an image 30px by 30px for the button. You can do this 2 ways:
    1. Use the button tag. Formats easier, but is buggy in submitting forms in IE.
    You would do this:
    HTML
    Code:
    <button type="submit"><img src="button.png" alt="" /></button>
    CSS
    Code:
    button{height:30px;width:30px;}
    2. Add the image as a background to the submit button and set the height/width. FF likes to push the bg image down and right, though.
    Like so:
    CSS
    Code:
    input.submit{
    background: url("button.png") no-repeat transparent;
    height:30px;
    width:30px;
    }
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

  9. #8
    Senior Member
    Join Date
    Mar 2011
    Location
    Nashville, TN
    Posts
    340
    Member #
    27244
    Liked
    26 times
    thanks for the post. HOWEVER im curious only on the radio and checkboxes. I am looking to be able to change the actual check box and radio button WITH an image is my overall objective.


  10. #9
    Unpaid WDF Intern TheGAME1264's Avatar
    Join Date
    Dec 2002
    Location
    Not from USA
    Posts
    14,485
    Member #
    425
    Liked
    2783 times
    I've done this once about 2 years ago, but I had to use Javascript to do it and it was a pain in the *** (then again, the entire project was). There really isn't a way to style the boxes as such with pure CSS that I know of.

    http://www.adamwebdesign.ca/past-web...ualifier.shtml

    After this BS, I will neither work with, nor will I ever buy, a GM car. Not now, not ever.
    If I've helped you out in any way, please pay it forward. My wife and I are walking for Autism Speaks. Please donate, and thanks.

    If someone helped you out, be sure to "Like" their post and/or help them in kind. The "Like" link is on the bottom right of each post, beside the "Share" link.

    My stuff (well, some of it): My bowling alley site | Canadian Postal Code Info (beta)

  11. #10
    Senior Member
    Join Date
    Mar 2011
    Location
    Nashville, TN
    Posts
    340
    Member #
    27244
    Liked
    26 times
    post how you did it son!!!



Page 1 of 3 1 2 3 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 06:00 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com