Оглавление

Создание двухколоночной формы с помощью CSS вместо таблиц

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

Форма в две колонки, созданная средствами CSS

Рис. 6.8. Форма в две колонки, созданная средствами CSS (DEMO)

  

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<title>Регистрация пользователей</title>
<meta http-equiv="content-type"
    content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="tablefree.css" />
</head>
<body>
<h1>Форма регистрации пользователей</h1>
<form method="post" action="tablefree.html">
  <div>
    <label for="fullname">Имя:</label>
    <input type="text" name="fullname" id="fullname" class="txt" />
  </div>
  <div>
    <label for="email">Email:</label>
    <input type="text" name="email" id="email" class="txt" />
  </div>
  <div>
    <label for="password1">Пароль:</label>
    <input type="password" name="password1" id="password1" class="txt" />
  </div>
  <div>
    <label for="password2">Повторите пароль:</label>
    <input type="password" name="password2" id="password2" class="txt" />
  </div>
  <div>
    <label for="level">Уровень членства:</label>
    <select name="level">
      <option value="silver">Серебро</option>
      <option value="gold">Золото</option>
    </select>
  </div>
  <div>
    <input type="submit" name="btnSubmit" id="btnSubmit" 
	       value="Зарегистрироваться!" class="btn" />
  </div>
</form>
</body>
</html>

 

h1 {
  font: 1.2em Arial, Helvetica, sans-serif;
}
input.txt {
  color: #00008B;
  background-color: #E3F2F7;
  border: 1px inset #00008B;
  width: 200px;
}
input.btn {
  color: #00008B;
  background-color: #ADD8E6;
  border: 1px outset #00008B;
}
form div {
  clear: left;
  margin: 0;
  padding: 0;
  padding-top: 0.6em;
}
form div label {
  float: left;
  width: 40%;
  font: bold 0.9em Arial, Helvetica, sans-serif;
}

 

Обсуждение
Перед нами пример создания типичной формы. Как мы уже смогли убедиться в начале главы, формы такой структуры обычно выполняются в виде таблицы, содержащей две колонки, в которой элемент ярлыка располагается в одной ячейке, а соответствующее ему поле – в другой:

<form method="post" action="textonly.html" id="form1">
  <table>
    <tr>
      <td><label for="fullname">Имя:</label></td>
      <td><input type="text" name="fullname" id="fullname" class="txt" /></td>
    </tr>
    <tr>
      <td><label for="email">Email:</label></td>
      <td><input type="text" name="email" id="email" class="txt" /></td>
    </tr>
    <tr>
      <td><label for="password1">Пароль:</label></td>
      <td><input type="password" name="password1" id="password1" class="txt" /></td>
    </tr>
    <tr>
      <td><label for="password2">Повторите пароль:</label></td>
      <td><input type="password" name="password2" id="password2" class="txt" /></td>
    </tr>
    <tr>
      <td><label for="level">Уровень членства:</label></td>
      <td><select name="level">
          <option value="silver">серебро</option>
          <option value="gold">золото</option>
        </select></td>
    </tr>
  </table>
  <p>
    <input type="submit" name="btnSubmit" id="btnSubmit" 
           value="Зарегистрироваться!" class="btn" />
  </p>
</form>


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

 

 

Форма, сверстанная без таблиц

Рис. 6.9. Форма, сверстанная без таблиц

 

<form method="post" action="tablefree.html">
  <div>
    <label for="fullname">Имя:</label>
    <input type="text" name="fullname" id="fullname" class="txt" />
  </div>
  <div>
    <label for="email">Email:</label>
    <input type="text" name="email" id="email" class="txt" />
  </div>
...


Чтобы созданная средствами CSS форма выглядела как таблица, не нужно вносить никаких изменений в HTML-разметку – достаточно всего лишь добавить простой CSS-код:

form div {
  clear: left;
  margin: 0;
  padding: 0;
  padding-top: 0.6em;
}
form div label {
  float: left;
  width: 40%;
  font: bold 0.9em Arial, Helvetica, sans-serif;
}


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

 

Поскольку свойство float «вытаскивает» элемент из обычного потока элементов документа, необходимо задать нашим блокам div свойство clear со значением left, чтобы каждый из них начинался прямо под ярлыком предшествующего элемента div. Кроме того, необходимо задать нашим блокам значение свойства padding-top, чтобы создать небольшой зазор между рядами, вот и все!

<< Меню >>  
Комментарии принадлежат их авторам. Мы не несем ответственности за их содержание.
Отправитель Нити