Formulaire avec panneaux utilisant css

Je veux obtenir un formulaire en utilisant css qui a des panneaux différents pour différents groupes de champs de saisie.Formulaire avec panneaux utilisant css

Similaire à celui-ci. ! [Alt text] [1]

Je sais que c'est un client de bureau. Mais est-il possible de réaliser une telle mise en page avec fieldsets css?

Source

2010-11-22 rangalo

Vous pouvez utiliser float:

<form> 
    <div id="col1"> 
    <fieldset id="fldst1"></fieldset> 
    <fieldset id="fldst2"></fieldset> 
    <fieldset id="fldst3"></fieldset> 
    </div> 
    <div id="col2"> 
    <fieldset id="fldst4"></fieldset> 
    <fieldset id="fldst5"></fieldset> 
    </div> 
    <div id="col3"> 
    <fieldset id="fldst6"></fieldset> 
    <fieldset id="fldst7"></fieldset> 
    <fieldset id="fldst8"></fieldset> 
    </div> 
    <div style="clear:both;" /> 
</form>

Dans votre CSS:

#col1, #col2, #col3 { 
    float: left; 
    width: 300px; 
}

Ensuite vous placez les différents éléments de formulaire dans vos fieldsets.

Source

2010-11-22 15:24:04

pourrait vous s'il vous plaît être plus précis ou donner un exemple? – rangalo

Attendez, je vais le faire pour vous –

Note: Lorsque vous remplissez vos 'fieldsets' commencez par' 'suivi par les éléments (que vous voulez probablement placer dans une liste de définition'

'ou' 'd'abord) . Vous pouvez également définir la largeur de colonne sur 33% ou tout autre pourcentage au lieu d'une largeur fixe. –

CSS:

<style type="text/css"> 
fieldset { 
    width: 33%; 
    float: left; 
} 
</style>

HTML:

<fieldset> 
    <legend>Anschrift</legend> 

    <label for="nachname">Nachname:</label> 
    <input id="nachname" name="nachname" type="text"> 
</fieldset> 

<fieldset> 
    <legend>Firmenanschrift</legend> 

    <label for="firma">Firma:</label> 
    <input id="firma" name="firma" type="text"> 
</fieldset> 

<fieldset> 
    <legend>Einkommen</legend> 

    <label for="jaresgehalt">Jaresgehalt:</label> 
    <input id="jaresgehalt" name="jaresgehalt" type="text"> 
</fieldset>

Source

2010-11-22 15:30:09

Si vous regardez de près cette image, vous voyez qu'il ne veut pas que 3 fieldsets soient à côté de l'un et de l'autre mais que 3 colonnes, et dans ces colonnes, les fieldsets doivent être placés. –

@Enrico: très vrai. –

Je ne suis pas tout à fait sûr quelle partie de la mise en page est exactement le problème. Vous connaissez évidemment fieldset et vous les disposez exactement de la même manière que vous le feriez pour tout autre élément HTML (tel que div).

Je suppose que ce sont les colonnes. Vous avez deux possibilités ici. A) Soit mettre un nombre de fieldset s dans une div avec la largeur (100%/nombre de colonnes) et flotter ces divs, ou B) si vous avez seulement besoin de supporter les navigateurs modernes, utilisez les propriétés CSS 3 et le navigateur calcule le nombre de fieldset s par colonne pour vous automatiquement:

#columns .column { 
    float: left; 
    width: 33%; 
} 

<div id="columns"> 
    <div class="column"> 
    <fieldset>...</fieldset> 
    <fieldset>...</fieldset> 
    <fieldset>...</fieldset> 
    </div> 
    <div class="column"> 
    <fieldset>...</fieldset> 
    <fieldset>...</fieldset> 
    <fieldset>...</fieldset> 
    </div> 
    <div class="column"> 
    <fieldset>...</fieldset> 
    <fieldset>...</fieldset> 
    <fieldset>...</fieldset> 
    </div> 
</div>

#columns { 
    column-count: 3 
    /* Just covering all bases here. Not sure which browsers actually support this */ 
    -webkit-column-count: 3 
    -moz-column-count: 3 
    -o-column-count: 3 
    -ms-column-count: 3 
} 

<div id="columns"> 
    <fieldset>...</fieldset> 
    <fieldset>...</fieldset> 
    <fieldset>...</fieldset> 
    <fieldset>...</fieldset> 
    <fieldset>...</fieldset> 
    <fieldset>...</fieldset> 
    <fieldset>...</fieldset> 
    <fieldset>...</fieldset> 
    <fieldset>...</fieldset> 
</div>

Source

2010-11-22 15:36:51 RoToRa

Pourquoi noyer div dans div? Vous feriez mieux d'imbriquer les divs dans les balises '
'. –

S'il vous plaît noter que la méthode B est un peu difficile, car il ne dispose pas de la pleine prise en charge du navigateur. – Damien

@Eric: C'est juste un exemple. Il se peut qu'il y ait plus d'éléments d'entrée en dehors des colonnes. – RoToRa

Questions connexes

Formulaire avec panneaux utilisant css

Répondre

Questions connexes