Re: Tough problem

[Thomas 'PointedEars' Lahn]

JJ wrote:

> On Mon, 7 Aug 2017 19:00:33 -0700 (PDT), justaguy wrote:
>> In the following BIG form (tons of FORM elements), function event trigger
>> is the button with + sign beneath each group.
>> http://54.80.71.115/dev/bigFORM.html
>>
>> Under J1 and J11 pair (of groups), if we click on the outmost + sign it
>> would duplicate with J1 and J11, and if we just click on the + sign
>> beneath J11 it would duplicate just J11.
>>
>> Currently, all the names of the J11 elments start with a prefix of "J11_"
>> and each element is an array. What I'd like to do is, for each J1 I'd
>> like to consider it as a "row" and I attempted to insert "row1", "row2"
>> etc. upon each J1 addition. Then, I also need to know how many J11 is in
>> each J1.
>
> If the J11 sections must be part of the J1 section, then their HTML
> elements should be placed hierarchically and treated as hierarchy, rather
> than as flat list. […]

More importantly, the `fieldset` element (_not_ only the `div` element)
should be used to indicate which form controls belong together. `fieldset`
elements can actually be nested:

<https://www.w3.org/TR/2016/REC-html51-20161101/sec-forms.html#the-fieldset-element>

For that, it may be necessary – as is wise in any case – to split the big
table into several (as `fieldset` elements cannot span table cells, and use
CSS to define a common minimum first column width.

However, the OP has misunderstood the meaning of “FORM element”. There is
only *one* `form` element in this document (not “tons”), and that is good
so. (Only one is needed if it contains all form _controls_.)

Also,

<tr>
<td>1st Installment: <input type="text" name="AZT2FirstInstallment[]">
<br>
2nd Installment: <input type="text" name="AZT2SecondInstallment[]">
</td>
</tr>

should be at least

<tr>
<th><label for="AZT2FirstInstallment1">1st Installment</label></th>
<td><input id="AZT2FirstInstallment1"
name="AZT2FirstInstallment[]"></td>
</tr>
<tr>
<th><label for="AZT2SecondInstallment2">2nd Installment</label></th>
<td><input id="AZT2SecondInstallment2"
name="AZT2SecondInstallment[]"></td>
</tr>

[The colon has been intentionally removed from the recommended markup
to facilitate its being generated with CSS instead, based on the
punctuation rules of the used language. For example, for French the
stylesheet would generate a non-breaking space followed by the colon,
while for English and other languages it would just generate the colon:

th label:after {
content: ":";
}

[lang|="fr"] th label:after {
content: "\a0 :";
}

<https://www.w3.org/TR/css3-selectors/#attribute-selectors>
]

Proper, user-friendly, semantic markup also makes it easier to use scripting
to create Web applications:

<http://html5doctor.com/> pp.

X-Post & F’up2 <news:comp.infosystems.www.authoring.misc>

--
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.