Многие атрибуты в HTML являются общими для всех элементов, однако большинство из них являются специфическими для данного элемента или группы элементов. Это так называемые частные атрибуты.
Атрибуты обеспечивают дополнительную информацию об элементе, при этом они всегда определяются в начальном теге независимо от того парный это тег, либо одиночный. Пользователь не может создавать свои собственные атрибуты или использовать значения, не определенные cпецификацией, так как это может вызывать проблемы правильной интерпретации.
Рассмотрим частные атрибуты подробнее с примерами.
Тег <div> и его частные атрибуты
Пример простого синтаксиса:
|
Текст вне тега div {text = "Текст из переменной"} <div> <p>{text}</p> <p>Текст внутри тега div</p> </div> |
По умолчанию, при использовании тега <div> используется вся доступная область экрана, изменить размер можно с помощью атрибута width.
Пример простого синтаксиса:
|
<div> <div style="border:1dp solid red;"> Ширина по-умолчанию </div> <div style="border:1dp solid green; width:50%;"> Ширина: 50% </div> <div style="border:1dp solid blue; width:100dp;"> Ширина: 100dp; </div> </div> |
Как видим из примера, блоки <div> размещаются вертикально.
Для тега <div> доступны следующие частные атрибуты:
| Атрибут | Значение | Описание |
| align | right, left, center | горизонтальное выравнивание |
| bgcolor | цвет | определяет цвет фона блока/контейнера |
| border | числовое значение | определяет толщину границ блока/контейнера |
| height | числовое значение | определяет высоту |
| maxlines | числовое значение | обрезает текст до N строк |
Еще пример использования атрибутов тега <div>:
|
<div height="20%" align="center" bgcolor="lightblue" border="2dp">Текст в блоке с голубым фоном и черной рамкой.</div> |
Тег <p> и его частные атрибуты
Представляет собой абзац. По умолчанию использует всю доступную область родительского элемента.
Пример синтаксиса:
|
<div> Текст без тега<p>without align</p><p align="left">align = left</p><p align="center" height="20%" bgcolor="lightblue" border="2dp">align = center</p><p align="right">align = right</p><p width="50%" align="right">align = right width = 50%</p>Текст без тега </div> |
Для тега <p> доступны следующие частные атрибуты:
| Атрибут | Значение | Описание |
| align | right, left, center | горизонтальное выравнивание |
| bgcolor | цвет | определяет цвет фона блока/контейнера |
| border | числовое значение | определяет толщину границ блока/контейнера |
| height | числовое значение | определяет высоту |
| width | числовое значение | ширина элемента |
| maxlines | числовое значение | обрезает текст до N строк |
Теги <table>, <tr>, <td> и их частные атрибуты
Элемент <table> служит контейнером для элементов, определяющих содержимое таблицы.
Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов <tr> и <td>.
Внутри <table> допустимо использовать такие атрибуты как bgcolor, cellpadding, cols, valign (подробнее см. список ниже).
Теги <table>, <tr>, <td> обязательно должны иметь завершающий тег.
Тег <td> предназначен для создания одной ячейки таблицы. Данный тег должен размещаться внутри контейнера <tr>, который в свою очередь располагается внутри тега <table>.
Пример простого синтаксиса:
|
<div> <table width="100%"> <tr> <td style="border:1dp solid green;" width="50%"> Блок слева </td> <td style="border:1dp solid blue;"> Блок справа </td> </tr> </table> </div> |
Для тега <table> доступны следующие частные атрибуты:
Пример использования несколько атрибутов сразу:
|
<div width="100%" height="50%"> <table width="100%" cols="4" align="right" valign="top" cellpadding="5dp" cellspacing="5dp" border="3dp" bgcolor="#87cefa"> <tr> <td height="25%">1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td height="25%">5</td> <td>6</td> <td>7</td> <td>8</td> </tr> <tr> <td height="25%">9</td> <td>10</td> <td>11</td> <td>12</td> </tr> <tr> <td height="25%">13</td> <td>14</td> <td>15</td> <td>16</td> </tr> </table> </div> |
Тег <tr> используется для разметки строки таблицы. Обязательно должен иметь завершающий тег. Данный тег не имеет дополнительных атрибутов.
Тег <td> используется внутри тега <tr> и определяет ячейку таблицы. Обязательно должен иметь завершающий тег.
Для данного тега доступны следующие частные атрибуты:
| Атрибут | Значение | Описание |
| align | right, left, center | горизонтальное выравнивание в данной ячейке |
| bgcolor | цвет | определяет цвет фона ячейки |
| border | числовое значение | определяет толщину границ ячеек |
| colspan | любое целое положительное число больше 1 | определяет горизонтальное количество ячеек для объединения |
| height | числовое значение | определяет высоту ячейки |
| rowspan | любое целое положительное число больше 1 | определяет вертикальное количество ячеек для объединения |
| valign | top, middle, bottom | вертикальное выравнивание содержимого ячеек |
| width | числовое значение | определяет ширину ячейки |
Пример использования нескольких атрибутов сразу:
|
<div width="100%"> <table width="100%" border="1dp" align="center"> <tr> <td height="15%" valign="bottom" border="2dp" bgcolor="#87cefa">1</td> <td colspan="2" rowspan="2">2, 3<br />6, 7</td> <td>4</td> </tr> <tr> <td height="15%">5</td> <td>8</td> </tr> <tr> <td height="15%">9</td> <td>10</td> <td>11</td> <td>12</td> </tr> </table> </div> |
Тег <input> и его частные атрибуты
Тег используется для создания полей ввода текста, чекбоксов или выпадающих списков.
У данного тега есть основной атрибут type с помощью которого определяется, как будет выглядеть поле ввода.
Рассмотрим на следующем примере:
|
<div><div> <table col="2" width="100%"style="vertical-align:middle;"> <tr> <td width="30%" height="10%"> type="text" </td> <td width="70%" align= "center"> <input type="text" width="90%" tabIndex="1" placeholder="Поле ввода текста" value="{textValue}" datatype="char" /> </td> </tr> <tr> <td width="30%" height="10%"> type="checkbox" </td> <td width="70%" align= "center"> <input type="checkbox" tabIndex="2" value="{chkbxValue}" onselected ="1" /> </td> </tr> <tr> <td width="30%" height="10%"> type="combobox" </td> <td width="70%" align= "center"> <input type="combobox" width="90%" tabIndex="3" placeholder ="пусто" source="СтрокиДляОтображения.Rows" listItemDisplayTemplate ="{Item.Наименование}" SelectedValue="{listValue}" onselected="Возврат" /> </td> </tr> </table> </div> |
Для создания полей ввода текста доступны следующие частные атрибуты:
| Атрибут | Значение | Описание |
| enabled | true/false, булевая переменная или выражение | отвечает за доступность элемента |
| placeholder | текстовая строка, если внутри строки предполагается пробел, ее необходимо брать в двойные или одинарные кавычки | подсказка, отображаемая в тот момент, когда поле ввода пусто (android) |
| datatype | decimal, string, datetime | тип данных, которые можно вводить |
| height | числовое значение | определяет высоту поля ввода |
| format | типы входных данных в формате HTML | принимает regExp, по которому происходит валидация введенных данных |
| width | числовое значение | определяет ширину поля ввода |
| value | имя переменной |
переменная для занесения вводимой строки value = {var} |
| mask | содержит маску для текстовых/числовых данных |
содержит в себе шаблон, с помощью которого формируются вводимые данные Синтаксис: mask = "##.##" — для ввода чисел mask = "__.__" — для ввода букв и чисел |
| onBlur | имя действия | указывает действие, на которое будет выполнен переход по смене фокуса (для ОС Android) |
| id/class/style | см. Общие атрибуты | работают по стандартным правилам HTML |
Пример использования нескольких атрибутов сразу:
|
<div width="100%"> <table cols="2" width="100%" style="vertical-align:middle;"> <tr> <td width="30%" height="10%" >Ввод текста</td> <td width="70%" ><input type="text" value="{textValue}" width="100%" onBlur="Возврат" placeholder="введите текст" /></td> </tr> <tr> <td height="10%">Введено:</td> <td>{textValue:(0)}</td> </tr> <tr> <td>Ввод числа</td> <td> <input type="text" value="{decimalValue}" enabled="false" width="100%" onblur="Возврат" placeholder="введите число" datatype="decimal" /></td> </tr> <tr> <td height="10%">Введено:</td> <td>{decimalValue:(0)}</td> </tr> <tr> <td>Ввод 3х цифр</td> <td><input type="text" value="{formatValue}» width="100%" onblur="Возврат" placeholder="введите число" format="[0-9]{3}" datatype="decimal" /></td> </tr> <tr> <td height="10%">Введено:</td> <td>{formatValue:(0)}</td> </tr> </table> </div> |
Пример использования атрибутов mask и pattern:
|
<div width="100%"> <table cols="2" width="100%" style="vertical-align:middle;"> <tr> <td width="30%" height="10%" >Ввод текста по маске</td> <td width="70%" > <input type="text" value="{maskValue}" width="100%" onBlur="Возврат" placeholder="введите текст" mask="___, ___" /></td> </tr> <tr> <td height="10%">Введено:</td> <td>{maskValue:(0)}</td> </tr> <tr> <td>Ввод номера телефона</td> <td> <input type="text" value="{numValue}" width="100%" onblur="Возврат" placeholder="введите число» mask="+7(###)-###-##-##» /></td> </tr> <tr> <td height="10%">Введено:</td> <td>{numValue:(0)}</td> </tr> <tr> <td>Ввод даты</td> <td><input type="text" value="{dateValue}" width="100%" onblur="Возврат" placeholder="введите дату" pattern="dd.MM.yy" datatype="datetime" /></td> </tr> <tr> <td height="10%">Введено:</td> <td>{dateValue:(0)}</td> </tr> </table> </div> |
Для чекбокса доступны следующие частные атрибуты:
| Атрибут | Значение | Описание |
| value | для переключателей уникально определяет каждый элемент, с тем, чтобы клиентская или серверная программа могла однозначно установить, какой пункт выбрал пользователь |
переменная для занесения вводимой строки value = {var} |
| id/class/style | см. Общие атрибуты | работают по стандартным правилам HTML |
Пример использования нескольких атрибутов сразу:
|
<div width="100%" > <table cols="2" width="100%" style="vertical-align:middle;" > <tr> <td width="70%" height="10%">Параметр 1</td> <td width="30%"><input type="checkbox" value="{par1}" onblur="Возврат" /></td> </tr> <tr> <td width="70%" height="10%">Значение:</td> <td width="30%">{par1:True;False}</td> </tr> <tr> <td width="70%" height="10%">Параметр 2</td> <td width="30%"><input type="checkbox" value="{par2}" onblur="Возврат" /></td> </tr> <tr> <td width="70%" height="10%">Значение:</td> <td width="30%">{par2:True;False}</td> </tr> <tr> <td width="70%" height="10%">Параметр 3</td> <td width="30%"><input type="checkbox" value="{par3}" onblur="Возврат" /></td> </tr> <tr> <td width="70%" height="10%">Значение:</td> <td width="30%">{par3:True;False}</td> </tr> </table> </div> |
Для комбобокса доступны следующие частные атрибуты:
| Атрибут | Значение | Описание |
| enabled | true|false | отвечает за доступность элемента |
| height | числовое значение | определяет высоту поля ввода |
| width | числовое значение | определяет ширину поля ввода |
| value | является атрибутом без значения |
атрибут, в котором указывается переменная для занесения выбранной строки Синтаксис: value="{var}" |
| onSelected | имя действия | указывает действие, на которое будет осуществлен переход после выбора элемента выпадающего списка (для ОС Android) |
| source | источник элементов для показа |
атрибут, который используется для получения коллекции строк. Синтаксис: source = "ItemsCollection". Для того, чтобы передать строки таблицы, необходимо явно (!) указывать строки, т. е.: source = "TableName.Rows" |
| ListItemDisplayTemplate | если строка имеет поле ShortName, то будет отображаться оно, если нет — поле Имя | позволяет выбрать столбец коллекции для отображения. Синтаксис: ListItemDisplayTemplate = "{Item.ColumnName}" |
| ListItemValueTemplate | шаблон вычисления значения поля | при выборе позиции списка позволяет произвести вычисление с полем выбранной строки. Синтаксис: ListItemValueTemplate = "{Item.ColumnName = 3+2}" |
| id|class|style | см. Общие атрибуты | работают по стандартным правилам HTML |
|
<div> <input type="combobox" source="СтрокиДляОтображения.Rows" value ="{SelPos}" listItemDisplayTemplate ="{Item.Наименование}" listItemValueTemplate="{Item.ВычисляемоеПоле=Item.Код+Item.Характеристика}" onselected="Возврат" /><br /> {SelPos.Наименование:Выбрано: (0), }{SelPos.Код:(0), }{SelPos.ВычисляемоеПоле:(0)}<br /> </div> |
Тег <img> и его частные атрибуты
Тег используется для отображения изображения. Обязательно должен иметь завершающий тег. С помощью данного тега можно отображать изображения из файла-ресурсника, хранимого в папке «Documents» базы, по ссылке, через переменную из таблицы/по ссылке.
Для отображения изображений доступны следующие частные атрибуты:
| Атрибут | Значение | Описание |
| width | числовое значение | определяет ширину изображения |
| height | числовое значение | определяет высоту изображения |
| size | stretch | атрибут, с помощью которого указывается поведение формирования ширины/высоты изображения. В качестве параметра можно указать только stretch (о других неизвестно). Если указано stretch — в случае если изображение больше по ширине или высоте оно будет подогнано под максимальный допустимый размер, ограниченный версткой |
| tcolor | цвет | |
| id/class/style | см. Общие атрибуты | работают по стандартным правилам HTML |
|
<div width="100%"> <img size="stretch">bigPict.jpg</img> <img width="50%" height="30%">bigPict.jpg</img> </div> |
Тег <button> и его частные атрибуты
Тег используется для создания кнопки. Обязательно должен иметь завершающий тег. С помощью данного тега можно создать дополнительные кнопки управления в различных частях окон (в верхней/нижней части/в списке/в самом окне/etc).
Единственное визуальное действие. в котором нельзя использовать данный тег — действие «Меню», так как оно само состоит из кнопок.
Для создания полей ввода текста доступны следующие частные атрибуты:
| Атрибут | Значение | Описание |
| width | числовое значение | определяет ширину поля ввода |
| height | числовое значение | определяет высоту поля ввода |
| enabled | нет | указывает, доступна кнопка для нажатия или нет |
| direction |
указывается название действия для перехода или: cancel — отмена действия finishproc — возврат на одно действие return — завершить операцию abort — прервать операцию |
указывает, переход на какое действие будет совершен при нажатии кнопки |
| visible | отображает элемент как видимый | указывает, отображать кнопку или нет |
| type="submit" | кнопка для отправки данных формы на сервер | означает, что по нажатию кнопки будет обработаны введенные в поля ввода данные и произведен переход на следующее действие. Раньше, для выполнения подобного действия использовался атрибут direction="ok" |
| id|class|style | см. Общие атрибуты | работают по стандартным правилам HTML |
| command |
Пример: command="x = y + 1" |
позволяет производить простые вычисления без перехода на другое действие |
Пример использования атрибутов кнопок:
|
<div height="100%" width="100%"> <button width="100%" height="10%" command="value=2+3">Расчет</button><br /> <button width="75%" enabled="false">Недоступная кнопка</button><br /> <button width="100%" visible="false">Невидимая кнопка</button><br /> <button width="50%" height="15%" direction="finishproc">Назад</button><button width="50%" height="15%" direction="Далее" type="submit">Подтвердить</button> </div> |
Тег <a> и его частные атрибуты
Тег используется для создания гиперссылки на другое действие в алгоритме. Обязательно должен иметь закрывающий тег. Сама ссылка определяется через атрибут href. С помощью атрибута style можно задать цвет гиперссылки.
Пример синтаксиса:
|
<a href="//www.cleverence.ru/support/2565/Название операции» style="color:#800080">ссылка</a> |
Цвет можно задавать как через hex коды цветов, так и по названию цвета.
|
style="color:purple"
Атрибут size задаёт размер текста гиперссылки <a href="//www.cleverence.ru/support/2565/Название операции" size="18">ссылка</a>
Для создания ссылки можно вместо атрибута href иcпользовать атрибут direction <a direction="Название операции">ссылка</a> |
