Как создать желаемую форму с помощью CSS, не используя слишком много тегов div?

Question

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

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

<h1>Join our Mailing List</h1>
{exp:freeform:form form_name="cogar_form" return="thankyou" mailing_list="cogar_mail"  required="first_name|last_name|street_address|city|state|postalcode|email|phone1" notify="kneeskeh81@herkimer.edu" template="cogar_mail"}
<ul>                        
<li><label for="first_name">First Name</label>
<br /><input type="text" id="first_name" name="first_name" value="" maxlength="30" /></li>

<li><label for="last_name">Last Name</label>
<br /><input type="text" id="last_name" name="last_name" value="" maxlength="30" /></li>

<li><label for="street">Street Address</label>
<br /><input type="text" id="street" name="street_address" value="" size="40" maxlength="50"/></li>

<li><label for="city">City/Town</label>
<br /><input type="text" id="city" name="city" value="" /></li>

<li><label for="state">State</label> <br /><select id="state" name="state">
<option>&nbsp;</option>
<option value="AL">AL</option>
<option value="AK">AK</option>
<option value="AZ">AZ</option>
<option value="AR">AR</option>
<option value="CA">CA</option>
<option value="CO">CO</option>
<option value="CT">CT</option>
<option value="DE">DE</option>
<option value="FL">FL</option>
<option value="GA">GA</option>
<option value="HI">HI</option>
<option value="ID">ID</option>
<option value="IL">IL</option>
<option value="IN">IN</option>
<option value="IA">IA</option>
<option value="KS">KS</option>
<option value="KY">KY</option>
<option value="LA">LA</option>
<option value="ME">ME</option>
<option value="MD">MD</option>
<option value="MA">MA</option>
<option value="MI">MI</option>
<option value="MN">MN</option>
<option value="MS">MS</option>
<option value="MO">MO</option>
<option value="MT">MT</option>
<option value="NE">NE</option>
<option value="NV">NV</option>
<option value="NH">NH</option>
<option value="NJ">NJ</option>
<option value="NM">NM</option>
<option value="NY">NY</option>
<option value="NC">NC</option>
<option value="ND">ND</option>
<option value="OH">OH</option>
<option value="OK">OK</option>
<option value="OR">OR</option>
<option value="PA">PA</option>
<option value="RI">RI</option>
<option value="SC">SC</option>
<option value="SD">SD</option>
<option value="TN">TN</option>
<option value="TX">TX</option>
<option value="UT">UT</option>
<option value="VT">VT</option>
<option value="VA">VA</option>
<option value="WA">WA</option>
<option value="WV">WV</option>
<option value="WI">WI</option>
<option value="WY">WY</option>
</select></li>

<li><label for="postalcode">Zip</label>
<br /><input type="text" id="postalcode" name="postalcode" value="" size="11" maxlength="5" /></li>

<li><label for="email">Email</label>
<br /><input type="text" id="email" name="email" value="" maxlength="30" /></li>

<li><label for="phone">Phone Number</label>
<br /><input type="text" id="phone" name="phone1" value="" size="15" maxlength="14" /></li>
</ul>   
<p style="clear:left;"><input type="submit" name="submit" value="Submit" /></p>
{/exp:freeform:form}

У кого-нибудь есть идеи, как это можно правильно оформить, не используя слишком много тегов div?

Answer 1

Если вы пытаетесь сделать это без большого количества div, вы можете сделать что-то вроде этого:

 <style type="text/css">
       fieldset
       {
        width: 550px;
        padding: 5px 0;

       }             
       fieldset label
       {
          float: left;
          width: 200px;
          margin-right: 15px;
       }
    </style>
    <fieldset>
    <label for="first_name">First Name</label>
    <input type="text" id="first_name" name="first_name" />

. , , и т. д. css выше приведёт к тому, что метки будут хорошо совмещаться с элементами формы. Примечание: Марк Херд опубликовал свой ответ, когда я набирал его - его ответ похож на мой

Answer 2

Просто используйте таблицы. Почему мы подвергаем себя этой пытке?

Answer 3

Я рекомендую посмотреть на источник из нескольких форм по адресу Wufoo . Например, Экстренный контакт и медицинская информация имеют много полей, выстроенных по-разному. Как и в вашем примере, для разделения групп полей автор использовал <li> элементов. Я не понимаю, почему вы не можете заменить их на <div> с, если хотите.

Я не думаю, что автор использует "слишком много" <div> с любыми средствами.

Также хорошо: по горизонтали и поле форма от Человек в синем . Творческое использование <label> с.

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

Answer 4

Я не уверен, что именно вы подразумеваете под "каждая строка должна правильно совмещаться друг с другом". Если вы имеете в виду, что каждая метка должна быть правильно над входным элементом, это относительно просто, но требует вложенных элементов div:

<div class="field">
  <div class="label"><label for="firstname">First Name</label></div>
  <div class="control"><input id="firstname" name="firstname" type="text"></div>
</div>

Если вы думаете, что это слишком много слоев div, вы явно никогда не смотрели на источник движка блогов. :)

Затем вы можете расположить свои поля div любым удобным для вас способом.

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

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

Answer 5

Вы можете уменьшить количество тегов div, используя соответствующие теги формы, такие как fieldsets и label:

<form>
    <fieldset>
        <legend>Fieldset title</legend>
        <label for="input-id">
            <span class="label-title">Label Title <span class="required">*</span></span>
            <input id="input-id" class="text-input" type="text" name="input-name" />
        </label>
        <!-- etc -->
    </fieldset>

    <ul class="form-buttons">
        <li><input type="submit" value="Submit" /></li>
    </ul>
</form>

Этот подход предоставит вам широкий спектр хуков: сама форма, набор полей, легенда, метка, заголовок метки, требуемый заголовок текста, ввод определенного типа, кнопки формы (как сгруппированные, так и отдельные) и т. Д.

С помощью всех этих хуков вы можете очень эффективно настроить проверку CSS и JavaScript.

Answer 6

Я рекомендую BluePrint . Это рамки CSS. Если вы научитесь правильно его использовать, это значительно уменьшит количество необходимых вам дивов.

Answer 7

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

Тебе вообще не нужны какие-либо div, если смотреть на вышеперечисленные вещи.