SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Location
    Porto,Portugal
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Form layout help

    Hi.
    I need to design a form like this


    Label (*) | Error Message
    Form Element
    -------------------------------

    I am having troubles setting the required label and the error message to the right of the label.

    Any tips?

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,789
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Hi,

    There are many ways you could do this and it all depends on the situation.

    Here is the most basic.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    .off {
        display:none
    }
    .on {
        display:inline
    }
    .address input {
        display:block;
        margin:3px 0 10px
    }
    br {
        clear:both;
        width:100&#37;;
        margin:0
    }
    .address span {
        color:red;
        font-weight:bold
    }
    </style>
    </head>
    <body>
    <form id="form1" method="post" action="">
        <fieldset class="address">
        <legend>Address</legend>
        <label for="Name">Enter Name | </label>
        <span class="error off">You must enter your Name</span>
        <input type="text" name="Name" id="Name" />
        <br />
        <label for="addr1">Enter Address Line1 | </label>
        <span class="error on">Adress Line 1 required</span>
        <input type="text" name="addr1" id="addr1" />
        <br />
        </fieldset>
    </form>
    </body>
    </html>
    Ideally the error messages should only be added to the mark up dynamically when necessary.


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
  •