Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате
Форум программистов > Вёрстка веб-сайтов > Оформление форм DIV-блоками


Автор: artuska 8.8.2007, 14:01
Собственно, вопрос - как, не используя таблицы, оформить форму в строки и колонки.

Пример с таблицами:
Код

<form>
  <table>
   <tr>
     <td width="150">Имя:</td><td><input type="text" /></td>
   </tr>
   <tr>
     <td width="150">Фамилия:</td><td><input type="text" /></td>
   </tr>
  </table>
</form>


А теперь с ДИВ'ами - как? Типа вместо табличного TD делать ДИВ и с помощю float:left; ставить их в ряд, а с помощю clear:right; - делать строки? По-моему это геморрой. Если нет нормальных вариантов - я разочаруюсь в жизни.

Код

<div style="float:left; width:150px;">Имя:</div><div style="margin-left:150px;"><input type="text" /></div> //этот DIV растянется на всю оставшуюся ширину и не надо никаких clear:right; чтобы перейти на другую строку
<div style="float:left; width:150px;">Фамилия:</div><div style="margin-left:150px;"><input type="text" /></div>


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

Автор: japanes 8.8.2007, 14:11
Цитата(artuska @  8.8.2007,  13:01 Найти цитируемый пост)
На данный этап жизни ничего лучше, кроме таблиц, для верстки форм, не нахожу

а и не надо.

Автор: artuska 8.8.2007, 14:17
Цитата(japanes @  8.8.2007,  14:11 Найти цитируемый пост)
а и не надо.


А вдруг я заблуждаюсь - скилл-то надо прокачивать в познаниях...
Любопытство также...

(Просто есть такой сайтик http://www.uptonic.com/ (щас закрыт) - так вот там была форма оформлена без таблиц <p> тэгами. Сегодня хотел разобраться, захожу, а сайт не работает, гы. Собсно, по-этому и создал тему.)

Автор: japanes 8.8.2007, 14:22
artuska, вообще оформление форм на любителя, кому нужны острые ощущения, тот делает через блоки. главное не понимать под понятием «семантическая верстка» — верстка блоками.

Автор: artuska 8.8.2007, 14:37
Хочу адреналина!!!

И хочу узнать, как ИЗЯЩНО оформить DIV'ами форму.

Автор: japanes 8.8.2007, 15:47
artuska, изящно, это как (для лучшего понимания вопроса можно приложить скриншот того, что надо получить)?

Автор: artuska 9.8.2007, 09:25
Получить надо обычную форму.
Изящно - это минимум хтмл и цсс кода.

В таблицах - куча TR'ок и TD'шек, в DIV'ах - куча стилей с float'ами. Очень длинные и громоздкие коды получаются, когда в форме много полей для заполнения. Пока ничего с этим поделать не могу.

Автор: japanes 9.8.2007, 11:39
artuska, тогда таблица ;)

Автор: artuska 9.8.2007, 11:43
Во-во! Так уже и делаю...

Автор: Uratsakidogi 9.8.2007, 11:43
Код

<form>
<div><label for="name">Имя:</label><input id="name" type="text"></div>
Повторить нужное количество раз.
</form>

Код

/*клирим див*/
form div:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}
form div {display: inline-block;}
/*\*/
* html form div {height: 1%;}
form div {display: block;}
/**/
/*закончили клиринг*/
form label, form input {
    float: left;
}
form label {
    width: 150px;
    /*остальные стили по вкусу*/
}

По идее, этого должно быть достаточно. Клиринг можно использовать и более компактный, например через overflow: hidden.

Автор: artuska 10.8.2007, 12:00
Ура! smile 
Вот это мне и нужно!!!
Переделал форму на ДИВ-блоки!!!
Код

   #form
    {
     width: 250px;
    }

   #form div
    {
     display: block;
     clear: both;
    }

   #form label, #form input
    {
     float: left;
    }
   #form label { width: 90px; text-align: left; margin-top: 8px; }
   #form input { width: 155px; }

Код

     <div id="form">

      <form method="POST" action="">
       <div><label for="login">Login:</label><input type="text" name="login" id="login" value="" /></div>
       <div><label for="password">Password:</label><input type="password" name="password" id="password" value="" /></div>
      </form>

     </div>


Ничего лишнего - и хтмл и цсс код ооочень компактен!
Uratsakidogi, спасиба!

Автор: SamDark 10.8.2007, 14:45
artuska, 
Код

#form
    {
     width: 250px;
    }

   #form label
    {
     display: block;   
     margin-top: 8px;
    }

   #form input { width: 155px; }


Код

      <form id="form" method="POST" action="">
          <label>Login:<input type="text" name="login" id="login" value="" /></label>
          <label>Password:<input type="password" name="password" id="password" value="" /></label>
      </form>

Автор: artuska 11.8.2007, 19:46
Цитата(SamDark @  10.8.2007,  14:45 Найти цитируемый пост)
<label>Login:<input type="text" name="login" id="login" value="" /></label>


Нет, такая конструкция валидность не пройдет. Да если и забить на валидность - структура абсолютно нелогична.

Думаю, тема может быть закрыта.

Автор: Uratsakidogi 11.8.2007, 23:24
Да нет, должна пройти. Просто в некоторых браузерах все равно может потребоваться указать id и for.

Автор: SamDark 13.8.2007, 12:00
artuska, 
Пройдёт. Попробуйте.

Uratsakidogi, 
В Firefox, Opera, IE точно не требуется.

Автор: Georgich 20.1.2008, 12:51
Привет всем! Начал верстать под DataLife div'ами. Столкнулся с такой проблемой. Не могу понять, почему в "подвале" (оно же ft) не отображается фон. Вот код в CSS и HTML :
Код
html{color:#000;background:#FFF;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input
,textarea,p,blockquote,th,td{margin:0;padding:0;}
body {font:11px arial,helvetica,clean,sans-serif;}table {font-size:inherit;font:100%;}pre,code,kbd,samp,tt{font-family:monospace;line-height:100%;}
body{text-align:center;}
#ft{clear:both;text-align: center;padding: 4px 0;background-image: url("{THEME}/images/19.jpg");}
#doc{margin:auto;text-align:left;width:57.69em;min-width:750px; border-left:1px solid #000; border-right:1px solid #000;background:#ffffff}
.yui-b{position:relative;}
#yui-main .yui-b{position:static;}
#yui-main{width:100%;}
.yui-t2 #yui-main{float:right;margin-left:-25em;}
.yui-t2 .yui-b{float:left;width:13.8456em;}
.yui-t2 #yui-main .yui-b{margin-left:14.8456em;}
#yui-main .yui-b{float:none;width:auto;}
#bd:after{content:".";display:block;height:0;clear:both;visibility:hidden;}

Код
<body background="{THEME}/images/bg.jpg">
{AJAX}
<div id="doc" class="yui-t2">
<div id="hd">
<img src="{THEME}/images/1.jpg" width=236 height=124>
</div>
<div id="bd">
<div id="yui-main">
<div class="yui-b">
{content}
</div>
</div>
<div class="yui-b">
{topnews}
</div>
</div>
<div id="ft">
<b>текст</b>
</div>
</div>
</body>

Надеюсь на ваше помощь. СпасибО!

Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)