HTML comment mettre un formulaire dans 2 divs/colonnes?

J'ai 1 form et je voudrais le placer dans 2 divs, de sorte que les suivantes:

<div style="float:left; position:relative; margin-right:40px">
<form id="testForm2">
</form>
</div>

<div position:relative">
<form id="testForm2">
</form>
</div>

serait transformé en quelque chose comme ceci:

<div style="float:left; position:relative; margin-right:40px">
<form id="testForm2">
</div>

<div position:relative">
</form>
</div>

Voir le violon. Des idées?

Merci!

InformationsquelleAutor Patrioticcow | 2011-04-12
  1. 8

    Ce que vous voulez, c'est de mettre la forme autour de deux divs comme suit:

    <form id="testForm2">
  <div style="float:left; position:relative; margin-right:40px">
  </div>

  <div style="position:relative">
  </div>
</form>

    Voici une version mise à jour de votre jsFiddle.

    Modifier

    Aussi, votre deuxième div style est incorrect. C'est corrigé maintenant, dans mon exemple.

    InformationsquelleAutor Richard Marskell - Drackir
  2. 2

    Le balisage de votre jsFiddle fichier requis certains rangement. C'est ce que je voudrais aller avec, en essayant de réduire votre code un peu: 

    <div class="post_edit_modeling">
<div class="tab_trash">
<div id="prof_picture">
<form id="testForm2">
<fieldset id="left">
<legend>Sex:</legend>
<div>
<label>
<input type="radio" name="sex" id="genderMale" value="male" />
Male
</label>
</div>
<div>
<label>
<input type="radio" name="sex" id="genderFemale" value="female" />
Female
</label>
</div>
<div>
<label>Weight</label>
<input id="weightpounds" type="text" name="weightpounds"/>
</div>
<div>
<label>Bust</label>
<input id="bust" type="text" name="bust"/>
</div>
</fieldset>
<fieldset id="right">
<div>
<label>Cup</label>
<input id="cup" type="text" name="cup"/>
</div>
<div>
<label>Waist</label>
<input id="waist" type="text" name="waist"/>
</div>
<div>
<label>Hips</label>
<input id="hips" type="text" name="hips"/>
</div>
<div>
<label>Hair Color</label>
<select name="haircolor">
<option value="1">White</option>
<option value="2">Black</option>
<option value="3">Yellow</option>
<option value="4">Blue</option>
</select>
</div>
<div>
<label>Dress Size</label>
<input id="dress" type="text" name="dress"/>
</div>
</fieldset>
<fieldset>
<div>
<input type="button" name="btnUpdate" id="btnUpdate"  value="Update" />
</div>
</fieldset>
</form>
</div>
</div>
</div>

    CSS:

    form div {float: left; margin-bottom: 15px;}
fieldset { float: left; width: 200px; border: 0; padding: 0; margin: 0;}
#left { }
#right { margin-right: 0; }
label {float: left;}
input {clear: both;; float: left}

    Ive mise à jour de votre jsFiddle fichier. Ici.

    InformationsquelleAutor Pete
  3. 1

    Pouvez-vous pas juste faire les deux divs vivre à l'intérieur de la forme? Comme ceci:

    <form id="testForm2">
<div style="float:left; position:relative; margin-right:40px">
Form Content Here
</div>
<div position:relative">
Form Content Here
</div>
</form>

    Si le formulaire est touchant votre mise en page, assurez-vous de définir la forme de style de display:inline;!

    InformationsquelleAutor Karl Nicoll
  4. 1

    Comme Drackir et joe_coolish dit, vous n'avez pas besoin de nest vos balises de formulaire de cette façon.

    Généralement j'ai toujours ouvrir la totalité du bloc de contenu avec la balise form, totalement isolé de l'autre contenu. Il n'y a absolument pas de mal à faire les choses de cette façon. N'importe quoi y compris <h1> et ensemble de mises en page peut être imbriquée dans une forme, aussi longtemps que vous savez que chaque entrée dans il fera partie de cette forme.

    <form>
<!-- tons of content here including layout -->
</form>
    InformationsquelleAutor Wesley Murch
  5. 1

    Tu ne peux pas mettre les 2 DIV à l'intérieur de la balise de FORMULAIRE? Quelque chose comme:

    <form>
<div id="one">
...
</div>
<div id="two">
</div>
</form>

    edit: me Semble que je suis un peu trop tard 🙂

    InformationsquelleAutor Dnns
  6. 1

    Il suffit de déplacer votre <div> des balises dans les <form>...

    <form id="testForm2">
<div style="float:left; position:relative; margin-right:40px">
... left side ...
</div> 
<div position:relative">
... right side ...
</div>
</form>
    InformationsquelleAutor drudge
  7. -1

    ce sujet 

    <form id="testForm2">
<div style="float:left; position:relative; margin-right:40px">        
</div>
<div position:relative">
</div>
</form>
    InformationsquelleAutor joe_coolish