Оглавление

Создание таблицы стилей для формы с возможностью ввода данных, как в электронную таблицу

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

 

Пользователи скорее всего хорошо знакомы с особенностями процесса ввода данных в электронные таблицы с помощью Microsoft Excel или аналогичных приложений. Это следует учитывать при дизайне интерфейса вашего приложения – схожесть интерфейса поможет пользователям быстро освоиться в новой среде. Возможно, следует создать таблицу и отформатировать ее с помощью CSS так, чтобы она напоминала электронную таблицу.

 

Рассмотрим следующий код:

<!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="spreadsheet1.css" />
</head>
<body>
<form method="post" action="spreadsheet.html">
<table class="formdata" summary="Эта таблица содержит форму для ввода данных 
                                 ежегодного дохода в течение 1999 - 2002 гг">
  <caption>Ежегодный Доход 1999 - 2002</caption>
  <tr>
    <th></th>
    <th scope="col">1999</th>
    <th scope="col">2000</th>
    <th scope="col">2001</th>
    <th scope="col">2002</th>
  </tr>
  <tr>
    <th scope="row">Гранты</th>
    <td><input type="text" name="grants1999" id="grants1999" /></td>
    <td><input type="text" name="grants2000" id="grants2000" /></td>
    <td><input type="text" name="grants2001" id="grants2001" /></td>
    <td><input type="text" name="grants2002" id="grants2002" /></td>
  </tr>
  <tr>
    <th scope="row">Пожертвования</th>
    <td><input type="text" name="donations1999" id="donations1999" /></td>
    <td><input type="text" name="donations2000" id="donations2000" /></td>
    <td><input type="text" name="donations2001" id="donations2001" /></td>
    <td><input type="text" name="donations2002" id="donations2002" /></td>
  </tr>
  <tr>
    <th scope="row">Инвестиции</th>
    <td><input type="text" name="investments1999" id="investments1999" /></td>
    <td><input type="text" name="investments2000" id="investments2000" /></td>
    <td><input type="text" name="investments2001" id="investments2001" /></td>
    <td><input type="text" name="investments2002" id="investments2002" /></td>
  </tr>
  <tr>
    <th scope="row">Сбор средств</th>
    <td><input type="text" name="fundraising1999" id="fundraising1999" /></td>
    <td><input type="text" name="fundraising2000" id="fundraising2000" /></td>
    <td><input type="text" name="fundraising2001" id="fundraising2001" /></td>
    <td><input type="text" name="fundraising2002" id="fundraising2002" /></td>
  </tr>
  <tr>
    <th scope="row">Продажи</th>
    <td><input type="text" name="sales1999" id="sales1999" /></td>
    <td><input type="text" name="sales2000" id="sales2000" /></td>
    <td><input type="text" name="sales2001" id="sales2001" /></td>
    <td><input type="text" name="sales2002" id="sales2002" /></td>
  </tr>
  <tr>
    <th scope="row">Разное</th>
    <td><input type="text" name="misc1999" id="misc1999" /></td>
    <td><input type="text" name="misc2000" id="misc2000" /></td>
    <td><input type="text" name="misc2001" id="misc2001" /></td>
    <td><input type="text" name="misc2002" id="misc2002" /></td>
  </tr>
  <tr>
    <th scope="row">Всего</th>
    <td><input type="text" name="total1999" id="total1999" /></td>
    <td><input type="text" name="total2000" id="total2000" /></td>
    <td><input type="text" name="total2001" id="total2001" /></td>
    <td><input type="text" name="total2002" id="total2002" /></td>
  </tr>
</table>
<div>
	<input type="submit" name="btnSubmit" id="btnSubmit" 
			value="Добавить данные" />
</div>
</form>
</body>
</html>

 

 

table.formdata {
	border: 1px solid #5F6F7E;
	border-collapse: collapse;
	margin: 1em 0 2em 0;
}
table.formdata th {
	border: 1px solid #5F6F7E;
	background-color: #E2E2E2;
	color: #000000;
	text-align: left;
	font-weight: normal;
	padding: 0.2em 0.4em 0.2em 0.4em;
	margin: 0;
}
table.formdata td {
	margin: 0;
	padding: 0;
	border: 1px solid #E2E2E2;
}
table.formdata input {
	width: 80px;
	padding: 0.2em 0.4em 0.2em 0.4em;
	margin: 0;
	border-width: 0;
	border-style: none;
}

На рис. 6.15 показана полученная форма, очень похожая на электронную таблицу.

 

Форма, напоминающая электронную таблицу

Рис. 6.15. Форма, напоминающая электронную таблицу

 

Обсуждение
Наша задача состоит в создании формы, внешне напоминающей электронную таблицу, такую как таблица Excel, изображенная на рис. 6.16.

 

 Просмотр электронной таблицы в Excel

Рис. 6.16. Просмотр электронной таблицы в Excel

 

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

 

Для достижения такого эффекта прежде всего нужно создать форму внутри структурированной таблицы, используя элементы заголовка (th), где необходимо, и добавив элемент caption и атрибут summary, чтобы она была доступна альтернативным устройствам. Полный код данной таблицы был представлен выше. Перед тем как мы добавили CSS-код, она выглядела, как показано на рис. 6.17.

 

Вид формы до применения таблицы стилей

 

Рис. 6.17. Вид формы до применения таблицы стилей


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

<table class="formdata" summary="Эта таблица содержит форму для ввода данных 
                                 ежегодного дохода в течение 1999 - 2002 гг">


Для данного класса определена рамка толщиной в один пиксел сине-серого цвета, и свойству border-collapse задано значение collapse:

table.formdata {
	border: 1px solid #5F6F7E;
	border-collapse: collapse;
	margin: 1em 0 2em 0;
}


Далее зададим стиль для заголовков колонок и рядов таблицы, т. е. для тега <th>. Для этого достаточно обратиться ко всем элементам th, расположенным в таблице класса formdata:

table.formdata th {
	border: 1px solid #5F6F7E;
	background-color: #E2E2E2;
	color: #000000;
	text-align: left;
	font-weight: normal;
	padding: 0.2em 0.4em 0.2em 0.4em;
	margin: 0;
}

 

Вид формы после применения стилей

Рис. 6.18. Вид формы после применения стилей для элементов table и th

 

Для создания редактируемой таблицы необходимо скрыть рамку полей формы и добавить рамку ячейкам таблицы. Поскольку в таблице только элементы input, для которых нужно задать стиль, являются текстовыми полями, мы можем легко обратиться ко всем элементам input этой таблицы через класс formdata; это позволит избежать необходимости добавления классов ко всем текстовым полям.

 

Добавим рамку для элемента td и зададим свойству border элемента input значение 0. Зададим ширину элемента input, поскольку нам известно, что вводимые данные не требуют много места. Затем зададим внутренние отступы, чтобы вводимый текст не приближался вплотную к краю поля:

table.formdata td {
	margin: 0;
	padding: 0;
	border: 1px solid #E2E2E2;
}
table.formdata input {
	width: 80px;
	padding: 0.2em 0.4em 0.2em 0.4em;
	margin: 0;
	border-width: 0;
	border-style: none;
}


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

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