Выравниваем все элементы формы по левому краю

Здравствуйте. Сегодня мы будем выравнивать, как поля, так и их названия по левому краю. Для этого мы будем использовать CSS-таблицы и небольшой jQuery-скрипт. Что ж, для начала просмотрите демо урока и скачайте необходимые файлы для его выполнения:

Шаг 1. Каркас полей формы

Для начала, мы создадим основу полей нашей формы. Собственно, для примера я взял три поля. Примерный код конструкции полей формы я привожу ниже. Вы можете его использовать и в своей работе:


<div>
<label for="txtName" class="fieldLabel">Имя: </label> 
<input typ="text" ID="txtName" class="fieldInput" /> 
</div><div>
<label for="txtEmail" class="fieldLabel">E-mail: </label> 
<input typ="text" ID="txtEmail" class="fieldInput" /> 
<br />
</div><div>
<label for="txtWeb" class="fieldLabel">Веб-сайт: </label> 
<input typ="text" ID="txtWeb" class="fieldInput" /> 
</div>

Кстати, использование тегов div для отступа между полями здесь обязательно!

Шаг 2. Подключение библиотеки jQuery

Теперь подключим библиотеку jQuery к нашему файлу. Сделаем это следующим образом:


<script type="text/javascript" src="js/jquery.js"></script>

Шаг 3. Подключение каскадных таблиц.

Далее, как Вы уже поняли, нам нужно подключить каскадные таблицы стилей. Использовать стилей мы будем совсем немного и поэтому разместим их сразу между тегами <head> и </head>:


<style type="text/css">label, input[type="text"]{    
float:left;    
display:block;
}
label
{
    
margin-right: 5px;
}
.field{    
width:100%;    
overflow:auto;    
margin:5px 0px;
}
</style>

Шаг 4. Вставка основного jQuery-кода.

Остался последний этап, в котором мы вставим основной jQuery-скрипт, играющий основную роль в выравнивании полей и их названий. Размещать его мы будем перед закрытием тега head, сразу после подключения нашего фреймворка. Ну, собственно, вот и этот код:


<script type="text/javascript">$(document).ready(function() {    
var max = 0;    
$("label").each(function(){        
if ($(this).width() > max)            
max = $(this).width();        
});    
$("label").width(max);
});
</script>

Заключение.

Вот, собственно, и все. Думаю, этот урок пришелся Вам по душе. До новых встреч!

С искренним уважением, Максим Курочкин

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.jankoatwarpspeed.com
Перевел: Максим Курочкин
Урок создан: 9 Июля 2009
Просмотров: 23343
Правила перепечатки


5 последних уроков рубрики "Для сайта"

  • Эффекты блочного раскрытия

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

  • 15 полезных .htaccess сниппета для сайта на WordPress

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

  • 20 бесплатных тем для WordPress в стиле Material Design

    Material Design — это набирающий обороты тренд от Google. В данной подборке собраны бесплатные темы для WordPress, выполненные в этом популярном стиле.

  • 20 сайтов с креативным MouseOver эффектом

    Эффекты на то и существуют чтобы впечатлять наших посетителей. В этой подборке собрано несколько десятков ресурсов, чьи создатели очень постарались впечатлить своих посетителей.

  • 45+ бесплатных материалов для веб дизайнеров за август 2016

    Под конец месяца предлагаем ознакомиться с набором бесплатных материалов для веб дизайнеров за прошедший месяц.

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 9 Июля 2009 19:47
    positive
    Да уж...проще табличку с невидимой границей сделать, чем подключать jquery. Он грузится пол дня...
  • 10 Июля 2009 10:16
    Виталий
    А у меня в IE7 все поля формы в одну горизонтальную линию, а последнее поле ещё и ниже остальных.
  • 12 Июля 2009 01:58
    МаксимКурочкин
    positive, хорошо, я сделаю урок , где будет табличная верстка без jQuery Виталий, для Вас и для всех пользователей IE7 сделаю, так, чтобы все нормально отображалось
  • 12 Июля 2009 23:15
    Dimka
    positive, согласен :) намного проще, быстрей и грузится лучше :)
  • 15 Июля 2009 19:03
    МихаилГорюнов
    всё бред, можно блоками или таблицей!
^ Наверх ^