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 053
Dependents: 1
Suggesters: 0
Security: 0
Stars: 3
Watchers: 13
Forks: 1
Open Issues: 0
Type:mouf-library
Requires
- php: >=5.4.4
- mouf/html.htmlelement: ~2.0
- mouf/utils.value.value-interface: ~1.0
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.