Форма макета с использованием CSS

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

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

Есть ли способ, которым я могу стилизовать формы, чтобы он автоматически выравнивал метки и входы независимо от того, как долго эти метки?

источник

2010-02-01 Dónal

+1: Это всегда ошибки меня. До сих пор мне приходилось записывать размер каждый раз. –

Если вы делаете по-настоящему табличный макет, нет ничего плохого в использовании '

'. – kennytm

@ KennyTM - табличный макет или нет. Таблицы должны использоваться для табличных данных, а не для макета. Автор вопроса даже признает это. – Finglas

ответ

-1

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

Если ваши формы настолько различны, что вы говорите, что они есть, то нет никакого другого способа сделать это, чем сделать пользовательские правила для каждого ...

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

источник

2010-02-01 04:31:39

Посмотрите на форму на левой от входа на этот URL http://www.blueprintcss.org/tests/parts/forms.html

Если поместить ярлык на 1 строку и поле ввода на другой линии, то вам не придется беспокоиться о расстановке меток , Стиль это немного больше вы будете иметь чистый и приятный web2.0 как форма

enter image description here

Приветствия

источник

2010-02-01 05:15:28 Phradion

+1 для этого. Если у вас будет очень длинная метка в одном поле, короткая одна в другой, то ее 2 столбца будут уродливыми, даже если вы используете таблицу. Сделайте 2 строки, пометьте в строке 1, поле формы в строке 2. Вам больше не нужно беспокоиться о длине этикеток. –

Ни один из этих макетов не сопоставим. – Greg

Ну предмет размещения метки выше или рядом с входом является отдельным обсуждением (я рекомендуем прочитать книгу Люка Вроблевского по теме: http://www.lukew.com/resources/articles/web_forms.html)

Укладка полотенец довольно тривиально. Прежде всего, вы хотите, чтобы вы маркировали свои формы семантически соответствующим образом. Это одно из основных преимуществ, которые позволяют вам теперь использовать CSS для компоновки вместо таблиц. Более подробно об этом см. Превосходную статью Apart Apart по теме: http://www.alistapart.com/articles/prettyaccessibleforms/

Теперь в вышеупомянутой статье автор использует свойство отображения, называемое встроенным блоком. Это довольно простой способ достижения аффекта. Просто введите:

label { 
    display: inline-block; 
    width: 120px; /* Specify the width that works for your design */ 
}

И ваши ярлыки будут иметь фиксированную длину со смежным с ними входом. Однако, если вы не указываете ширину и просто использовать:

label, input { 
    display: inline-block; 
}

Тогда ваши метки и входы и выстраиваются в линию «автомагически», как вы выразились. Проблема здесь не в технической проблеме, а в вопросе проектирования. Если вы не входите в вертикальное положение, это затруднит пользователю заполнение формы. Это еще одно соображение, о котором вы должны помнить, так как легче расположить ярлык и вводить таким образом, чем он предназначен для фиксированной ширины.

Другая проблема заключается в том, что встроенный блок не работает в определенных браузерах. Inline-block не является надежным в более старых версиях Firefox или IE.Поэтому я предпочитаю использовать альтернативный метод. Предположим, вы помечаете свои формы семантически соответствующим образом, используя список. Ну в таком случае вы могли бы иметь что-то вроде:

<form> 
    <fieldset> 
    <legend>Health information:</legend> 
    <ul> 
     <li><label>Height</label> <input type="text" size="3" /></li> 
     <li><label>Weight</label> <input type="text" size="3" /></li> 
    </ul> 
    </fieldset> 
</form>

В этом случае мы можем использовать фиксированную ширину и абсолютное позиционирование выстраиваться наши элементы смежно:

form li { 
    display: block; 
    padding: 2px; 
    position: relative; 
} 

/* The top and left position of 2px simulate 
    padding since we are using absolute positioning. */ 
form label { 
    display: block; 
    left: 2px; 
    position: absolute; 
    top: 2px; 
    width: 120px; 
} 

form input { 
    display: block; 
    margin-left: 125px; 
}

метка расположена по отношению к элемент списка, и вход переместится в сторону с левым полем. Однако есть проблема с этим методом. Этот метод будет работать только с жесткой кодировкой. Что еще более важно, многострочная метка не будет корректно очищаться. Таким образом, в этой ситуации мы можем использовать аналогичный подход, но использовать float и overflow. Таким образом, мы могли бы использовать этот альтернативный CSS на том же HTML разметке я показал ранее:

form li { 
    display: block; 
    overflow: hidden; /* This clears the floating element. */ 
    padding: 2px; 
} 

form label { 
    display: block; 
    float: left; 
    padding-right: 5px; 
} 

form input { 
    display: block; 
}

Теперь с помощью этого метода метка плавал слева от входа. Если вы не укажете ширину, метка будет такой же шириной содержимого, которое находится в ней (вплоть до точки его родительского узла в документе HTML). Устанавливая переполнение для скрытия на родительском объекте, нет необходимости очищать элемент. Этот метод будет работать с жестко кодированной шириной или унаследованным значением по умолчанию, который является width: auto.

Последнее, но не менее важное, если вы хотите использовать наиболее эффективный подход к форме (надписи на вставках), который, как оказалось, является стилем формы, который пользователи могут выполнить быстрее всего, только css, который вам нужен в порядке для достижения этой цели является:

label, input { 
    display: block; 
}

Еще одно замечание - с разметкой ваш HTML как таковой вы можете быть удивлены, обо всех тех элементов списка, создавая пункты маркированного и т.д. вы должны выбрать для включения сброса CSS в документе, обеспечить согласованность между браузерами. Я рекомендую Эрик Мейер:

http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/

источник

2010-02-01 06:10:21

Вопрос конкретно задает решения, где метки имеют произвольную длину. Это никоим образом не затрагивает эту проблему. –

А я вижу. Я сделаю некоторые изменения, чтобы исправить это. –

Опубликованные методы, хотя каждый делает то, что задает вопрос, если вы опустите правило для ширины. Теперь я объяснил это в решении, предоставляя также все три популярных метода для достижения этого стиля макета с помощью CSS и HTML. Кроме того, в ответах на вопросы, которые разработчик должен принимать при разработке форм таким образом. Кроме того, он ссылается на надлежащие методы для маркировки веб-форм в семантически подходящем HTML, поскольку в вопросе упоминается, что они переходят из табличных макетов. –

Личное мнение: использовать таблицу.

Каждый раз, когда вы пишете что-то вроде

label { 
    width: 150px; /* or whatever width */ 
}

тогда вы смесительного содержания и представления, так как значение метки можно вычислить, только если вы знаете, что он будет содержать, который идет вразрез с принципами семантические-CSS-пуристы.

источник

2010-02-01 13:28:51

Это совершенно неверно. Когда вы используете таблицу, вы смешиваете контент с презентацией. Вся причина, по которой мы имеем CSS, состоит в том, чтобы отделить это. Следовательно, макет контролируется путем указания ширины в файле CSS. Если вы используете таблицу. Макет управляется элементом таблицы, который теперь встроен в ваш контент. –

Я не сказал, что это не так. Я сказал, что * даже * со стилизованным ярлыком метки вы смешиваете контент с презентацией. Определения CSS не должны зависеть от того, что содержит поле, но они в этом случае. Таким образом, вы можете просто использовать таблицу, которая надежно работает во всех браузерах, делает то, что хочет OP, и только в нескольких строках кода. Таблицы могут быть оставлены, если CSS предложил альтернативы для * all * необходимости работать во всех браузерах без глупых хаков. –

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

<form> 
    <div id='labels'> 
     <div>Name: </div> 
     <div>Street:</div> 
     <div>This is a longer than usual label:</div> 
     <div>City:</div> 
    </div> 

    <div id='inputs'> 
     <div><input type="text"></div> 
     <div><input type="text"></div> 
     <div><input type="text"></div> 
     <div><input type="text"></div> 
    </div> 

</form>

И здесь правила CSS:

#labels { 
    float: left; 
} 

#labels div { 
    clear: left; 
    float: left; 
} 

#inputs { 
    float: left; 
} 

#inputs div { 
    clear: left; 
    float: left; 
} 

#labels div, #inputs div { 
    height: 30px; 
}

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

<div><label for='name'>Name: </div>

и здесь соответствующее поле ввода:

<div><input id='name' type="text"></div>

источник

2010-02-01 19:42:41 jdigital

+1: Немного подробный, но работает как шарм! –

Извините, но это не связывает метки и их значения. Они находятся в полностью разделенных divs, и их единственная ссылка является визуальной, если вы случайно разместите их рядом. Не существует «семантической» связи, и смысл вашего контента зависит от его представления. Выравнивание их тривиально, точка выравнивает их значимым образом. –

Это легко решить, и я отредактировал ответ соответствующим образом. – jdigital

Смежные вопросы