HTML Elements

Nette\Utils\Html class helps with HTML generation.

All examples expect the following using to be set:

use Nette\Utils\Html;

$el = Html::el('img'); // creates <img> element
$el->src = 'image.jpg'; // sets src attribute
echo $el; // prints <img src="image.jpg" />

echo $el->getName(); // returns 'img', element's name
echo $el->isEmpty(); // returns TRUE, as <img> is in fact empty

Change or read HTML attributes is possible over object properties. Setting the value to NULL or removing it with unset() function removes the attribute.

echo $el->src; // prints 'image.jpg'
unset($el->src); // or $el->src = NULL; - removes src attribute

The very same output can be achived by calling chained methods (fluent interfaces):

// <img src="image.jpg" alt="photo" />
echo Html::el('img')->src('image.jpg')->alt('photo');

Attributes may be set in bulk, even when creating the element:

$el = Html::el('input type=text class="red important"');

$el = Html::el('input', array(
    'type' => 'text',
    'class' => array('red', 'important'),
));

$el->addAttributes(array( // bulk attributes set
    'value' => $val,
    'required' => TRUE,
));

An automatic Cross Site Scriptingu (XSS) protection is an important feature:

echo Html::el('input')->value('<script>alert()</script>');
// <input value="&lt;script&gt;alert()&lt;/script&gt;" />

An attributes' value may not be only a string, but might as well be a boolean or an array.

$checkbox = Html::el('input')->type('checkbox');
$checkbox->checked = TRUE; // <input type="checkbox" checked="checked" />
$checkbox->checked = FALSE; // <input type="checkbox" />

// with arrays
$el->class[] = $active ? 'active' : NULL; // attribute equal to NULL is ignored
$el->class[] = 'top';
// alternatively $el->class['top'] = TRUE; or $el->class('top', TRUE);

$el->style['color'] = 'green'; // or $el->style('color', 'green');
$el->style['display'] = 'block';

echo $el;
// <input class="active top" style="color: green; display: block" />

Metod href() helps chaining URL:

echo Html::el('a')->href('index.php', array(
    'id' => 10,
    'lang' => 'en',
));
// <a href="index.php?id=10&amp;lang=en"></a>

HTML5 supports so called data attributes for user-set data:

<img src="img.jpg" data-max-size="500x300" />

Such values are usually used in JavaScript. They do work in all browsers.

Class Html has a direct support for these attributes:

$el = Html::el('img');
$el->data['max-size'] = '500x300';
// nebo
$el->data('max-size', '500x300');

Elements' content

Textual content may be set with setText() or setHtml() or while creating an element:

echo Html::el('a')->href('#')->setText('link<br>');
// <a href="#">link&lt;br&gt;</a>

echo Html::el('a')->href('#')->setHtml('link<br>');
// <a href="#">link<br></a>

echo Html::el('strong', 'Nette');
// <strong>Nette</strong> or equal output with setText()

Getting textual content of element is done with getText() or getHtml().

More Html element may be nested under each other:

$el = Html::el('div');

// inserts new element <strong> into <div>
$strong = $el->create('strong', 'Nette');
// or $el->create('strong')->setText('Nette')

// inserts an Html object into <div>
$el->add( Html::el('br') ); // $el[] = Html::el('br');

echo $el; // <div><strong>Nette</strong><br /></div>

// inserts a string into <div>
$el->add('<i>Yes!</i>'); // unlike setHtml() this does not remove the current content of $el

$el->insert(0, Html::el('span')); // prepends new Html node to first position

Method removeChildren() removes all child nodes.

Child nodes can be access as though it was an array, including iteration:

echo $el[2]; // <br />

foreach ($el as $child) { ... }

echo count($el); // 4 - amount of child nodes

Generating HTML output

The easiest way to print an HTML element is either using echo function or type-cast it string. Opening and closing tags may be printed separately:

$el = Html::el('div class=header');

echo $el; // <div class="header"></div>
$s = (string) $el; // inserts <div class="header"></div> into $s
echo $el->startTag(); // <div class="header">
echo $el->endTag(); // </div>

Output format is set by static property Html::$xhtml. Defaults to TRUE, ie. XHTML valid output:

$el = Html::el('input')->disabled(TRUE);
echo $el; // <input disabled="disabled" />
Html::$xhtml = FALSE;
echo $el; // <input disabled>

---

Login to submit a comment