Web Analytics Made Easy -
StatCounter A form made from CSS (no tables) - CodingForum

Announcement

Collapse
No announcement yet.

A form made from CSS (no tables)

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • A form made from CSS (no tables)

    How do you make a form from using CSS instead of tables? It will need to include a Submit button, textbox and radio buttons.

    Any responce will be appreciated.
    Get Mozilla Firefox

  • #2
    Tables are used for forms so that they look neat and tidy. You don't really need to use tables for forms. Do you mean using CSS to have the same effect?
    I lost my signature, have you seen it?
    I have the power to erase you...

    Comment


    • #3
      you can easily style the elements (textbox, textarea, input, submit etc) using css. Create a form without the table then play with the styling.
      -Jamie

      Comment


      • #4
        Do you mean using CSS to have the same effect?
        Yes, the CSS will replace the tables and can you give me the code for it using CSS,

        Thanks
        Get Mozilla Firefox

        Comment


        • #5
          I tend to like forms that look like this, I currently have one on my site.
          Code:
          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
          "http://www.w3.org/TR/html4/loose.dtd">
          <html>
          <head>
          <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
          <title>Tableless CSS Form</title>
          <style type="text/css">
          body {
          margin:0;
          padding:0;
          font-size:12px;
          font-family:Tahoma, Arial, Helvetica, sans-serif;
          line-height:14px;
          }
          form {
          margin:0;
          padding:0;
          }
          fieldset {
          width:400px;
          margin:10px auto;
          padding:20px;
          border:4px double #000099;
          }
          legend {
          margin-bottom:10px;
          font-size:13px;
          }
          label {
          width:70px;
          float:left;
          margin:3px 0;
          clear:left;
          }
          input, textarea {
          margin:3px 0;
          font-size:12px;
          font-family:Tahoma, Arial, Helvetica, sans-serif;
          width:320px;
          }
          .radio {
          width:15px;
          height:15px;
          margin:0;
          padding:0;
          }
          #buttons {
          text-align:right;
          }
          #buttons input {
          width:85px;
          text-align:center;
          }
          </style>
          </head>
          
          <body>
          <form action="#" method="post">
          <fieldset><legend>Contact Form</legend>
          <label for="name">Name:</label><input type="text" size="25" name="name" id="name"><br>
          <label for="email">Email:</label><input type="text" size="25" name="email" id="email"><br>
          <label for="choice">Choice:</label>1<input type="radio" name="choice" id="choice" value="1" class="radio">
          								   2<input type="radio" name="choice" value="2" class="radio">
          								   3<input type="radio" name="choice" value="3" class="radio"><br>
          <label for="message">Message:</label><textarea name="message" id="message" cols="20" rows="7"></textarea><br>
          <div id="buttons"><input type="submit" name="submit" id="submit" value="Submit"></div>
          </fieldset>
          </form>
          </body>
          </html>
          ||||If you are getting paid to do a job, don't ask for help on it!||||

          Comment


          • #6
            Thats really good, Thanks.
            Get Mozilla Firefox

            Comment


            • #7
              http://www.cssdrive.com/index.php/ex...bleless_forms/

              The HTML there might not properly validate so you'll have to fix it yourself

              Comment


              • #8
                That's really good aswell

                Thanks for all of your help
                Get Mozilla Firefox

                Comment

                Working...
                X