Question

I want to create a form like the one pictured below:

I see many ways how to use table, css, lists, but want to know how to best implement what I have pictured. The idea is that “Student(s)” has a Name and Age associated with it and by clicking on “Add Row” link, a new pair of Name and Age fields would appear right under it.

If someone can suggest to me the best way to accomplishing this so that I don’t have alignment problems where the field label is to the left of the input fields, I would greatly appreciate it. I know it would be simple with tables, but wanted to see if there is a tableless solution suitable for the modern age of HTML5/CSS3.

I went off of this
http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-cross-browser-html5-forms/

But had problems tweaking it to look like what i pictured above. If someone can help show me how to best achieve this, I would greatly appreciate it.

Answer 1

If you use this script:

 var lastUsed=0;

function addGroup()
{
   lastused++;
   namstr='StName'+lastused;
   agestr='StAge'+lastused;
   str='<div> Name: <input type="text" name="'+namstr+'" value="">
   Age: <input type="text" name="'+agestr+'" value=""></div>';
   document.getElementById('formBlock').innerHTML+=str;
}

With this HTML:

<form name="myform" action... etc>
<div id="formBlock">
    Class Name: <input type="text" name="clName" value=''>
    <div> Name: <input type="text" name="StName0" value="">
    Age: <input type="text" name="StAge0" value=""></div>
</div>
<textarea>....etc

</form>

It should add them just fine. I didn’t include any styling because we don’t have a page layout. The styling should be trivial.