Введение

Статичный класс Nemiro\UI\Html (далее Html) позволяет генерировать элементы управления HTML.

Практически все методы этого класса принимают параметр $htmlAttributes, который позволяет задать набор любых параметров/атрибутов генерируемому элементу управления. Например:

<?=Nemiro\UI\Html::TextBox('username', NULL, array('maxlength' => '20', 'class' => 'form-control', 'placeholder' => 'Input your name'))?>
<input type="text" name="username" id="username" maxlength="20" class="form-control" placeholder="Input your name">

Одной из проблем работы с элементами формами является необходимость ручного восстановления данных, если форма не будет принята сервером (например, при наличии ошибок в данных). Статичный класс Html реашает эту проблему и, после отправки формы, все указанные значения будут автоматически восстанавливаться.

Пример формы

Попробуйте заполнить и отправить представленную форму. После перезагрузки страницы, все введенные значения будут автоматически восстановлены (это работает только в PHP версии этого сайта, в HTML - нет, т.к. статичная копия сайта не имеет серверного кода).








Label

При размещении label требуется указать текст надписи.

<?=Nemiro\UI\Html::Label('Simple label')?>
<label>Simple label</label>

Если требуется привязать label к элементу управления, то во втором параметре можно указать идентификатор этого элемента.

<input type="checkbox" name="parentId" id="parentId" /> 
<?=Nemiro\UI\Html::Label('click me', 'parentId')?>
<input type="checkbox" name="parentId" id="parentId" /> 
<label for="parentId">click me</label>

CheckBox

Для размещения CheckBox потребуется указать имя элемента управления. По этому имени можно получить значение элемента, после отправки формы на сервер.

<?=Nemiro\UI\Html::CheckBox('checkbox1')?>
<input type="checkbox" name="checkbox1" id="checkbox1" value="true" />

По умолчанию, параметр value имеет значение true, но можно указать собственное значение, как показано в следующем примере.

<?=Nemiro\UI\Html::CheckBox('checkbox1', 'anyvalue')?>
<input type="checkbox" name="checkbox1" id="checkbox1" value="anyvalue" />

При помощи метода Label можно добавить подпись к CheckBox.

<?=Nemiro\UI\Html::Label('click me', 'checkbox123')?>
<?=Nemiro\UI\Html::CheckBox('checkbox123', 'anyvalue')?>
<label for="checkbox123">click me</label>
<input type="checkbox" name="checkbox123" id="checkbox1" value="anyvalue" />

Для связи надписи с CheckBox, идентификатор (в данном случае, checkbox123) должен быть одинаковым для Label и CheckBox.

CheckBoxList

Чтобы создать список CheckBox, можно использовать метод CheckBoxList, который принимает имя группы и данные для построения списка.

Список элементов представляет ассоциативный массив, который должен содержаться параметры value и title, которые будут использоваться при построении элементов CheckBox в списке.

<?=Nemiro\UI\Html::CheckBoxList
(
  'myCheckboxList', 
  array
  (
    array('value' => '1', 'title' => 'First item'), 
    array('value' => '2', 'title' => 'Second item'), 
    array('value' => '3', 'title' => '...'), 
    array('value' => '123', 'title' => 'etc.')
  )
)?>
<input type="checkbox" name="myCheckboxList[]" id="myCheckboxList0" value="1" /> 
<label for="myCheckboxList0">First item</label><br />
<input type="checkbox" name="myCheckboxList[]" id="myCheckboxList1" value="2" /> 
<label for="myCheckboxList1">Second item</label><br />
<input type="checkbox" name="myCheckboxList[]" id="myCheckboxList2" value="3" /> 
<label for="myCheckboxList2">...</label><br />
<input type="checkbox" name="myCheckboxList[]" id="myCheckboxList3" value="123" /> 
<label for="myCheckboxList3">etc.</label>



RadioButton

Метод RadioButton очень похож на CheckBox.

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

<?=Nemiro\UI\Html::RadioButton('gender', 'male')?>
<?=Nemiro\UI\Html::Label('Мужчина', 'male')?>
<br />
<?=Nemiro\UI\Html::RadioButton('gender', 'female')?>
<?=Nemiro\UI\Html::Label('Женщина', 'female')?>
<hr />
<?=Nemiro\UI\Html::RadioButton('country', 'Russia')?>
<?=Nemiro\UI\Html::Label('Russia', 'Russia')?><br />
<?=Nemiro\UI\Html::RadioButton('country', 'China')?>
<?=Nemiro\UI\Html::Label('China', 'China')?><br />
<?=Nemiro\UI\Html::RadioButton('country', 'USA')?>
<?=Nemiro\UI\Html::Label('USA', 'USA')?><br />
<?=Nemiro\UI\Html::RadioButton('country', 'Germany')?>
<?=Nemiro\UI\Html::Label('Germany', 'Germany')?><br />
<?=Nemiro\UI\Html::RadioButton('country', 'France')?>
<?=Nemiro\UI\Html::Label('France', 'France')?>
<input type="radio" name="gender" id="male" value="true" /> 
<label for="male">Мужчина</label><br />
<input type="radio" name="gender" id="female" value="true" /> 
<label for="female">Женщина</label>
<hr />
<input type="radio" name="country" id="Russia" value="true" /> 
<label for="Russia">Russia</label><br />
<input type="radio" name="country" id="China" value="true" /> 
<label for="China">China</label><br />
<input type="radio" name="country" id="USA" value="true" /> 
<label for="USA">USA</label><br />
<input type="radio" name="country" id="Germany" value="true" /> 
<label for="Germany">Germany</label><br />
<input type="radio" name="country" id="France" value="true" /> 
<label for="France">France</label>





RadioButtonList

Принцип построения списка RadioButton ничем не отличается от CheckBox.

<?=Nemiro\UI\Html::RadioButtonList
(
  'myRadioList', 
  array
  (
    array('value' => '1', 'title' => 'Meat'), 
    array('value' => '2', 'title' => 'Fish'), 
    array('value' => '3', 'title' => 'Green-fodder')
  )
)?>
<input type="radio" name="myRadioList[]" id="myRadioList0" value="1" /> 
<label for="myRadioList0">Meat</label><br />
<input type="radio" name="myRadioList[]" id="myRadioList1" value="2" /> 
<label for="myRadioList1">Fish</label><br />
<input type="radio" name="myRadioList[]" id="myRadioList2" value="3" /> 
<label for="myRadioList2">Green-fodder</label>


TextBox

Метод TextBox позволяет разместить однострочное текстовое поле. Также можно использовать вспомогательные методы Password и Hidden, для размещения текстовых полей одноименного типа.

<?=Nemiro\UI\Html::TextBox('textbox1', 'Hello world!')?><br />
<?=Nemiro\UI\Html::Password('password1', '123123')?>
<?=Nemiro\UI\Html::Hidden('hidden1', 'test')?>
<input type="text" name="textbox1" id="textbox1" value="Hello world!" /><br />
<input type="password" name="password1" id="password1" value="123123" />
<input type="hidden" name="hidden1" id="hidden1" value="test" />

TextArea

Для формирования многострочных текстовых полей предназначен метод TextArea.

<?=Nemiro\UI\Html::TextArea('textarea1', NULL, NULL, array('placeholder' => 'Default area', 'cols' => 50))?><br />
<?=Nemiro\UI\Html::TextArea('textarea2', NULL, 10, array('placeholder' => '10 rows area', 'cols' => 50))?>
<textarea name="textarea1" id="textarea1" placeholder="Default area" cols="50"></textarea><br />
<textarea name="textarea2" id="textarea2" rows="10" placeholder="10 rows area" cols="50"></textarea>

При помощи метода DropDownList можно создать всплывающий список.

Элементы списка формируются по аналогии с элементами для CheckBoxList или RadioButtonList.

<?=Nemiro\UI\Html::DropDownList
(
  'country', 
  array
  (
    'Russia', 
    'Belarus', 
    'Kazakhstan', 
    'China', 
    'India', 
    'Brazil', 
    'Germany', 
    'Italy', 
    'France', 
    'United Kingdom', 
    'USA'
  )
)?>

<?=Nemiro\UI\Html::DropDownList
(
  'color', 
  array
  (
    array('value' => 'white', 'title' => 'White'), 
    array('value' => 'blue', 'title' => 'Blue', 'selected' => true), 
    array('value' => 'red', 'title' => 'Red')
  )
)?>
<select name="country" id="country">
  <option >Russia</option>
  <option value="1">Belarus</option>
  <option value="2">Kazakhstan</option>
  <option value="3">China</option>
  <option value="4">India</option>
  <option value="5">Brazil</option>
  <option value="6">Germany</option>
  <option value="7">Italy</option>
  <option value="8">France</option>
  <option value="9">United Kingdom</option>
  <option value="10">USA</option>
</select>	

<select name="color" id="color">
  <option value="white">White</option>
  <option value="blue" selected="selected">Blue</option>
  <option value="red">Red</option>
</select>

ListBox

Для построения многострочных списков можно использовать метод ListBox, который по сути является аналогом методу DropDownList, но помимо прочего, позволяет указать число отображаемых в списке строк.

<?=Nemiro\UI\Html::ListBox
(
  'color', 5,
  array
  (
    array('value' => 'white', 'title' => 'White'), 
    array('value' => 'blue', 'title' => 'Blue', 'selected' => true), 
    array('value' => 'red', 'title' => 'Red')
  )
)?>
<select name="color" id="color">
  <option value="white">White</option>
  <option value="blue" selected="selected">Blue</option>
  <option value="red">Red</option>
</select>

Pagination

Метод Pagination позволяет сформировать список страниц.

Для размещения списка страниц, как минимум, потребуется указать номер ткущей страницы и общее число записей.

<?=Nemiro\UI\Html::Pagination($_GET['page'], 50)?>
<ul class="pagination">
  <li class="active"><a href="/elements.php?page=1">1</a></li>
  <li><a href="/elements.php?page=2">2</a></li>
</ul>

Дополнительно можно указать URL для построения ссылок для списка страниц. Если URL не будет указан, то будет использоваться адрес текущей страницы.

По умолчанию, при построении ссылок для списка страниц, из URL удаляются все параметры. Это сделано для исключения появления неправильных ссылок (чтобы не засорять поисковый индекс и недопустить выбивание сайта из индекса). Существует возможность указать список допустимых в URL параметров. В следующем примере показано, как это сделать.

<?=Nemiro\UI\Html::Pagination($_GET['page'], 500, 25, 10, NULL, 'page=', array('id'))?>