You are browsing the unmaintained documentation for old Nette 2.0. See documentation for current Nette.

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 achieved 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>