HTML Helpers¶
Overview¶
This namespace contains components that help with the generation of HTML.
Attributes¶
The Phalcon\Html\Attributes is a wrapper of Phalcon\Collection. It also contains two more methods render()
and __toString()
. render()
uses Phalcon\Tag internally to render the attributes that a HTML element has. These HTML attributes are defined in the object itself.
The component can be used on its own if you want to collect HTML attributes in an object and then _render) them (return them as a string) in a key=value
format.
This component is used internally by Phalcon\Forms\Form to store the attributes of form elements.
Breadcrumbs¶
A common piece of HTML that is present in many web applications is the breadcrumbs. These are links separated by a space or by the /
character usually, that represent the tree structure of an application. The purpose is to give users another easy visual way to navigate throughout the application.
An example is an application that has an admin
module, an invoices
area and a view invoice
page. Usually, you would select the the admin
module, then from the links you will choose invoices
(list) and then clicking on one of the invoices in the list, you can view it. To represent this tree like structure, the breadcrumbs displayed could be:
Phalcon\Html\Breadcrumbs offers functionality to add text and URLs. The resulting HTML when calling render()
will have each breadcrumb enclosed in <dt>
tags, while the whole string is enclosed in <dl>
tags.
Methods¶
Adds a new crumb.In the example below, add a crumb with a link and then add a crumb without a link (normally the last one)
Clears the crumbs Returns the separator used for the breadcrumbs Removes crumb by url.In the example below remove a crumb by URL and also remove a crumb without an url (last link)
Renders and outputs breadcrumbs HTML. The template used is:<dl>
<dt><a href="Hyperlink">Text</a></dt> /
<dt><a href="Hyperlink">Text</a></dt> /
<dt>Text</dt>
</dl>
<dt></dt>
tags. The whole collection is wrapped in <dl></dl>
tags. You can use them in conjunction with CSS to format the crumbs on screen according to the needs of your application. The default separator between the crumbs is /
. You can set a different one if you wish using this method. Returns the internal breadcrumbs array TagFactory¶
Phalcon\Html\TagFactory is a component that generates HTML tags. This component creates a new class locator with predefined HTML tag classes attached to it. Each tag class is lazy loaded for maximum performance. To instantiate the factory and retrieve a tag helper, you need to call newInstance()
.
<?php
use Phalcon\Escaper;
use Phalcon\Html\TagFactory;
$escaper = new Escaper();
$factory = new TagFactory($escaper);
$anchor = $factory->newInstance('a');
Name | Description |
---|---|
a | Phalcon\Html\Helper\Anchor - <a> tag |
aRaw | Phalcon\Html\Helper\AnchorRaw - <a> tag raw |
body | Phalcon\Html\Helper\Body - <body> tag |
button | Phalcon\Html\Helper\Button - <button> tag |
close | Phalcon\Html\Helper\Close - close tag |
element | Phalcon\Html\Helper\Element - any tag |
elementRaw | Phalcon\Html\Helper\ElementRaw - any tag raw |
form | Phalcon\Html\Helper\Form - <form> tag |
img | Phalcon\Html\Helper\Img - <img> tag |
label | Phalcon\Html\Helper\Label - <label> tag |
textarea | Phalcon\Html\Helper\TextArea - <textarea> tag |
Helpers¶
All helpers that are used by the Phalcon\Html\TagFactory are located under the Phalcon\Html\Helper
namespace. You can create each of these classes individually if you wish to, or you can use the tag factory as shown above. Other than the *Raw
helpers, if text is required by the helper, it will be automatically escaped using Phalcon\Escaper.
NOTE
The code and output below has been formatted for readability
a
¶
Phalcon\Html\Helper\Anchor creates anchor HTML tags. The component accepts the href
as a string, the text
as a string and optionally an array with all the attributes that the anchor needs.
<?php
use Phalcon\Escaper;
use Phalcon\Html\Helper\Anchor;
$escaper = new Escaper();
$anchor = new Anchor($escaper);
$options = [
'class' => 'my-class',
'name' => 'my-name',
'id' => 'my-id',
];
echo $anchor('/myurl', 'click<>me', $options);
// <a href="/myurl"
// id="my-id"
// name="my-name"
// class="my-class">
// click<>me
// </a>
aRaw
¶
Phalcon\Html\Helper\AchorRaw creates raw anchor HTML tags, i.e. the text will not be escaped. The component accepts the href
as a string, the text
as a string and optionally an array with all the attributes that the anchor needs.
<?php
use Phalcon\Escaper;
use Phalcon\Html\Helper\AnchorRaw;
$escaper = new Escaper();
$anchor = new AnchorRaw($escaper);
$options = [
'class' => 'my-class',
'name' => 'my-name',
'id' => 'my-id',
];
echo $anchor('/myurl', 'click<>me', $options);
// <a href="/myurl"
// id="my-id"
// name="my-name"
// class="my-class">
// click<>me
// </a>
body
¶
Phalcon\Html\Helper\Body creates a <body>
tag. The component accepts optionally an array with all the attributes that the anchor needs.
<?php
use Phalcon\Escaper;
use Phalcon\Html\Helper\Body;
$escaper = new Escaper();
$anchor = new Body($escaper);
$options = [
'class' => 'my-class',
'id' => 'my-id',
];
echo $anchor($options);
// <body id="my-id" class="my-class">
NOTE
This helper creates only the opening <body>
tag. You will need to use the Close
helper to generate the closing </body>
tag.
button
¶
Phalcon\Html\Helper\Button creates <button>
HTML tags. The component accepts the text
as a string and optionally an array with all the attributes that the anchor needs.
<?php
use Phalcon\Escaper;
use Phalcon\Html\Helper\Button;
$escaper = new Escaper();
$anchor = new Button($escaper);
$options = [
'class' => 'my-class',
'name' => 'my-name',
'id' => 'my-id',
];
echo $anchor('click<>me', $options);
// <button
// id="my-id"
// name="my-name"
// class="my-class">
// click<>me
// </button>
close
¶
Phalcon\Html\Helper\Close creates the closing HTML tags. The component accepts the name
of the tag to close.
<?php
use Phalcon\Escaper;
use Phalcon\Html\Helper\Close;
$escaper = new Escaper();
$anchor = new Close($escaper);
echo $anchor('form');
// </form>
element
¶
Phalcon\Html\Helper\Element creates HTML tags based on the passed name
parameter. The component accepts the name
as a string, the text
as a string and optionally an array with all the attributes that the anchor needs.
<?php
use Phalcon\Escaper;
use Phalcon\Html\Helper\Element;
$escaper = new Escaper();
$anchor = new Element($escaper);
$options = [
'class' => 'my-class',
'name' => 'my-name',
'id' => 'my-id',
];
echo $anchor('address', 'click<>me', $options);
// <address
// id="my-id"
// name="my-name"
// class="my-class">
// click<>me
// </address>
elementRaw
¶
Phalcon\Html\Helper\ElementRaw creates raw HTML tags, i.e. the text will not be escaped. The tag created is based on the passed name
parameter. The component accepts the name
as a string, the text
as a string and optionally an array with all the attributes that the anchor needs.
<?php
use Phalcon\Escaper;
use Phalcon\Html\Helper\ElementRaw;
$escaper = new Escaper();
$anchor = new ElementRaw($escaper);
$options = [
'class' => 'my-class',
'name' => 'my-name',
'id' => 'my-id',
];
echo $anchor('address', 'click<>me', $options);
// <address
// id="my-id"
// name="my-name"
// class="my-class">
// click<>me
// </address>
form
¶
Phalcon\Html\Helper\Form creates <form>
HTML tags. The component accepts an array with all the attributes that the anchor needs. By default the form has its method
to post
and enctype
to multipart/form-data
.
<?php
use Phalcon\Escaper;
use Phalcon\Html\Helper\Form;
$escaper = new Escaper();
$anchor = new Form($escaper);
$options = [
'class' => 'my-class',
'name' => 'my-name',
'id' => 'my-id',
'method' => 'post',
'enctype' => 'multipart/form-data'
];
echo $anchor($options);
// <form
// id="my-id"
// name="my-name"
// class="my-class"
// method="post"
// enctype="multipart/form-data">
NOTE
This helper creates only the opening <form>
tag. You will need to use the Close
helper to generate the closing </form>
tag.
img
¶
Phalcon\Html\Helper\Img creates <img>
HTML tags. The component accepts the src
as a string and optionally an array with all the attributes that the anchor needs.
<?php
use Phalcon\Escaper;
use Phalcon\Html\Helper\Img;
$escaper = new Escaper();
$anchor = new Img($escaper);
$options = [
'class' => 'my-class',
'name' => 'my-name',
'id' => 'my-id',
];
echo $anchor('/my-url', $options);
// <img
// src="/my-url"
// id="my-id"
// name="my-name"
// class="my-class">
label
¶
Phalcon\Html\Helper\Label creates <label>
HTML tags. The component accepts optionally an array with all the attributes that the anchor needs.
<?php
use Phalcon\Escaper;
use Phalcon\Html\Helper\Label;
$escaper = new Escaper();
$anchor = new Label($escaper);
$options = [
'class' => 'my-class',
'name' => 'my-name',
'id' => 'my-id',
];
echo $anchor($options);
// <label
// id="my-id"
// name="my-name"
// class="my-class">
NOTE
This helper creates only the opening <label>
tag. You will need to use the Close
helper to generate the closing </label>
tag.
textarea
¶
Phalcon\Html\Helper\TextArea creates <textarea>
HTML tags. The component accepts the text
as a string and optionally an array with all the attributes that the anchor needs.
<?php
use Phalcon\Escaper;
use Phalcon\Html\Helper\TextArea;
$escaper = new Escaper();
$anchor = new TextArea($escaper);
$options = [
'class' => 'my-class',
'name' => 'my-name',
'id' => 'my-id',
];
echo $anchor('click<>me', $options);
// <textarea
// id="my-id"
// name="my-name"
// class="my-class">
// click<>me
// </textarea>
NOTE
More helpers will become available in future versions of Phalcon. The goal is to completely replace the Phalcon\Tag object with small HTML helper classes.