/    Sign up×
Community /Pin to ProfileBookmark

Two questions regarding text boxes on a form

Copy linkTweet thisAlerts:
Jul 15.2006

Two questions :

  • 1.

    I am creating a form, how can I right align the information in the
    text box (like for numbers) ??

    When the end-user begins to enter the information, it left aligned and when they tab it remains ‘left aligned’.

    • <td><input type=”text” name=”printsquantity02″ id=”printsquantity02″ onchange=”calc();” size=”10″/></td>

  • 2. I have some ‘read only’ fields on my form that wish to display, such as a total amount. How do I ‘grey’ them out as well as make it so they are not in the tab order ??

    • Example Code:

    <tr>
    <td><input type=”text” name=”printsimage01″ value=”” size=”40″ maxlength=”35″ /></td>
    <td width=10>&nbsp;</td>
    <td><select name=”printsname01″ onChange=”ShowPrice()” ></select></td>
    <td><input type=”text” name=”printsprice01″ id=”printsprice01″ readonly=”readonly” size=”10″/></td>
    <td><input type=”text” name=”printsquantity01″ id=”printsquantity01″ onkeyup=”fndisn(this)” onchange=”calc();” size=”10″/></td>
    <td><input type=”text” name=”printstotal01″ id=”printstotal01″ readonly=”readonly” size=”20″ /></td>
    </tr>

    I would like the printsprice01 and printstotal01 field ‘greyed’ out as well as not in the tab order

    Any assistance would be greatly appreciate !! ?

    ?

    to post a comment
    HTML

    14 Comments(s) ↴

    Copy linkTweet thisAlerts:
    @kelly23Jul 15.2006 — Hi,

  • 1. In your style sheet for that page put: input {text-align: right} (If you just want certain textboxes right-aligned, then create a class and specify the class name in the textboxes you want to be right-aligned.


  • 2. <input [b]disabled[/b] name="whatever" class="gray"> ("Disabled" should serve the same purpose as readonly, but will also prevent it from being navigated in the tab index. To have it grayed out, create a class called "gray". Example:


    • .gray {background-color: gray}

    hth

    kelly
    Copy linkTweet thisAlerts:
    @jerryr125authorJul 15.2006 — Kelly - thank you so much - big help...

    next question :

    Here is what is in my style sheet:

    div#PhotoOrderFormStyle form input { font-family: Georgia, Time New Roman, sans-serif;

    font-size: 12px;

    font-weight: bold;

    text-align: right;

    color: #000000;

    background-color:#FFFFFF;

    border-top: solid #E9CBE5;

    border-bottom: solid #E9CBE5;

    border-left: solid #E9CBE5;

    border-right: solid #E9CBE5;

    }



    Here is what is in the form:

    <tr>

    <td><input type="text" name="printsimage02" value="" size="50" maxlength="35" /></td>

    <td width=10>&nbsp;</td>

    <td><select name="printsname02" onChange="ShowPrice()" ></select></td>

    <td><input type="text" name="printsprice02" id="printsprice02" readonly="readonly" size="10" /></td>

    <td><input type="text" name="printsquantity02" id="printsquantity02" onkeyup="checknum(this)" onchange="calc();" size="10"/></td>

    <td><input type="text" name="printstotal02" id="printstotal02" readonly="readonly" size="20" /></td>

    </tr>

    How do I make the input for some text boxes by right aligned and

    others left ???

    That is - how do I define the classes ?? I tried everything !!

    The form is in a division called : PhotoOrderFormStyle

    so, basically, how do I define different styles of input boxes within the form division PhotoOrderFormStyle ???

    I am assuming you use classes, but I am not getting to go !

  • - thanks ! ? jerry
    • Copy linkTweet thisAlerts:
    @kelly23Jul 15.2006 — If you want the majority to be right-aligned then leave your style sheet as is and add this below what you posted for your input style:

    div#PhotoOrderFormStyle input.left {text-align: left}

    Then, add "class="left" to the input tags that you want to be left-aligned ... or reverse these instructions if you want the majority to be left-aligned and just a few right-aligned.

    kelly
    Copy linkTweet thisAlerts:
    @jerryr125authorJul 15.2006 — Ok nevermind that - I figured it out !

    But, How to I get the text NOT be grey now. Here is my style

    .inputdisplay { font-family: Georgia, Time New Roman, sans-serif;

    font-size: 12px;

    font-weight: bold;

    text-align: right;

    color: #993399;

    background-color:#E9CBE5;

    border-top: solid #E9CBE5;

    border-bottom: solid #E9CBE5;

    border-left: solid #E9CBE5;

    border-right: solid #E9CBE5;

    }

    Here is the input line for the disenabled field:

    <td><input disabled class="inputdisplay" type="text" name="printstotal01" id="printstotal01" readonly="readonly" size="20" /></td>
    Copy linkTweet thisAlerts:
    @jerryr125authorJul 15.2006 — The text changes to non-grey in Firefox but not IE....

    Almost there...
    Copy linkTweet thisAlerts:
    @kelly23Jul 15.2006 — I'm not sure what you mean. What [i]don't[/i] you want to be gray?

    By the way, you only need to specify the things that are different from the default when you create a class. The default font and sizes, etc. are inherited so you just change the alignment or background color or whatever is different than what you specified for the default input fields in that div.
    Copy linkTweet thisAlerts:
    @jerryr125authorJul 15.2006 — Sorry about that - Kelly - you have been an awesome help - thank you so much ?

    Ok, the final step

    and thanks to your advise and information...

    I wish for the font not be grey...

    (Firefox is ok, but not IE - strange)

    It should be like a purple color...



    .inputdisplay { font-family: Georgia, Time New Roman, sans-serif;

    font-size: 12px;

    font-weight: bold;

    text-align: right;

    color: #993399;

    background-color:#E9CBE5;

    border-top: solid #E9CBE5;

    border-bottom: solid #E9CBE5;

    border-left: solid #E9CBE5;

    border-right: solid #E9CBE5;

    }


    <td><input disabled class="inputdisplay" type="text" name="printstotal01" id="printstotal01" readonly="readonly" size="20" /></td>
    Copy linkTweet thisAlerts:
    @kelly23Jul 15.2006 — Do you have div#PhotoOrderFormStyle in front of your new class name?

    div#PhotoOrderFormStyle input.inputdisplay

    Assuming you only want to change background color, font color and alignment it should look like:

    div#PhotoOrderFormStyle input.inputdisplay {background-color: #E9CBE5; color: #993399;

    text-align: right}
    Copy linkTweet thisAlerts:
    @jerryr125authorJul 15.2006 — Thanks kelly - I put that in front of the div info in front and here is what I have:

    div#PhotoOrderFormStyle input.inputdisplay { font-family: Georgia, Time New Roman, sans-serif;

    font-size: 12px;

    font-weight: bold;

    text-align: right;

    color: #000000;

    background-color:#E9CBE5;

    border-top: solid #E9CBE5;

    border-bottom: solid #E9CBE5;

    border-left: solid #E9CBE5;

    border-right: solid #E9CBE5;

    }


    Here is the code:

    <tr>

    <td><input class="inputleft" type="text" name="printsimage01" value="" size="50" maxlength="35" /></td>

    <td width=10>&nbsp;</td>

    <td><select name="printsname01" onChange="ShowPrice()" ></select></td>

    <td><input disabled class="inputdisplay" type="text" name="printsprice01" id="printsprice01" size="10"/></td>

    <td><input class="inputright" type="text" name="printsquantity01" id="printsquantity01" onkeyup="checknum(this)" onchange="calc();" size="10"/></td>

    <td><input disabled class="inputdisplay" type="text" name="printstotal01" id="printstotal01" readonly="readonly" size="20" /></td>

    </tr>

    Results:

    In Firefox, works like a charm ?

    In IE , the disenabled text is still grey for the price and total...

    Is there a trick for IE ??? Almost there ?


    Thanks again - you have been a big help ! ? jerry
    Copy linkTweet thisAlerts:
    @jerryr125authorJul 15.2006 — Question - if I make the input box readonly, is there a command to turn off the tab order - I think I have to use readonly because I need to send the value on the form in the cgi script...

    thanks again Kelly ! ? jerry
    Copy linkTweet thisAlerts:
    @jerryr125authorJul 15.2006 — Yea- If there is a way to turn off the tabbing to a read only field, I am good to go - the style works like a charm ! ?

    - jerry
    Copy linkTweet thisAlerts:
    @kelly23Jul 15.2006 — Setting it to a negative number seems to work.

    <input tabindex="-100" ...
    Copy linkTweet thisAlerts:
    @jerryr125authorJul 15.2006 — works ? perfect - thank you ! - jerry
    Copy linkTweet thisAlerts:
    @kelly23Jul 15.2006 — You're welcome!

    kelly
    ×

    Success!

    Help @jerryr125 spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.18,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...