Question

我有一张图片列表：

<ul>
    <li>
        <img src="m.jpg">
        <span class="file-data">img name</span>
    </li>
    //etc

当用户将新图像拖动到窗口时，会显示图像的预览以及一些字段输入。

我的问题涉及表单元素标记。

到目前为止，我的HTML看起来像这样：

<ul>
    <form>
        <li>
            <img src="m.jpg">
            <div class="file-data">
                <input type="text" name="title" placeholder="Title">
                <input type="text" name="title" placeholder="Alt">
                <input type="text" name="title" placeholder="Keywords">
            </div>
        </li>
        <div id="btn-container">
            <button class="">Cancel</button>
            <button type="submit">Save</button>
        </div>
    </form>
    <!-- li from above example -->
    <li>
       <img src="m.jpg">
       <span class="file-data">img name</span>
    </li>
    //etc

以下是发生的事情：

表格li隐藏
用户将图片拖到浏览器
表单li克隆显示图像预览
用户输入数据
通过ajax

表单标记的最佳位置是什么？我可以把它放在ul里面吗？

Answer 1

这里有很多内容的表格不是问题。根据{{3}}

FORM元素充当控件的容器。它指定：


表单的布局（由元素的内容给出）。

将处理已完成和提交的表单（action属性）的程序。接收程序必须能够解析   名称/值对以便使用它们。

将用户数据发送到服务器的方法（方法属性）。

服务器必须接受的字符编码才能处理此表单（accept-charset属性）。用户代理可以   告知用户accept-charset属性的值和/或   限制用户输入无法识别的字符的能力。


一个formcan包含文本和标记（段落，列表等）   除了表单控件。

HTML4 documentation说：

表单元素

内容模型   流内容，但没有表单元素后代。

因此，你可以在表单元素中拥有任何你想要的东西，但作为一个角落的情况你不能在里面有另一个表单。

但是，<ul></ul>应该只有<li>元素作为直接后代！如果您打算为列表中的每个项目提供1个表单，那么这些表单自然必须完全包含在<li>元素中;第二个列表中的代码不太正确。

表格标签放置

1 个答案:

表单元素