Data Entry Issues

G

Gene Wirchenko

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
 
D

Denis McMahon

Dear HTMLers:

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

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 said:
2) How can I right-align input?
Click to expand...

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

Rgds

Denis McMahon
 
D

Denis McMahon

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


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

Setting the style seems to work in firefox at least:

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

Rgds

Denis McMahon
 
D

dorayme

Gene Wirchenko said:
3) In CSS, what is the difference between width and max-width?
Click to expand...

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.
 
N

Neil Gould

Hi Gene,

Gene said:
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.
Click to expand...
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.
 
A

Adrienne Boswell

Gene Wirchenko said:
Dear HTMLers:

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

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: ________________________________________
Click to expand...

<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.
Click to expand...

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
----------
Click to expand...

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?
Click to expand...

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

Jukka K. Korpela

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.
Click to expand...

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?
Click to expand...

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
----------
Click to expand...

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.)
 
D

dorayme

Jukka K. Korpela said:
(There's no working way to align on a decimal
separator using HTML and CSS.
Click to expand...

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.
 
J

Jukka K. Korpela

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
Click to expand...

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.
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Collect Excel Data from Website 5
Issue with passing fetched data to POST form. How can I? 0
How to display input options only after selecting an option from the 'select class' tag JS? 6
Checking dynamically populated data using ajax with user entered value 5
menu bar and banner responsive issues....any guidance is appreciated! 0
data entry tool 10
data entry validation 0
Need assistance finetuning HTML, CSS, Javascript - sticky header issue 3

Members online

Total: 24 (members: 1, guests: 23)
Robots: 439

Forum statistics

Threads
473,769
Messages
2,569,576
Members
45,054
Latest member
LucyCarper

Latest Threads

Top