我想创建一个如下图所示的表单:
我看到很多使用表格、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>
它应该添加它们就好了。我没有包含任何样式,因为我们没有页面布局。样式应该很简单。
关于jquery - 如何最好地格式化像这样用户可以动态添加子字段的 HTML 表单? (表?列表?css3?),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8113659/