a suggestion for the form tag in new html

Hi, dan:
As a web application developer, I see some draw back about current form tag in html:
1. it is nothing to do with the view. it is only for logic purpose. but it has to be interwovened with other viewing tag.
suppose you have a html page for multiple forms. formA and formB.

data inputs u and v are belong to formA are phiscally positioned in <div id="div1"> and <div id="div2">
data inputs x and y are belong to formB are phiscally positioned in <div id="div2"> and <div id="div3">
but it is no way to put the form tag for formA and formB:
<html>
<body>
    <table>
        <tr>
          <td>
            <div id="div1"><p><input name="u"/></p></div>
           </td>
        </tr>
        <tr>
          <td>
            <div id="div2"><p><input name="x"/><input name="v"/></p></div>
           </td>
        </tr>
        <tr>
          <td>
            <div id="div3"><p><input name="y"/></p></div>
           </td>
        </tr>
</body>
</html>

2. each data input can only belong to one form.

3. since the forms can't be nested, it is difficult for developer to customize some component, for example, in myfaces:
<t:panelTabbedPane selectedIndex="int"
                      activeTabStyleClass="CSSClass"
                      inactiveTabStyleClass="CSSClass"
                      disabledTabStyleClass="CSSClass"
                      activeSubStyleClass="CSSClass"
                      inactiveSubStyleClass="CSSClass"
                      tabContentStyleClass="CSSClass">
    <t:panelTab ...>
        ...(anyComponents)...
    </t:panelTab>
</t:panelTabbedPane>
the <panelTabbedPane>  comes with a form around it. so it is impossible to write a <t:panelTab>  content with its own form......


here comes my suggestion to solve it:
Seprate the physic location of data input field from the form it is belong to.
the form tag can appear any where but without any real data input inside it, the data input can be anywhere in the html and it can be "registered" to the any forms if necessary.
for example:
<html>
<head>
    <form id="studentForm"/>
    <form id="teacherForm"/>
    <form id="classForm"/>
</head>
<body>
    <!--any input text, hidden, checkbox, radio, textarea, select can be associated with more than one form by using formId property-->
    <input name="name" formId="studentForm,teacherForm,classForm">

    <!--any button, submit, image can only be associated with one form-->
    <input type="submit" formId="studentForm" value="submit student"/>
    <input type="submit" formId="classForm" value="submit class"/>
    <input type="submit" formId="teacherForm" value="submit teacher"/>
</body>
</html>

the problem in #1 can be solved by:
<html>
<head>
    <form id="formA"/>
    <form id="formB"/>
</head>
<body>
    <table>
        <tr>
          <td>
            <div id="div1"><p><input name="u" formId="formA"/></p></div>
           </td>
        </tr>
        <tr>
          <td>
            <div id="div2"><p><input name="x" formId="formB"/><input name="v" formId="formA"/></p></div>
           </td>
        </tr> 
        <tr>
          <td>
            <div id="div3"><p><input name="y" formId="formB"/></p></div>
           </td>
        </tr>
</body>
</html>

and this idea can compatable back with old html by checking if input has formId or not. if there is no formId, then the input is suppose to belong to the form which is around it.

and this idea can also be introduced to script tag:
first define script in head area:
<script ...... id="script1">
doSomething1();
doSomething2();
....
</script>
<script .......id="script2">
doSomething3();
doSomething4();
......
</script>
then invoke them in the html body.
<script .... invokeId="script1"/>
......


many thanks to conside this suggestion.

best regards

-Zhe Zhang

Received on Wednesday, 14 March 2007 20:36:46 UTC