6 Replies Latest reply on Jul 18, 2010 10:51 AM by k..3

    Having trouble styling forms using CSS

    k..3

      Hi,

       

      This is my first time creating a form and I'm having some trouble with a few of things. Please could someone help ?

       

      1. How do I get the entire form to align to the centre of the page?

      2. As you can see below there are bullet points on each line, how do I get rid of these?

      3. When someone clicks the 'submit' button I want the information to be sent to an email address, how do I do this?

       

      The HTML for my form is:

            EMAIL US WITH YOUR ENQUIRIES AND FEEDBACK       
      •                       
      •    
      •                
      •    
      •              
      •    
      •          
      •    
            EMAIL US WITH YOUR ENQUIRIES AND FEEDBACK       
      •                        
      •    
      •                
      •    
      •              
      •    
      •          
      •    


      The CSS styling that I have put in place on a linked stylesheet is:

       

      @charset "utf-8"; /* CSS Document */ fieldset.fieldset{ border: 2px solid #B6B6B6; width: 600px; margin: 10px; line-height:2; } input.submit { background-color:#FFF; color:#093; border: outset #093 1px; font-weight: bold; width: 120px; } input.textbox{ background-color:#FFFFB9; font-size:16px; } textarea.comment{ font-size:16px } label.all{ font-size:18px; vertical-align:top; } legend{ font-size:20px; }

       

      My form looks like this:

      form_issue!.gif

      Thanks

       

      Kyra

        • 1. Re: Having trouble styling forms using CSS
          k..3 Level 1

          * sorry didn't realise that would happen, the actual code is;

           

              <fieldset class="fieldset">
                <legend>EMAIL US WITH YOUR ENQUIRIES AND FEEDBACK</legend>
                 <li >
                   <label class="all" for="name">Name:</label>
                   <input class="textbox" name="Name" type="text" id="name" size="50" maxlength="50" />
                </li>
              <li>
                <label class="all" for="email">Email: </label>
                <input class="textbox" name="Email" id="email" size="50" />
              </li>
              <li>
                <label class="all" for="comment">Commen
                  <textarea class="comment" name="comment" cols="45" rows="5"></textarea>
                  t:</label>
              </li>
              <li>
                <input class="submit" name="Submit" type="Submit"  value="Submit" />
              </li>
              </fieldset>

          • 2. Re: Having trouble styling forms using CSS
            Ben M Adobe Community Professional

            1.  Place a <div> </div> around your form. Then apply a class to it with the following attributes:

             

            width: ###px; /*Replace ### with the width in pixels or you can also do ###% for percentage*/

            margin: 0 auto;

             

            That will center any element, anytime.

             

            2.  You are using the <li> tag around your elements.  This is a list element and lists have bullets.  You can set:

             

            list-style-type: none;

             

            That will remove the bullet from your list.

             

            3.  You need to use server side scripting for this.  There are plenty out there in different languages.  If you would like a recommendation please post what server-side language you can use on your system ( ie: php, asp, etc.).

            1 person found this helpful
            • 3. Re: Having trouble styling forms using CSS
              MurraySummers Level 8

              That will center any element, anytime.

               

              No, it won't.  It will center any BLOCK element anytime.  But only within its container.

               

              And actually, you don't have to use a wrapping div at all.  You can apply that style directly to the <form> tag.

               

              Message was edited by: Murray *ACP*

              1 person found this helpful
              • 4. Re: Having trouble styling forms using CSS
                k..3 Level 1

                Thank you for the help regarding the top two issues.

                 

                As for the third, I don't know what server side scripting is, but I do know that I can use php on my system, I'm not sure what else but I'm using dreaweaver CS5.

                 

                Is it a complicated process or something that can be explained?

                I would really appreciate it if you could explain to me how to do this as I am new to dreamweaver and so i'm learning as I go!

                 

                Thank you again for your help already.

                 

                Kyra

                • 5. Re: Having trouble styling forms using CSS
                  quicpic2

                  Kate,

                  I recently faced the form/email how-to issue, and someone on this forum suggested I go to http://bebosoft.com  and look at a program called Forms to Go. I did and I now use it, it's great and not too difficult to use. It will meet your needs now and then some.

                   

                  Good luck,

                  Doug H.

                  • 6. Re: Having trouble styling forms using CSS
                    k..3 Level 1

                    Thank you Doug, I'll have a look at that!

                    Kyra