Comment créer la forme de saisie de données à plusieurs colonnes en utilisant le CSS dans Asp.Net?

StackOverflow https://stackoverflow.com/questions/3754964

  •  04-10-2019
  •  | 
  •  

Question

Lors de la conversion d'une application de bureau à une application web, j'ai couru à travers mon ignorance en essayant de mettre en œuvre un formulaire de saisie de données à plusieurs colonnes en utilisant le CSS. Je suis résolu à éviter d'utiliser des tables pour ce genre de chose, et pendant que je trouve un bon

point Quelqu'un peut-moi dans la bonne direction?

Était-ce utile?

La solution

Voici une capture d'écran, s'il vous plaît Remarquez comment je démontrais l'ordre de tabulation avec des chiffres:

text alt

S'il vous plaît noter que la réponse de RedFilter's a un autre ordre de tabulation, que je l'ai démontré dans la capture d'écran ci-dessous:

text alt

(code ci-dessous avec validateurs ASP.NET)

CSS (navigateur cross amical)

p
{
 margin:1em 0;
}
label
{
 float:left;
 width:5em;
 text-align:right;
 margin-right:0.5em;
}
input[type="text"]
{
 width: 10em;
}
.left-column, right-column
{
 float:left;
}
.left-column
{
 margin-right:1em;
}​
.textarea-label
{
 float:none;
}
textarea
{
 height:5em;
 width:35em;
}​

HTML

<div class="left-column">
  <p>
    <label for="tbDepartment">Department:</label>
    <asp:TextBox ID="tbDepartment" runat="server" MaxLength="255" />
    <asp:RequiredFieldValidator ID="valDepartment" TabIndex="-1" runat="server" ControlToValidate="tbDepartment">&nbsp;*</asp:RequiredFieldValidator>
  </p>
  <p>
    <label for="tbFund">Fund:</label>
    <asp:TextBox ID="tbFund" runat="server" MaxLength="255" />
    <asp:RequiredFieldValidator ID="valFund" TabIndex="-1" runat="server" ControlToValidate="tbFund">&nbsp;*</asp:RequiredFieldValidator>
  </p>
  <p>
  <label for="tbProgram">Program:</label>
    <asp:TextBox ID="tbProgram" runat="server" MaxLength="255" />
    <asp:RequiredFieldValidator ID="valProgram" TabIndex="-1" runat="server" ControlToValidate="tbProgram">&nbsp;*</asp:RequiredFieldValidator>
  </p>
</div>
<div class="right-column">
  <p>
    <label for="tbProject">Project:</label>
    <asp:TextBox ID="tbProject" runat="server" MaxLength="255" />
    <asp:RequiredFieldValidator ID="valProject" TabIndex="-1" runat="server" ControlToValidate="tbProject">&nbsp;*</asp:RequiredFieldValidator>
  </p>
  <p>
    <label for="tbSpeedKey">Speed Key:</label>
    <asp:TextBox ID="tbSpeedKey" runat="server" MaxLength="255" />
    <asp:RequiredFieldValidator ID="valSpeedKey" TabIndex="-1" runat="server" ControlToValidate="tbSpeedKey">&nbsp;*</asp:RequiredFieldValidator>
  </p>
  <p>
    <label for="tbAward">Award:</label>
    <asp:TextBox ID="tbAward" runat="server" MaxLength="255" />
    <asp:RequiredFieldValidator ID="valAward" TabIndex="-1" runat="server" ControlToValidate="tbAward">&nbsp;*</asp:RequiredFieldValidator>
  </p>
</div>​
<div>
  <p>
    <label class="textarea-label" for="taProjectDesc">Project Description:</label>
  </p>
  <p>
    <asp:TextBox ID="taProjectDesc" runat="server" TextMode="MultiLine" />
    <asp:RequiredFieldValidator ID="valProjectDesc" TabIndex="-1" runat="server" ControlToValidate="taProjectDesc">&nbsp;*</asp:RequiredFieldValidator>
  <p>
</div>

Autres conseils

Il y a plusieurs façons de le faire - Je vous ai donné une solution de très dépouillé ci-dessous. Il y a un certain nombre de réglages que vous devez faire pour rendre ce compatible multi-navigateur, améliorer l'espacement, etc., mais cela devrait vous donner l'idée de base à la façon dont vous pouvez poser les éléments sur:

<html>
    <head>
        <style>
            body {
                font-family:arial;
                font-size: 0.8em;
            }
            div.form p {
                clear: both;
            }
            div.form label {
                float: left;
                width: 10em;
            }
            div.form input[type="text"] {
                float: left;
                width: 16em;
                font-family:arial;
                font-size: 1.0em;
            }
            div.form textarea {
                width: 52em;
                font-family:arial;
                font-size: 1.0em;
            }
        </style>
    </head>
    <body>
        <div class="form">
            <p>
                <label>Department:</label>
                <input type=text>
                <label>Project:</label>
                <input type=text id=Project name=Project>
            </p>
            <p>
                <label>Fund:</label>
                <input type=text id=FundID name=FundID>
                <label>SpeedKey:</label>
                <input type=text id=SpeedKey name=SpeedKey>
            </p>
            <p>
                <label>Program:</label>
                <input type=text id=Program name=Program>
                <label>Award:</label>
                <input type=text id=Award name=Award>
            </p>
            <p>
                <label>Project Description:</label>
            </p>
            <p>
                <textarea id=ProjectDescription name=ProjectDescription></textarea>
            </p>
        </div>
    </body>
</html>

Il en va de même que les réponses précédentes, je vous offre:

CSS:

fieldset {
    clear: both;
    padding: 0.4em;
    border: 1px solid #000;
    width: 80%;
    min-width: 600px;
    margin: 1em auto;
    overflow: hidden;

}

ul {
    width: 48%;
    border: 1px solid #ccc;
    margin: 0.5em;
    }

ul:nth-child(odd) {
    float: right;
    }

label {
    display: inline-block;
    width: 30%;
    text-align: right;
}

html:     

<fieldset>
<ul>
    <li><label for="fieldOne">Field One:</label> <input type="text" id="fieldOne" name="fieldOne" /></li>
    <li><label for="fieldTwo">Field Two:</label> <input type="text" id="fieldTwo" name="fieldTwo" /></li>
</ul>

<ul>
    <li><label for="fieldThree">Field Three:</label> <input type="text" id="fieldThree" name="fieldThree" /></li>
    <li><label for="fieldFour">Field Four:</label> <input type="text" id="fieldFour" name="fieldFour" /></li>
</ul>
</fieldset>

<fieldset>
    <input type="submit" value="Submit" />
</fieldset>

</form>

Démo à: http://www.davidrhysthomas.co.uk/so/formCols.html

Cette solution utilise-t-CSS3 (la nth-child(odd)), ce qui limite sa convivialité inter-navigateur (bien que des œuvres dans Opera, Chrome, Safari et Firefox sur Ubuntu 10.04), donc pour IE convivialité que vous auriez à ajouter explicitement une classe nom selon la colonne (s) que vous vouliez float: right.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top