html - ページ上のフィールドの配置でフォームの競合を処理する方法

Question

下の絵のように見えるページを作成する必要がありますが、

フィールド 1とフィールド4は、送信 2を含む1 つのフォームです。

フィールド 2とフィールド3は、送信 1の 1 つの (別の)フォームにあります。

それに対処するためにHTMLコンポーネントの配置をスタイリングする方法を知っていますか?

Answer 1

このコードを試してください (私は Wivlaro に同意します)

    <form id="form1" action="">
<br/>
    <input type="text" id="field2" value="field2"/><br/><br/>
    <input type="text" id="field3"  value="field3"/><br/><br/>
    <input type="submit" value="Submit 1" />
    </form>

<form id="form2" action="">
    <input type="text" id="field1"  value="field1"/><br/><br/>
    <input type="text" id="field4"  value="field4"/><br/><br/>
    <input type="submit" id="submit2" value="Submit 2" />   
</form>

<style>
    #field1{
        position:absolute;
        top:0;      
    }
    #form2{
        margin-top:-18px    
    }
</style>

Answer 2

ユーザーのメンタル モデルがアプリケーションの動作と一致するように、独自の送信フォームの横にフィールドを配置する方が理にかなっていると思います。

ただし、これを行う必要がある場合は、field1 に次のような CSS を使用して、他の 2 つの上に移動することができます (レイアウトがかなり固定されている場合)。

position:relative;
top: -100px; /* Pick an appropriate number and unit */

次に、フィールド 1 のコンテナーに負の上部パディングまたはマージンを与えて、不足している高さを補うことができます。

醜いけど。