Client-Side EG by George Hernandez

This page provides basic examples of the HTML tags for forms, as well as basic client-side validation with JavaScript. User your browser to view the source to see the HTML code plus some JavaScript code. See also my ClientSideValidation.js which can be generically used on most forms.

Legend of fieldset for the 3 kinds text box tags/controls UserName [A-Za-z allowed in CS validation, but A-Ya-y SS. Try entering a z on CS to impersonate someone skipping the form.]
Phone [Max length 16 in CS validation, but 12 SS. Try entering greater than 12 on CS to impersonate someone skipping the form.]
Number [Not validated on CS, but validates for number on SS. Try entering a non-number on CS to impersonate someone skipping the form.]
Email [The 2 previous controls and this one are <input type="text"> tags. Basic email validation used: I'm still looking for a fully RFC 2822 compliant regex.]

Password [<input type="password">. Entries are blocked out as typed. No CS validation, but is min length is 4 and only A-Za-z0-9_ characters allowed. Try entering weirdo characters to impersonate someone skipping the form.]

[You can't see the <input type="hidden"> tag here without viewing the source. Hidden tags are usually calculated on the CS. Even hidden fields should be validated.]

[This fieldset given without a legend.]

Gender [<input type="radio"> allow 0-1 to be chosen. This one set to 1 required. Even radio options should be validated.]
Male
Female

Tags/controls that can return arrays

Pets [<input type="checkbox"> allow 0+ to be chosen. This one 2+ cs, but 2-3 ss.]
Dog Cat Bat Rat

Fruits [<select>, <optgroup>, and <option> allow to 0+ to be chosen. The <optgroup> does not have to be used. This one 0-3 cs and ss.]

[This note and the <textarea> tag/control stuff were not set in a fieldset.]

Notes

This <textarea> tag/control was set allow only some common characters (A-Za-z0-9 '-.,+?!/@).

While this example is for Form basics, I wanted to note that textareas are frequently used to send HTML in two ways: What You See Is What You Get (WYSIWYG) and not-so-WYSIWYG. Systems that use WYSIWYG include most emails (like gmail, Yahoo, and hotmail) and content management systems (CMS) for blogs and comments. I myself used TinyMCE to allow WYSIWYG posting for the Chicago Swordplay Guild (CSG) [chicagoswordplayguild.com]. However, not-so-WYSIWYG can be more more powerful and more secure than WYSIWYG. Systems that use not-so-WYSIWYG include Wikipedia and CMS for blogs and comments (see digg.com or BBCode). Some systems allow both WYSIWYG and not-so-WYSIWYG. EG: Google Documents.

In any case, textareas that deal with a lot of HTML from the user and must be carefully processed on both the client and server side. However if it is HTML instead of some other fancy data that the web app is going to parse, then here's a simple way to handle it on the client-side:

Allow only well-formed XHTML.

Allow only ASCII characters. Outside of the tags, non-ASCII characters should be represented with ASCII using character references. I prefere CERs to increase human readability. Because of the difference between HTML and XHTML CERs, I use ' instead of '. See also Character References.

Disallow HTML comments () from most users.

Disallow <script> tags from most users.

In some cases applying strip_tags(str[, allowed_tags]), or an equivalent will do. strip_tags removes tags and HTML comments, while allowing certain tags.

Button variations, and <button>

[<input type="submit" />] [<input type="reset" />] [<input type="image" />. Acts as a submit. Has src attribute.] [<input type="button" />]
[<button type="submit">. No content] [<button type="reset">] [<button type="button">. Has img element.]

Page Modified: (Hand noted: 2008-03-10 19:38:15Z) (Auto noted: 2008-05-14 20:50:49Z)