我想创建一个如下图所示的表单:



我看到了许多使用表格,CSS,列表的方法,但是想知道如何最好地实现我所描绘的内容。这个想法是,“学生”具有与之关联的“名称和年龄”,并且通过单击“添加行”链接,一对新的“名称和年龄”字段将出现在其正下方。

如果有人可以向我建议完成此操作的最佳方法,以使我在输入标签左侧的字段标签不出现对齐问题,我将不胜感激。我知道使用表会很简单,但是想看看是否有适合现代HTML5 / CSS3的无表解决方案。

我离开了
http://net.tutsplus.com/tutorials/html-css-techniques/how-to-build-cross-browser-html5-forms/

但是在将其调整为我上面的图片时遇到了问题。如果有人可以帮助我展示如何最好地实现这一目标,我将不胜感激。

最佳答案

如果使用此脚本:

 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;
}


使用此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>


它应该添加它们就好了。我没有包含任何样式,因为我们没有页面布局。样式应该微不足道。

10-05 20:58
查看更多