reptile7's JavaScript blog
Thursday, January 29, 2015
The qform-qtable Mesh
Blog Entry #341

Welcome back to our discussion of the JavaScript Goodies Quadratic Equation script. Picking up from where we left off last time, our next task is to go through the source of the table-form on the quad.html page for working with a given quadratic equation.

The quad.html table-formIt would be a stretch to say that the table is serving a data-arranging purpose: it's really being used as a layout device, and the W3C frowns on that sort of thing. Moreover, we won't be submitting the form data to an action=URI processing agent, so we don't really need the form container, either. But let's go with what we have for the time being.

The table-form scaffolding

Here's the HTML for the outer table and form elements themselves:

<table align="center" cellspacing="2" cellpadding="2" border="3" bgcolor="#2574d5" style="border: solid 1px, color: #1d6ec9;">
<form name="qform" style="border: solid 2px, color: #2574d5">
...table-form content...

The table doesn't have an identifier so let's give it a qtable id.

As for the p and img elements, the align attribute of the table element is deprecated; the state-of-the-art way to horizontally center a table is via a margin-left:auto;margin-right:auto; styling. The bgcolor attribute of the table element is also deprecated; in practice, the qtable table's bgcolor="#2574d5" attribute is largely overwritten by the bgcolor="#000000" attributes of the table's td cells (vide infra) although it does color the interstitial cellspacing area.

The qtable table's style attribute is ignored by the browser because the syntax of its border declaration is invalid; as a result we see a 3px outset border per the border="3" attribute. If we were to clean up the declaration

border: solid 1px #1d6ec9;

then the style attribute would effectively overwrite the border attribute.

The form has a name="qform" identifier, which is OK for HTML but is not OK for XHTML. Like the qtable table, the qform form has a style attribute with a dodgy border setting; even when coded correctly, however, this styling doesn't add anything to the display* with Firefox, Google Chrome, Opera, or Safari, so I'd throw it out. The qform form doesn't have a closing </form> tag, which is required for the form element.

*Control-clicking the table and checking the context menu's Inspect Element command reveals that the browser closes the qform form prior to the start of the qtable table's tbody element child, even if a </form> tag is placed just before the </table> tag. As it happens, placing the qform form inside the qtable table violates the table element's (CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+) content model. Conversely, putting the table inside the form would comply with the form element's (%block;|SCRIPT)+ -(FORM) content model. We should still get rid of the form border, however; unlike a table, which has a shrink-to-fit width, a form has a width of 100%, i.e., it spans the width of the viewport.

The first eight rows

The qtable table contains nine rows; each row holds one cell. Here's the HTML/CSS for the first two rows:

/* From the script17.css style sheet: */
td { border: solid 1px color: #2574d5; }
.intitle { font-family: Verdana, Arial, sans-serif; font-size: 15pt; color: #2574d5; font-weight: 500; }
input.text { font-family: Verdana, Arial, sans-serif; font-size: 10pt; color: #2574d5; font-weight: 500; background: #00000; border: solid 1px, color: #22429e; }

<td align="center" bgcolor="#000000">
<font class="intitle">Variable a</font></td>
<tr><td align="center" bgcolor="#000000">
<input class="text" type="text" size="7" maxlength="7" name="a" onchange="checka( );" style="text-align:center;" title="Input the value of the variable a here."></td>

The first row's <tr> tag is missing: the tr element's start-tag is required.

Each td cell has an align="center" attribute that horizontally centers its content and a bgcolor="#000000" attribute that gives it a black background: the former is legit (align is still OK for the internal table elements - tbody, tr, td, etc. - and only for those elements) but the latter is not (there are no elements for which bgcolor is not deprecated). The td style rule is ignored by the browser (vide supra).

The first row's Variable a text can and probably should be marked up as a label. As the Variable a text and the name="a" text input it is labeling are in different rows/cells, we'll have to associate them explicitly: toward this end we can give the label and input, say, for="aInput" and id="aInput" attributes, respectively. The typeface(s), size, color, and boldness of the Variable a text are set by the .intitle style rule.

The table's third, fifth, and seventh rows do begin with a <tr> tag and the text in their cells is different but in all other respects these rows are identical to the first row.

The second row's a input has a maxlength of 7; I'd reduce it to 2 - you don't want the user to enter an a coefficient larger than 99, do you? Changing the input's value in any way calls the script17.js script's checka( ) function, which we'll get to in a subsequent post.

Mousing over the a input pops up a tooltip that, per the input's title attribute, cues the user to enter the a value.

The entered a value is horizontally centered by a style="text-align:center;" attribute. The value's typeface(s), size, color, and boldness are set by the input.text style rule; the rule's background (five 0s, not six) and border declarations are ignored.

The table's fourth row holds a corresponding name="b" text input whose onchange event handler is tied to the script17.js script's checkb( ) function and whose title tooltip cues the user to enter the b coefficient. The table's sixth row holds a corresponding name="c" text input whose onchange event handler is tied to the script17.js script's checkc( ) and process( ) functions and whose title tooltip cues the user to enter the c coefficient. The b and c inputs and their container cells are styled à la the a input and its cell.

For its part, the table's eighth row

<tr><td align="center" bgcolor="#000000">
<input class="text" type="text" size="30" maxlength="30" name="x" readonly="true" style="text-align:center;" title="Resultant value of variable x."></td>

holds a larger name="x" text input. Contradictorily, the x input is a read-only control but has a maxlength="30" setting; moreover, the readonly boolean attribute should be set to readonly and not to true. (I encourage you to deploy the full readonly="readonly" form vis-à-vis the minimized readonly form: although today's browsers handle both forms without incident, only the former is XHTML-legit.)

In the UA Conformance section of the CSS 2.x Specification, the W3C notes:
CSS 2.1 does not define which properties apply to form controls and frames, or how CSS can be used to style them. User agents may apply CSS properties to these elements. Authors are recommended to treat such support as experimental. A future level of CSS may specify this further.
As detailed in this and the following sections, the modern OS X browsers on my iMac smoothly apply (the valid parts of) the .intitle, input.text, text-align, and input.button stylings to the appropriate elements in the qform-qtable structure.

The buttons

The qtable table's last row

/* From the script17.css style sheet: */
input.button { font-family: Verdana, Arial, sans-serif; font-size: 13pt; color: #2574d5; font-weight: 500; background: #000000; border: solid 2px, color: #22429e; cursor: hand; }

<tr><td align="center" bgcolor="#000000">
<input class="button" type="button" value="Reset!" onclick="over( );">
<input class="button" type="button" value="Help!" onclick="help( );">

holds and push buttons (the button is not a bona fide reset button). Clicking the button calls the script17.js script's over( ) function; clicking the button calls the script17.js script's help( ) function.

The button pair is horizontally centered by the parent cell's align="center" attribute. The typeface(s), size, color, and boldness of the button values and the buttons' black background are set by the input.button style rule. The cursor:hand; styling is not standard, and is supported by Google Chrome and Opera and Safari but not by Firefox; cursor:pointer; is the legal equivalent.

We're not done with the quad.html display yet: below the qtable table we've got some stuff that is completely unrelated to quadratic equations, and a thoroughgoing look at that stuff is best saved for the next entry.

Hi Andy,
Being a non-techy, I am indeed "nonplussed by your highly technical blog"! I would do well to acquire a fundamental understanding of HTML, if for no other reason than to help me in the formatting of my blog. I can get SO stopped at the most basic things.
Thank you for taking the time to read my blog. :-) And yes, why not share yours on LinkedIn, "just because"!
Have a splendid day,

Thanks for checking out my blog, Ramona. I stand at the ready to answer any questions you may have about what I do.
Post a Comment

<< Home

Powered by Blogger

Actually, reptile7's JavaScript blog is powered by Café La Llave. ;-)