Form Layout and Formatting

[nathj]

Hi,

I am working on new version of a site that requires an application form for membership, this is so that certain features of the site are only available to members. The site is aimed at Church Leaders and requires a lot of information from them. I have two questions relating to form layout and formatting.

1) How do you remove the border from a text area?
2) How do you format an input text field to display a date format of dd/mm/ccyy?

Being able to do this would improve the display of the form and the usability of the form.

Unfortunately all of the development is local and so I am not able to the show an example. Howver, the code of note at this point is:

HTML:

<form action="application.php" method="post">
    <div class="row">
        <h4 class="eventListItem">Personal Details </h4>
    </div>
 
    <div class="row">
        <span class="label">
            Forename(s):
        </span>
        <span class="formw">
            <input type="text" size="30" />
        </span>
    </div>
 
    <div class="row">
        <span class="label">
            Surname:
        </span>
        <span class="formw">
            <input type="text" size="30" />
        </span>
    </div>
 
    <div class="row">
        <span class="label">
            Date of Birth:
        </span>
        <span class="formw">
            <input type="text" size="30" />
        </span>
    </div>
 
    <div class="row">
        <span class="label">
            Note:
        </span>
        <span class="formw">
            <textarea cols="30" rows="8">
            </textarea>
        </span>    
    </div>
 
    <div class="row">
        <span class="label">
            Gifting:
        </span>
        <span class="formw">
            <textarea cols="30" rows="8"> 
            </textarea>
        </span>    
    </div>
 
    <div class="row">
        <span class="label">
            Specialist subject:
        </span>
        <span class="formw">
            <textarea cols="30" rows="8"> 
            </textarea>
        </span>    
    </div>
 
    <div class="row">
            <h4 class="eventListItem">Contact Details</h4>
    </div> 
 
</form>
 

CSS

/* Form Design */
 
div.row 
{
    clear: both;
    padding-top: 3px;
    padding-bottom: 5px;
}
 
div.row span.label 
{
    padding-left: 10px;
    padding-right: 0px;
    float: left;
    width: 100px;
    text-align: right;
}
 
div.row span.formw 
{
    float: right;
    width: 455px;
    text-align: left;
} 
 

Any help with this greatly appreciated.

Nathan

[nathj]

I sorted the textarea border with the following in CSS:

span.formw textarea
{
    border:0px;
}
 

I still haven't figured out the date thing though, so if anyone knows please let me know.

Cheers
Nathan

[drhowarddrfine]

Neither html nor css will format for you.

[gits]

hi ...

you may format the value that has to be shown in the textbox with javascript ... do you get the data from the users input or is it a readonly-field that is filled with data from the server?

kind regards ...

[nathj]

hi ...

you may format the value that has to be shown in the textbox with javascript ... do you get the data from the users input or is it a readonly-field that is filled with data from the server?

kind regards ...

Hi,

It would be both potentially. Though I have decided that we don't need that piece of information at this stage. However, I will at a later date be using a dates from the admin side of the system so if you have any tips or tricks they would be greatly appreciated.

nathj

ps sorry for the delay in replying

[gits]

hi ...

using javascript you may do the following for example:

// orig date-string
var date = '2006-11-01'; 
 
// we split it with an regEx
var splitted_date = date.match(/(\d{4})-(\d{2})-(\d{2})/); 
 
// now we combine the result to our needs
var new_date = splitted_date[3] + '.' + splitted_date[2] + '.' + splitted_date[1];
 
// create an alert to show new date-format: '01.11.2006'
alert(new_date);
 

kind regards ...

[nathj]

hi ...

using javascript you may do the following for example:

// orig date-string
var date = '2006-11-01'; 
 
// we split it with an regEx
var splitted_date = date.match(/(\d{4})-(\d{2})-(\d{2})/); 
 
// now we combine the result to our needs
var new_date = splitted_date[3] + '.' + splitted_date[2] + '.' + splitted_date[1];
 
// create an alert to show new date-format: '01.11.2006'
alert(new_date);
 

kind regards ...

Hi,

Thanks for the tip, that's a great way to reformat a date, I'm sure it will be very useful.

nathj

[gits]

... ;) it's a simple way ;) ... come back when you have more questions about that - may be an other format (either input our output) ... and note: you may reformat the date at the serverside already ... that's up to you ...

kind regards ...

[nathj]

... ;) it's a simple way ;) ... come back when you have more questions about that - may be an other format (either input our output) ... and note: you may reformat the date at the serverside already ... that's up to you ...

kind regards ...

One further question I have is that on my form I have 3 textareas and when control passes to them the cursor is not flush to the top left corner.

    <div class="row">
        <span class="label">
            Note:
        </span>
        <span class="formw">
            <textarea id="note" cols="44" rows="8" title="Extra details, hobbies, a personal biog">
            </textarea>
        </span>    
    </div>
 

div.row 
{
    clear                : both;
    padding-top            : 3px;
    padding-bottom        : 5px;
}
 
div.row span.label 
{
    padding-left        : 10px;
    padding-right        : 0px;
    float                : left;
    width                : 100px;
    text-align            : right;
}
div.row span.formw 
{
    float                : right;
    width                : 455px;
    text-align            : left;
} 
 
input, textarea, select
{
    font-family            : verdana, "trebuchet MS", helvetica,    sans-serif;
    padding                : 0px;
    font-size            : 10px;
    background-color    : #ffffff;
    border                : inset 1px #eff5f3;
}    
 

any ideas what could be causing this? The textare in question comes after three input type="text" fields, all wrapped nicely in a form.

[gits]

;) simply remove all the spaces between start & end-tag of your textarea ... then it will work as you expect:

[HTML]<textarea id="note" cols="44" rows="8" title="Extra details, hobbies, a personal biog"></textarea>[/HTML]
kind regards ...