Forms____and Characters

[Samsoske]

Hi- Me again.

Just want to know, how do you restrict characters in forms, because for the life of me, I CANT REMEMBER. I know reading a HTML book a while back that there is simple HTML line that just goes in <form tag> itself... ??? Does anyone out there Know?

I know there must be a javaScript out there that can do this, but thats not what i am looking for though, JuSt ThE aBoVe...


:o

[jscheuer1]

I really don't think they have that. A quick Google search turned up nothing (nothing using only HTML). Besides that, I'm reasonably sure I would have come across something like that at least once by now if it existed. Perhaps what you remember seeing was the onchange javascript event that invoked a validation function of one sort or another or something like that. That could look (by itself) like pure HTML.

Here's being open to being wrong on this one but, I don't think so.

[Samsoske]

Yes, but I remember it being put in the tag itself....I am very sure...

It looked like some type of array <pattern [a-z]> ????? type thing....


I will have to find that book....

[jscheuer1]

That's the thing about an onchange or other event, it could look something like so:


<input type="text" onchange="if (/[0-9]/.test(this.value)){this.value=''};">

That, for instance, would reset the filed to blank if a number were entered and focus were directed away from the input. It is contained in the tag but, this is javascript. If the code for the event were written more economically, or if there were a supporting function elsewhere on or available to the page, more could be done with even less appearing in the tag. Seeing just the portion in the tag could be misleading in such cases.

[Samsoske]

Yeah i guess that's what it looked like.... So i just got mixed up with the java?

Thankyou for your help, I tried it on my site's forms and it pretty much does
what i was looking for....


..:Oh yes, one last question:..


..::Is it posible to customize you text imput areas like you can with
the submit and clear buttons, with the <INPUT TYPE="submit" onClick="return checkmail(this.form.Email)" value="submit" style="color: Black; background-color: White"> tag atributes?


And once again Thanks.

[jscheuer1]

Thankyou for your help, I tried it on my site's forms and it pretty much does
what i was looking for....

Well, what exactly did you have in mind? You can also use the replace method to simply remove the offending character(s) leaving the rest of the text as entered. This could be done onkeyup instead of onchange. Here is a version for that, it disallows anything except numbers:


<input type="text" onkeyup="value=value.replace(/[^\d]/g, '')">





..::Is it posible to customize you text imput areas like you can with
the submit and clear buttons, with the <INPUT TYPE="submit" onClick="return checkmail(this.form.Email)" value="submit" style="color: Black; background-color: White"> tag atributes?

Sure! One thing to keep in mind with a text input is that if you want to change its height, don't set the height property, instead use the font-size property, that way, not only will the height change but the size of the text typed in will match the size of the input:


<input type="text" style="font-size:.75em;border:1px inset green;">

[Samsoske]

<input type="text" style="font-size:.75em;border:1px inset green;">

If you wanted to change the bgcolor atribute, you would just add bgcolor:#ff66yy; to <input type="text" style="font-size:.75em;border:1px inset green; bgcolor:#ff66yy;"> ???????????????????????

[mwinter]

<input type="text" style="font-size:.75em;border:1px inset green;">Don't use em lengths for font-size declarations. IE can end up computing the value completely incorrectly. Use percentages:



<input ... style="font-size: 75%;">
That said, I'd like to note two things:


A reduction to 75% is probably too small. If it's 75% of the default font size, then it should definitely be larger: at least 85%, but preferably larger still.
Don't use in-line style declarations (though I realise in posts like these, it's much more convenient).




If you wanted to change the bgcolor atribute, you would just add bgcolor:#ff66yy; [...]No. The property name is background-color. Note that a background colour should be paired with a foreground colour declarations (the color property).

Mike

[Samsoske]

Posted By mwinter

<input ... style="font-size: 75%;">


I tried it, and you can use the good old

<input type="text" style="font-size:12px;border:1px inset green;"> Atribute.....

[mwinter]

I tried it, and you can use the good old

<input type="text" style="font-size:12px;border:1px inset green;"> Atribute.....The font-size property shouldn't be given length values with the px or pt units, either. IE cannot resize these. Use percentages.

Mike

[jscheuer1]

Don't use em lengths for font-size declarations. IE can end up computing the value completely incorrectly.

I've heard that, mostly or maybe only from you. I have noticed that in large scale situations, like 22em used for layout dimensions, for instance, there is at the very least a huge discrepancy between IE's and Mozilla's idea of what an em is. However, I have yet to see a problem for situations like the one I employed em with. Are you talking about legacy IE browsers or just on general principal?

I'd be happy to stop using it for the small stuff too, if I had a concrete example. Or maybe I'd just try to avoid that situation, in any case I'd like to know. Most of the rest of your points, as usual, are well taken, while I in my own way continue to take license with what browsers will currently allow. I'm surprised, you didn't take issue (yet) with:


<input type="text" onkeyup="value=value.replace(/[^\d]/g, '')">

I even cringed a little at it but, it was in part to illustrate my original point of how javascript (in small doses) could be mistaken for HTML.

[jscheuer1]

If you wanted to change the bgcolor atribute, you would just add bgcolor:#ff66yy; to <input type="text" style="font-size:.75em;border:1px inset green; bgcolor:#ff66yy;"> ???????????????????????

Yeah, no. The style property for the deprecated (and sometimes plain invalid) bgcolor= attribute is, as Mike said -


background-color:#ff66yy;

However, unless that was just a placeholder for a real value, y is not a hex digit. I'm not sure if you knew this or not, if not, you can only use values 0 (zero) through f for hex color codes and expect reliable results. Values out of this range will sometimes produce a color but, it could be any color and would often be quite different in different browsers.

[mwinter]

I've heard that, mostly or maybe only from you. I have noticed that in large scale situations, like 22em used for layout dimensions, for instance, there is at the very least a huge discrepancy between IE's and Mozilla's idea of what an em is.An em length is fine for specifying dimensions, box offsets, and the like. It's only when the unit is used with the font-size property that things start getting rather wierd.

As for what you noticed, it's probably just slight rendering differences between the two, only magnified.


Are you talking about legacy IE browsers or just on general principal?In general; the problem still exists with IE 6.


I'd be happy to stop using it for the small stuff too, if I had a concrete example.Then let's take a look at a simple demonstration (http://mwinter.webhop.info/dd/john-scheuer/font-size.html).

The outlined text was copied from a previous example. It's a copyright notice that's been reduced to 85% of the default size, with the level two header increased to slightly larger than the body text. If the text is resized, a clearly disproportionate change in size can be observed.

This can be fixed by rooting the font size in percent (on the body element, for example) but using percentages is simpler and less prone to error. After all, for font-size, 110% and 1.1em are exactly the same.


I'm surprised, you didn't take issue (yet) with:


<input type="text" onkeyup="value=value.replace(/[^\d]/g, '')">I thought about it, but it was late and I couldn't be bothered. :D

As it stands, it can be changed in two places:


The identifier, value, should be replaced with the member expression, this.value. There is no guarantee that properties of the input element will exist on the scope chain.
The regular expression pattern can be simplified to /\D/g. Whilst \d matches digit characters, \D matches non-digit characters.
However, I'm not a fan of intercepting keystrokes or automatically deleting user input. It's better, in my opinion, to tell the user that the value's wrong and let them correct it. At the very least, it prevents the confusion and frustration that can occur when something that was just typed suddenly disappears.



Yeah i guess that's what it looked like.... So i just got mixed up with the java?What John posted was an example of Javascript, not Java. They are very different languages.

Mike

[jscheuer1]

Looks like em's are fine for child font-size properties but, not for parents. So, using them on an element with no possibility of children, like a text input, should be fine. Nice demo Mike!

notices the address

Does this mean I now have web-space on your server? :)

What's my password? :cool:

[mwinter]

Looks like em's are fine for child font-size properties but, not for parents. So, using them on an element with no possibility of children, like a text input, should be fine.Yes, though I don't think there would be much point if everything else is specified as a percentage.

I like uniformity. :)


Nice demo Mike!

notices the address:D


Does this mean I now have web-space on your server? :)You have a directory under which I'd post more examples specifically for you. Twey has one, too, as does anyone else for whom I write a demonstration.

I really should reform my directory structure, index everything, and rewrite most of the examples (though old, they're visited due to links from the Google Groups Usenet archive and other Usenet Web interfaces). It's just so much hassle, though...


What's my password?:p

Mike