Results 1 to 4 of 4

Thread: customising individual form fields

  1. #1
    Join Date
    Aug 2009
    Location
    London
    Posts
    93
    Thanks
    26
    Thanked 0 Times in 0 Posts

    Default customising individual form fields

    Hi,

    Using the html and style below, for forms I have created, please can someone show how I can customise it to do the following:

    1) extend just the "message" input box so that the height is (say) 3 times more than the other input boxes?

    2) make it compulsory to complete name and email in the form and include a small graphic to indicate this.

    Thanks in anticipation of your response.

    HTML Code:
    <form method="post" action="fieldset.html">
    <fieldset>
    <legend> Press &amp; Media Enquiries</legend>
    
    <div>
    <label for="fullname">Name:</label>
    <input type="text" name="fullname" id="fullname" class="txt" />
    </div>
    
    <div>
    <label for="fullname">Publication:</label>
    <input type="text" name="Publication" id="Publication" class="txt" />
    </div>
    
    <div>
    <label for="email">Email address:</label>
    <input type="text" name="email" id="email" class="txt" />
    </div>
    
    <div>
    <label for="telephone">Telephone:</label>
    <input type="text" name="telephone" id="telephone" class="txt" />
    </div>
    
    <div>
    <label for="message">Message:</label>
    <input type="text" name="message" id="message" class="txt" />
    </div>
    </fieldset>
    
    <div>
    <input type="submit" name="btnSubmit" id="btnSubmit" value="Submit" class="btn" />
    </div>
    </form>
    Code:
    h1 { font: Verdana, Arial, Helvetica, sans-serif; }
    
    input.txt { 
    color:#00008B;
    background-color:#E3F2F7;
    border:1px inset #00008B;
    width:200px;
    }
    
    input.btn {
    color:#00008B;
    background-color:#ADD8E6;
    border:1px inset #00008B;
    }
    
    form div {
    clear:left;
    margin:0;
    padding:0;
    padding-top:5;
    }
    
    form div label {
    float:left;
    width:40%;
    font: bold 0.9em Verdana, Arial, Helvetica, sans-serif; 
    }
    
    fieldset {
    border: 1px dotted #61B5CF;
    margin-top:1.4em;
    padding:1em;
    }
    
    legend {
    font: bold 0.8em Verdana, Arial, Helvetica, sans-serif; 
    color: #999999;
    background-color:#FFFFFF;
    }
    Last edited by djr33; 03-03-2010 at 02:49 AM. Reason: Don't post "fancy" titles to draw attentions to your posts.

  2. #2
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    For the message, just add this:
    Code:
    style="500px"
    To the message input, as for the auto-form-checking, you'd need to search around google using keywords like "javascript auto form checking"
    Jeremy | jfein.net

  3. #3
    Join Date
    Aug 2009
    Location
    London
    Posts
    93
    Thanks
    26
    Thanked 0 Times in 0 Posts

    Default

    Thanks for your reply, excuse my ignorance but where exactly do I put the style="500px" ?

  4. #4
    Join Date
    Jan 2008
    Posts
    4,168
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Code:
    <label for="message">Message:</label>
    <input type="text" name="message" id="message" class="txt" style="width:500px"/>
    </div>
    Jeremy | jfein.net

  5. The Following User Says Thank You to Nile For This Useful Post:

    jhatter (03-03-2010)

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
  •