具有两列的表单的“高级”部分答案

【问题标题】："Advanced" section for a form that has two columns具有两列的表单的“高级”部分
【发布时间】：2021-06-12 01:07:02
【问题描述】：

所以，我有一个包含几行设置的表单。整个东西是一个网格，其中第一列与最宽的项一样宽。

现在我决定使用<details> 元素将一些行移到“高级”部分。但是，问题在于这是一个不同的容器，这意味着其中的组件不再是表单布局的一部分。

解决这个问题的惯用方法是什么，最好不使用魔法 javascript 或库。

这是我的例子：

<html>
    <head>
    <style>
        .example-form-layout {
            display: inline-grid;
            grid-template-columns: auto auto;
            gap: 5px 5px;

            align-items: center;
        }
    </style>
    </head>

    <body>
        <p>Form:</p>
        <form id="example-form" class="example-form-layout">
            <!--col one-->
            <b>Setting one</b>
            <!--col two-->
            <input type="number" name="setting_one"/>

            <!--col one-->
            <b>Setting two (Longer name)</b>
            <!--col two-->
            <input type="number" name="setting_two"/>

            <details class="example-form-details">
                <!--col one-->
                <b>Setting two</b>
                <!--col two-->
                <input type="number" name="setting_two"/>
            </details>
        </form>
    </body>
</html>

【问题讨论】：

行进的原因应该是什么？媒体查询？如果没有 javascript，你就不会正确做到这一点。
呃，对不起，我不知道你的第一个问题是什么意思。而且我认为布局应该尽可能少地依赖 JS，因为它会传播和混淆布局代码，使代码更难维护、更混乱、更难调试。
1.但是有些任务没有 javascript 是无法解决的。如果没有js，那么你可以简单地复制你要转移到的部分中的必要项目，并将这些项目设置为显示：无，但这不是灰泥的方式。最好考虑一下 javasript。 2. 我的意思是应该移动项目的事件。
我打算使用details 元素。试用演示，它允许您扩展内容。它主要用于当您有一个非常大的文本并且您不希望它一次显示所有内容，但又不想使用 JS 或链接时。它适用于该目的。问题是，我不知道如果没有 JS 这是否可能，这就是我在这里问的原因:)
让我们明确一点，我可以用 Javascript 轻松实现这一点^^

标签： html css forms layout css-grid

【解决方案1】：

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
    .example-form-layout {
        display: inline-grid;
        grid-template-columns: auto auto;
        gap: 5px 5px;

        align-items: center;
    }
</style>
</head>

<body>
    <p>Form:</p>
    <form id="example-form" class="example-form-layout">
        <div class="container">
            <div class="row">
              <div class="col-sm">
                One of three columns
                <b>Setting one</b>
                <b>Setting two (Longer name)</b>
                <b>Setting two</b>
              </div>
              <div class="col-sm">
                One of three columns
                <input type="number" name="setting_one"/>
                <input type="number" name="setting_two"/>
                <details class="example-form-details">
                    <input type="number" name="setting_two"/>
                </details>
              </div>
            </div>
          </div>
    </form>
</body>

【讨论】：

嘿，感谢您的回答，但这引入了 3 个额外的依赖项，因此不是解决问题的简单方法。最重要的是，没有解释为什么或如何工作。