mouf/html.tags

This package contains a pure PHP object representation of HTML5 tags. There is one class for each existing HTML tag, and one getter/setter per attribute.

Installs: 20 049

Dependents: 1

Suggesters: 0

Security: 0

Stars: 3

Watchers: 13

Forks: 1

Open Issues: 0

Type:mouf-library

v1.0.0 2015-04-24 08:48 UTC

This package is auto-updated.

Last update: 2024-10-15 05:23:18 UTC


README

This package contains a pure PHP object representation of HTML5 tags. There is one class for each existing HTML tag, and one getter/setter per attribute.

Why bother?

There are plenty of ways to represent HTML tags as PHP objects, and most of the time, you might not need one class per tag (you can use a generic PHP object representing any HTML tag like here, here or , here).

So why bother with one class per tag?

Well for a few reasons:

  • You can have autocompletion when using the tags (if you are using a sensible PHP IDE)
  • You can use those tags in dependency injection frameworks (this part might sound completely crazy to you until you learn more about the Mouf PHP framework.

List of supported tags

Basically, all the tags supported and not deprecated in HTML5. You can get a complete list on the W3C wiki.

How to use it?

###Basic usage

Pretty easy. You just create a tag using the new keyword and use getters and setters to set attributes. Finally, you call the toHtml() method to render the tag.

$div = new Div();
$div->setId('myDiv');
$div->toHtml();

###Fluent interface

The setter are using a fluent interface, so you can chain several setters if you want:

$input = new Input();
$input->setType('text')->setName('company')->setLabel('TheCodingMachine');
$input->toHtml();

###Setting classes and styles

You can set classes and styles using arrays or strings:

$label = new Label();
$label->setClasses(array("css-class1 css-class2"));
$label->setStyles(array("background-color" => "red"));
$label->toHtml();

You can also add a class or a style using addClass or addStyle.

$label->addClass("css-class3");
$label->addStyle("background-color", "red");

###Managing children

You can add children to your tags using setChildren or addChild.

$div->setChildren(array($label, $input));
$div->addChild($label);

###Adding text to a tag

Use the addText to add text to a tag.

$p = new Paragraph();
$p->addText("This is my text");

Note: this is similar to creating a HtmlString instance and adding it to the node:

// Similar to:
$p->addChild(new HtmlString("This is my text"));

Adding your own custom tags

You might be interested in adding your owns classes that generate custom HTML code. All you have to know is that all the tags are implementing the HtmlElementInterface.

This is a simple interface with a single toHtml() method.

What is this ValueInterface thing?

If you have had a look at the code, you might have noticed that each setter accepts objects implementing the ValueInterface interface.

This is a very powerful feature allowing you to put objects that will be evaluated when they are rendered. When the tag is rendered, the val() method of the object is called and attributed.

Mouf package

This package is part of Mouf, an effort to ensure good developing practices by providing a graphical dependency injection framework.