Сложная таблица форм против div - PullRequest
Новая
       4

Сложная таблица форм против div

6 голосов
/ 25 августа 2010

Я посмотрел в Интернете примеры реализации формы с использованием DIV, и все, что я вижу, - это довольно простые формы с одним столбцом. У меня есть довольно сложные формы, вот одна из них:

http://img835.imageshack.us/img835/8292/formn.jpg

Легко заставить его работать с таблицей (что я и делаю), единственная проблема, которую я имею, заключается в том, что иногда Мне не нужно отображать некоторые варианты и перемещать значения на одну строку вверх, чтобы избежать пропусков .

Я начал создавать некоторые формы, используя div, но они распадаются, когда я изменяю размер окна браузера, и выравнивать вещи нелегко.

Эта тема полезна: Плохо ли использовать теги таблиц при отображении форм в html? но это не решает некоторые из моих проблем.

Что бы вы предложили в качестве решения? Я могу динамически удалять / вставлять значения в таблицу или пытаться сделать DIV.

Ответы [ 3 ]

4 голосов
/ 25 августа 2010

Я бы пошел по маршруту Div. Если при применении плавающих элементов вы будете осторожны с шириной, на самом деле довольно просто заставить макеты работать должным образом при разных разрешениях экрана.

Вот несколько правил:

  1. Установите максимальную ширину вашей формы или элемента оболочки вашей формы. Если вы хотите разместить элементы в одном ряду, убедитесь, что их ширина не превышает эту ширину.
  2. Если вы добавляете горизонтальные отступы / поля к вашим плавающим элементам, помните, что они увеличивают общую ширину элемента.
  3. Избегайте смешивания в процентах ширины с отступами пикселей и полей. Примените процентную ширину к родительскому элементу и отступы / поля пикселей для дочернего элемента.
  4. Используйте очистку элементов между строками элементов, чтобы все выровнялось.

Что касается разметки, вы можете использовать элементы формы вместе с CSS для создания семантической структуры: 

<fieldset>
    <legend>Fieldset Title</legend>

    <label for="input1">Input 1:</label>
    <span><input type="text" id="input1" name="input1"/></span>
    <label for="input2">Input 2:</label>
    <span><input type="text" id="input2" name="input2"/></span>

    <br/>

    <label for="input3">Input 3:</label>
    <span><input type="text" id="input3" name="input3"/></span>
    <label for="input4">Input 4:</label>
    <span><input type="text" id="input4" name="input4"/></span>
</fieldset>

И CSS: 

fieldset {
    padding: 20px 0;
    width: 600px;
    margin: 0;
    border: 0;
}

legend {
    display: block;
    width: 100%;
    background: black;
    color: white;
}

label, span{
    float: left;
    width: 150px;
}

input {
    width: 120px;  
}

br {
    clear: both;  
}

Вы можете увидеть результат здесь .

1 голос
/ 25 августа 2010

Если это таблица фиксированной ширины, ее легко выложить с помощью div и float.Просто установите для каждой ширины именно то, что вам нужно.

Для таблицы с жидкостным макетом - а жидкостный макет в целом крайне желателен - гораздо сложнее организовать форму без отображения в стиле таблицы, потому что float и position не позволяют легко выполнять вычисления типа «эта ячейка составляет половину оставшейся ширины родительского элемента после выделения меток фиксированной ширины».

Так что в подобных случаях, что, безусловно, включает в себяВ виде формы из двух столбцов, которую вы разместили, значения table-* CSS display - это ваша единственная возможность.Если вы нацелены только на IE8 и другие современные браузеры, вы можете использовать divs и установить display: table-row et al в таблице стилей.Однако для совместимости с IE6-7 и другими более старыми / мобильными / нишевыми браузерами вам придется использовать реальные элементы <table> / <tr> / <td>, поскольку только современные браузеры поддерживают table-CSS независимо от элементов таблицы.

В этом нет ничего постыдного.Форма в любом случае является полубабличной, и практического недостатка в ее доступности нет, поскольку содержимое страницы остается упорядоченным надлежащим образом.

Примечание: для форм с разметкой жидкостей у вас также есть проблема изменения размеров полей ввода в соответствииродительский элемент.input { width: 100%; } почти делает это, но не совсем, потому что width не включает границы или отступы, которые вводятся по умолчанию.Вы можете использовать CSS3 box-sizing и его специфичные для браузера версии, чтобы обойти это для современных браузеров, но если вы хотите, чтобы он точно соответствовал пикселю в IE6-7, вам придется использовать отступы для родительских элементов.равно границе / заполнению дочернего поля ввода.

0 голосов
/ 25 августа 2010
  • General information - это какой-то список, точнее ключ> список значений - <dl />, вероятно, будет лучшей структурой для него
  • Issues values - это таблица,
  • Ratings - таблица,
  • И Redemption, и Indicators являются списками - неупорядоченные списки <ul />
...