Различает способ структурировать вводимые HTML-данные и метки в форме

Question

Мне интересно, каковы наилучшие решения для структурирования html-формы с метками и входами.

Я делал это с float: left для метки и float: right для входов.И каждая строка окружена блоком clear: both.

Но я не думаю, что эти свойства CSS были созданы для чего-то подобного ..

Так, каковы другие решения?Таблицы?

Answer 1

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

Чтобы дублировать то, что у вас есть, вы можете сделать это:

<label for='textbox'>Label</label><input type='text' id='textbox' />

И затем этот css:

label { display: inline-block; width: 100px; }

Это позволит метке остаться на той же строке, что и во входном элементе, но отодвинет ее на соответствующее расстояние.

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

Answer 2

Форма разметки и CSS всегда будет персональным выбором.Конечно, с точки зрения CSS есть некоторые права и недостатки семантически и технически, но, безусловно, не существует одного (или даже нескольких) «правильных» методов.

Мое личное предпочтение - использовать меткуслева и содержат мои входные данные в списках, которые я лично считаю более семантическими, чем теги div или p.

HTML:

<form>
    <fieldset>
        <ol>
            <li>
                <label for="input1">Label 1</label>
                <input type="text" name="input1" id="input1">
            </li>
            <li>
                <label for="input2">Label 2</label>
                <input type="text" name="input2" id="input2">
            </li>
            <li>
                <label for="input3">Label 3</label>
                <input type="text" name="input3" id="input3">
            </li>
        </ol>

        <button type="submit">Submit</button>
    </fieldset>
</form>

CSS:

li {
    clear: left;
    margin-bottom: 10px;    
}

label {
    float: left; /* You could use "display: inline-block;" instead. */
    margin-right: 10px;
    width: 80px;
}

Answer 3

таблиц также является решением.

также, Div с 2 внутренними div (слева и справа)

или 1 div с обоими элементами с плавающей запятой: слева с margin-left.