Data Entry Issues

Discussion in 'HTML' started by Gene Wirchenko, Dec 27, 2011.

  1. Dear HTMLers:

    1) How does one limit the amount of input that can go into a text
    value?

    I will be writing an application in which many of the values are
    fixed-length. I would prefer to not even have too long input
    possible. (Yes, I will check it at the DBMS level, but why allow it
    in the first place?) I also want the input field to be appropriately
    sized so that it is obvious how many characters can be entered. For
    example:
    Client Code: ___
    Client Name: ________________________________________

    If it is necessary to restrict the entry fields to using a
    fixed-widgth font, that is quite acceptable.

    2) How can I right-align input?

    For currency amounts, it makes much more sense for it to appear
    as in
    Disbursement Minimum: 100.00
    ---------- (showing field length)
    than
    Disbursement Minimum: 100.00
    ----------

    3) In CSS, what is the difference between width and max-width?

    Sincerely,

    Gene Wirchenko
    Gene Wirchenko, Dec 27, 2011
    #1
    1. Advertising

  2. On Tue, 27 Dec 2011 14:16:20 -0800, Gene Wirchenko wrote:

    > Dear HTMLers:
    >
    > 1) How does one limit the amount of input that can go into a text
    > value?


    check out the attributes for <input type="text">, I believe you can
    define size (in characters of the input field) and maxlength of the
    selected input in characters. I think size is based on the em width of
    the font used in the input field, so size="<number>" tends to be bigger
    than actually needed for <number> characters.

    > 2) How can I right-align input?


    I don't know if you can, but style="text-align:right" might work even if
    align="right" doesn't.

    Rgds

    Denis McMahon
    Denis McMahon, Dec 27, 2011
    #2
    1. Advertising

  3. On Tue, 27 Dec 2011 22:38:35 +0000, Denis McMahon wrote:

    > On Tue, 27 Dec 2011 14:16:20 -0800, Gene Wirchenko wrote:
    >
    >> Dear HTMLers:
    >>
    >> 1) How does one limit the amount of input that can go into a text
    >> value?

    >
    > check out the attributes for <input type="text">, I believe you can
    > define size (in characters of the input field) and maxlength of the
    > selected input in characters. I think size is based on the em width of
    > the font used in the input field, so size="<number>" tends to be bigger
    > than actually needed for <number> characters.
    >
    >> 2) How can I right-align input?

    >
    > I don't know if you can, but style="text-align:right" might work even if
    > align="right" doesn't.


    Setting the style seems to work in firefox at least:

    http://www.sined.co.uk/tmp/text_field.htm

    Rgds

    Denis McMahon
    Denis McMahon, Dec 27, 2011
    #3
  4. On 27 Dec 2011 22:42:08 GMT, Denis McMahon <>
    wrote:

    [snip]

    >Setting the style seems to work in firefox at least:
    >
    >http://www.sined.co.uk/tmp/text_field.htm


    Thank you. I am not quite up to the point of where I think of
    all of these things or can fit them together. Web programming is
    weird.

    Sincerely,

    Gene Wirchenko
    Gene Wirchenko, Dec 27, 2011
    #4
  5. Gene Wirchenko

    dorayme Guest

    In article <>,
    Gene Wirchenko <> wrote:

    > 3) In CSS, what is the difference between width and max-width?


    A width specifies the horizontal length of the content area of an
    element no matter what the *natural* width is and no matter what
    the width of the containing element or viewport. A DIV, for
    example, without borders or padding or margins will normally or
    *naturally* be as wide as the content area of its containing
    element. However, like rednecks everywhere who would hate the
    natural green of leaves and would happily paint them blue,
    putting a width on it stops all this naturalness.

    Try

    <body style="margin: 0">
    <div style="width: 600px; color: black; background: yellow;">Lots
    of content. Lots of content. Lots of content. Lots of content.
    Lots of content. Lots of content. Lots of content. Lots of
    content. Lots of content. Lots of content. Lots of content. Lots
    of content. Lots of content. Lots of content. Lots of content.
    Lots of content.</div>
    </body>

    Normally, without a width, the yellow would go from left to right
    of the viewport. But this sets it at 600px;

    Now try

    <div style="width: 600px; background: yellow;">Little
    content.</div>

    to see how it is no more and no less than 600px. Normally it
    would be wider if the viewport is wide on a desktop.

    Now, still on width, try a size-to-fit context like an inline img
    element containing a picture or a DIV that is floated or inside a
    table cell whose dimensions are not constrained by the author but
    left to the browser to size.

    <body style="margin: 0">
    <div style="float: left; width: 600px; ">Little content</div>
    </body>

    Normally, the width, because of the float, would be only as wide
    as the words need, but here the yellow is 600px wide. It is fixed
    by the specified width. See what happens when either of the two
    above examples are in a browser that is less than 600px wide.
    Scrollbars.

    A max-width, on the other hand, specifies how wide *at the most*
    an element can be. Note, if a DIV, for example, is floated or is
    inside a table cell or under some other 'size-to-fit' context, it
    will be unable to be wider than 600px. If its content is small,
    if it is in a size-to-fit context, it will size itself to suit
    its context if it is under the maximum width specified. But if
    its content is large, it will be *limited* to the specified
    max-width, it will be unable to spread its wings or make like an
    Israeli settler. If the Israeli government could put a severe
    max-width on its own elements, the whole world would rejoice.

    See

    <body style="margin: 0">
    <div style="max-width: 600px; background: yellow;">Lots of
    content. Lots of content. Lots of content. Lots of content. Lots
    of content. Lots of content. Lots of content. Lots of content.
    Lots of content. Lots of content. Lots of content. Lots of
    content. Lots of content. Lots of content. Lots of content. Lots
    of content.</div>
    </body>

    and

    <body style="margin: 0">
    <div style="max-width: 600px; float-left; background:
    yellow;">Little content</div>
    </body>

    Neither will be more than 600px, no matter how wide the viewport
    and BODY is. But under the 600px limit, it will behave as if
    there is no width specified.

    --
    dorayme
    dorayme, Dec 28, 2011
    #5
  6. Gene Wirchenko

    Neil Gould Guest

    Hi Gene,

    Gene Wirchenko wrote:
    > Dear HTMLers:
    >
    > 1) How does one limit the amount of input that can go into a text
    > value?
    >
    > I will be writing an application in which many of the values are
    > fixed-length. I would prefer to not even have too long input
    > possible. (Yes, I will check it at the DBMS level, but why allow it
    > in the first place?) I also want the input field to be appropriately
    > sized so that it is obvious how many characters can be entered. For
    > example:
    > Client Code: ___
    > Client Name: ________________________________________
    >
    > If it is necessary to restrict the entry fields to using a
    > fixed-widgth font, that is quite acceptable.
    >

    There is no way to force a specific font on a client since it is under the
    control of their browser and system. Additionally, the size of the font on
    the client browser is scalable at will by the users, so, such things as
    using em widths to set the size of the entry form will fail quite often.

    Also consider that some users may not use a browser, but an audible reader.
    So, I wouldn't recommend an approach that tries to constrain the number of
    characters from your application.

    Some sites use a loop to count keystrokes and inform the user as they type
    how many characters remain. However, this approach is subject to users
    having the scripting code enabled on their browsers. If scripting is
    disabled, they will get no warning about exceeding the maximum number of
    characters with this arrangement.

    In short, the only reliable thing will be to parse the data, as you've
    planned. When the number of characters are an issue, I include that
    information in the instructions for filling out the form, and have not
    really run into any issues with that approach.

    --
    best regards,

    Neil
    Neil Gould, Dec 28, 2011
    #6
  7. Gene Wirchenko <> wrote

    > Dear HTMLers:
    >
    > 1) How does one limit the amount of input that can go into a text
    > value?


    Use the maxlength attribute to limit the amount of text. Use the size
    attribute to limit the size of the field itself.

    >
    > I will be writing an application in which many of the values are
    > fixed-length. I would prefer to not even have too long input
    > possible. (Yes, I will check it at the DBMS level, but why allow it
    > in the first place?) I also want the input field to be appropriately
    > sized so that it is obvious how many characters can be entered. For
    > example:
    > Client Code: ___
    > Client Name: ________________________________________


    <label for="clientcode">Client Code: </label> <input type="text"
    id="clientcode" name="clientcode" size="4" maxlength="3"> (3 characters)
    <br>
    <label for="clientname">Client Name: </label> <input type="text"
    id="clientname" name="clientname" size="40" maxlength="35"> (35
    characters)

    >
    > If it is necessary to restrict the entry fields to using a
    > fixed-widgth font, that is quite acceptable.


    You could use CSS for that:

    body {what ever font;}
    input {font-family: monospace;}

    >
    > 2) How can I right-align input?
    >
    > For currency amounts, it makes much more sense for it to appear
    > as in
    > Disbursement Minimum: 100.00
    > ---------- (showing field length)
    > than
    > Disbursement Minimum: 100.00
    > ----------


    It might make more sense when you're looking at it on a spreadsheet, but,
    it might confuse the user if the text is being input on the left, and
    suddenly jumps to the right (and bring your knees in ti-i-ight).

    >
    > 3) In CSS, what is the difference between width and max-width?


    Width says you should be x width, max-width says you may be any width
    that is no wider than x.


    --
    Adrienne Boswell
    Arbpen Web Site Design Services - http://www.cavalcade-of-coding.info/
    The Good Plate - Fresh Gourmet Recipes - http://the-good-plate.com/
    Please respond to the group so others can share
    Adrienne Boswell, Dec 28, 2011
    #7
  8. 2011-12-28 0:16, Gene Wirchenko wrote:

    > I will be writing an application in which many of the values are
    > fixed-length. I would prefer to not even have too long input
    > possible. (Yes, I will check it at the DBMS level, but why allow it
    > in the first place?) I also want the input field to be appropriately
    > sized so that it is obvious how many characters can be entered.


    Good idea. Use the size and maxlength attribute and a CSS rule with a ch
    unit, e.g. (assuming, for definiteness, that the input should consist of
    exactly 5 digits):

    <input name=code id=code size=5 maxlength=5 pattern=[0-9]{5} required
    style="width: 5ch">

    The size attribute is supposed to specify the width in "average
    characters", but browsers generally make the field much wider. Setting
    the font to monospace tends to fix this, but a more elegant way is to
    set the width additionally in CSS, using the ch unit, which is defined
    to equal the width of the character '0' (which is usually the same as
    the width as other digits, except '1' in a few fonts). The ch unit is
    recognized by many modern browsers, but not all - others would fall back
    to doing just what they do with the size attribute.

    The pattern attribute, already supported by some modern browsers, can be
    used to specify a regular expression for the accepted content. It works
    client-side, so it does not prevent people from sending garbage if they
    want to, but it's becoming more and more useful. Note that {5} means
    exactly 5 repetitions; if you wish to allow codes that have 1 to 5
    digits, use pattern=[0-9]{1,5}.

    > 2) How can I right-align input?


    Use CSS: text-align: right. But...

    > For currency amounts, it makes much more sense for it to appear
    > as in
    > Disbursement Minimum: 100.00
    > ---------- (showing field length)
    > than
    > Disbursement Minimum: 100.00
    > ----------


    I don't think so. For usability, and to avoid input errors, the label
    and the value should be close to each other. This is best achieved by
    putting them in a table, with the first column aligned right, the second
    one left, with left alignment inside a text box, too (the default).

    Disbursement minimum: $100.00
    --------------

    is better for usability than

    Disbursement minimum: $100.00
    --------------

    But if there are several numerical fields that are in some sense
    similar, such as a set monetary amounts to be summed up (perhaps even
    with simple spreadsheet-like behavior where JavaScript is used to
    maintain a total in one cell, then right-alignment is OK. Well, except
    that 100.00 and 200 would then both be aligned to the right, defeating
    much of the idea. (There's no working way to align on a decimal
    separator using HTML and CSS. Using JavaScript, you could detect
    integers and append ".00" or ",00" to them.)

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Jukka K. Korpela, Dec 28, 2011
    #8
  9. Gene Wirchenko

    dorayme Guest

    In article <jdevs5$jsp$>,
    "Jukka K. Korpela" <> wrote:

    > (There's no working way to align on a decimal
    > separator using HTML and CSS.


    We had a thread on this years ago. But I cannot recall if it was
    in this this usenet group or ciwas or ciwa. I remember arguing
    that the decimal separator could occupy a cell of its own (that
    column would shrink to fit - the point should vertically align in
    the column - in a table and something like right-align for the
    before in the cell to the left and left-align for the cell to the
    right. But I forget all the details.

    --
    dorayme
    dorayme, Dec 28, 2011
    #9
  10. 2011-12-28 14:13, dorayme wrote:

    > In article<jdevs5$jsp$>,
    > "Jukka K. Korpela"<> wrote:
    >
    >> (There's no working way to align on a decimal
    >> separator using HTML and CSS.

    >
    > We had a thread on this years ago. But I cannot recall if it was
    > in this this usenet group or ciwas or ciwa. I remember arguing
    > that the decimal separator could occupy a cell of its own


    I remember that too but wouldn't count it as a solution - rather, a
    workaround developed just because there is no solution. Other
    workarounds include appending .00 or ,00 or whatever the zero decimal
    part is in each culture, possibly making the added characters invisible
    (but space-consuming).

    Such workarounds don't apply to <input> elements, as you cannot use any
    markup there. Forcing users to enter the integral part and the decimal
    part separately, as in
    <input name=int>.<input name=frac size=2>
    is hardly acceptable.

    --
    Yucca, http://www.cs.tut.fi/~jkorpela/
    Jukka K. Korpela, Dec 28, 2011
    #10
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. vallinayagam

    Automate Data Entry in Web pages

    vallinayagam, Jun 21, 2004, in forum: Perl
    Replies:
    2
    Views:
    539
  2. bienwell
    Replies:
    0
    Views:
    3,394
    bienwell
    Nov 17, 2005
  3. AtomicBob
    Replies:
    14
    Views:
    870
    Toby Inkster
    May 2, 2006
  4. Mike Owen

    Allowing entry of a Carriage Return during data entry

    Mike Owen, Jul 27, 2006, in forum: ASP .Net Web Controls
    Replies:
    3
    Views:
    693
    Alessandro Zifiglio
    Jul 27, 2006
  5. Noozer
    Replies:
    2
    Views:
    250
    Dr John Stockton
    Aug 1, 2005
Loading...

Share This Page