SitePoint Sponsor

User Tag List

Results 1 to 14 of 14

Hybrid View

  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2003
    Location
    Romania
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    A nice contact form

    Hello.
    Please go to http://www.seoed.com/contact .

    I want to make that form as nice as possible. Now the input texts are below. How can I make them in the same line with the text?

    Like:

    Name: input
    Company: input

    I hope I was clear enough.

    Thank you.
    An error is a human mistake with honest intention.

  2. #2
    SitePoint Enthusiast
    Join Date
    May 2004
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Right now you have line breaks in your code betwen the text for the input and the input box itself. By deleting those <br /> tags, you will get the two elements in one line.
    So in stead of using this code:

    Code:
                            First Name:
    			<br />
    			<input type="text" name="first_name" />
    			<br/>
    			
    			Last Name:
    			<br />
    			<input type="text" name="last_name" />
    			<br/>
    			
    			Company:
    			<br />
    			<input type="text" name="company" />
    			<br/>
    			
    			E-mail:
    			<br />
    			<input type="text" name="e_mail" />
    			<br/>
    			
    			Your Web Site URL:
    			<br />
    			<input type="text" name="web_site" value="Type in your Web Site Address Here" />
    			<br />
    I would go for this code:

    Code:
                            First Name:
    			<input type="text" name="first_name" />
    			<br/>
    			
    			Last Name:
    			<input type="text" name="last_name" />
    			<br/>
    			
    			Company:
    			<input type="text" name="company" />
    			<br/>
    			
    			E-mail:
    			<input type="text" name="e_mail" />
    			<br/>
    			
    			Your Web Site URL:
    			<input type="text" name="web_site" value="Type in your Web Site Address Here" />
    			<br />
    It might be necessary to insert some spaces between the the text and the input boxes though.

  3. #3
    SitePoint Enthusiast
    Join Date
    Aug 2003
    Location
    Romania
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    heh. I know that. But i want it to look like this:
    Code:
    Name:       input
    Company:    input
    Website:    input
    Competitor: input
    Not like:
    Code:
    Name: input
    Company: input
    Website: input
    Competitor: input
    See what I mean? MY fault i wasn't clear from the begining.
    An error is a human mistake with honest intention.

  4. #4
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Code:
    First Name:<br><input type="text" name="first_name"><br>
    Simply remove the <br> tag from after the text labels

    Hope this helps

    later
    Johnny

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2004
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Then use two different <div>'s, each of the same size aligned next to each other. The one would hold the descriptions and the other one would hold the forms.

  6. #6
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hello

    I do believe even the most strict standards people will allow for the use of a table for the display of a mail form.

    I think.

    Later
    Johnny

  7. #7
    SitePoint Enthusiast
    Join Date
    May 2004
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Johnny Gulag
    Hello

    I do believe even the most strict standards people will allow for the use of a table for the display of a mail form.

    I think.

    Later
    Johnny
    I would actually be inclined to think they don't. Tables are for the display of tabular data, at that's it, as far as I got these standards.

  8. #8
    SitePoint Enthusiast
    Join Date
    Aug 2003
    Location
    Romania
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It takes a little more work when you this for the first time. But now that i know how to do it....

    It's faster without tables.
    An error is a human mistake with honest intention.

  9. #9
    SitePoint Enthusiast
    Join Date
    Aug 2003
    Location
    Romania
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    heh. Found a way. But it doesn't work in Opera.
    http://www.seoed.com/contact

    The CSS file: http://www.seoed.com/styles/content.css

    look at the bottom of the file.


    Fixed it!!! It works in IE, Firefox and Opera.

    I'm so happy.
    An error is a human mistake with honest intention.

  10. #10
    Is Still Alive silver trophybronze trophy RetroNetro's Avatar
    Join Date
    Jul 2003
    Location
    Texas
    Posts
    6,883
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hello

    Glad you got it straightened out.

    Later
    Johnny

  11. #11
    Put your best practices away. The New Guy's Avatar
    Join Date
    Sep 2002
    Location
    Canada
    Posts
    2,087
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Your still using <br /> for spacing. Try using CSS, for example:

    input{
    margin-bottom: 5px;
    }
    "A nerd who gets contacts
    and a trendy hair cut is still a nerd"

    - Stephen Colbert on Apple Users

  12. #12
    SitePoint Enthusiast
    Join Date
    Aug 2003
    Location
    Romania
    Posts
    26
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Right.

    The New Guy, Thank you.

    Best contact form ever.
    An error is a human mistake with honest intention.

  13. #13
    SitePoint Zealot
    Join Date
    May 2004
    Location
    Malaysia
    Posts
    181
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would say yes to it tabular data. I'm coding in XHTML Strict too but sometimes I go with TABLE for this.

    Anyway, using LABEL is much better alternative.

  14. #14
    SitePoint Evangelist N9ne's Avatar
    Join Date
    Aug 2002
    Location
    UK
    Posts
    596
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The best way to do forms is with the <label> elements and using floats, it gives you more customizability .


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •