Как создать форму ввода данных с несколькими столбцами, используя CSS в Asp.Net?
-
04-10-2019 - |
Вопрос
При преобразовании настольного приложения в веб-приложение я столкнулся со своим невежеством при попытке реализовать форму ввода данных с несколькими столбцами с использованием CSS.Я решил избегать использования таблиц для такого рода задач, и хотя я нашел хороший ссылка что касается размещения формы ввода данных, я не могу найти ничего, что применимо к макетам с несколькими столбцами, подобным этому:
Кто-нибудь может указать мне правильное направление?
Решение
Вот снимок экрана, пожалуйста, обратите внимание, как я продемонстрировал порядок вкладок с цифрами:
Пожалуйста, обратите внимание, что RedFilter's
ответ имеет другой порядок вкладок, который я продемонстрировал на скриншоте ниже:
(приведенный ниже код дополнен ASP.NET средствами проверки подлинности)
CSS (удобный для всех браузеров)
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"> *</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"> *</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"> *</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"> *</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"> *</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"> *</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"> *</asp:RequiredFieldValidator>
<p>
</div>
Другие советы
Есть много способов сделать это - я дал вам очень удивленное решение ниже. Существует ряд твиков, которые необходимо сделать, чтобы сделать этот кросс-браузер, совместимый, улучшающий интервал и т. Д., Но это должно дать вам основную идею о том, как вы можете выложить элементы:
<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>
Так же, как предыдущие ответы, я предлагаю вам:
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>
Демо по адресу: http://www.davidrhysthomas.co.uk/so/formcols.html.
Это решение использует CSS3 ( nth-child(odd)
), который ограничивает дружелюбие кросс-браузера (хотя работает в Opera, Chrome, Safari и Firefox на Ubuntu 10.04), поэтому для IE-дружелюбие вам придется явно добавить имя класса для каких столбцов, которые вы хотели float: right
.