Mojolicious::Plugin::TagHelpers - Tag helpers plugin
# Mojolicious $self->plugin('TagHelpers'); # Mojolicious::Lite plugin 'TagHelpers';
Mojolicious::Plugin::TagHelpers is a collection of HTML tag helpers for Mojolicious.
Most form helpers can automatically pick up previous input values and will show them as default. You can also use "param" in Mojolicious::Plugin::DefaultHelpers to set them manually and let necessary attributes always be generated automatically.
% param country => 'germany' unless param 'country'; <%= radio_button country => 'germany' %> Germany <%= radio_button country => 'france' %> France <%= radio_button country => 'uk' %> UK
For fields that failed validation with "validation" in Mojolicious::Controller the field-with-error class will be automatically added through "tag_with_error", to make styling with CSS easier.
field-with-error
<input class="field-with-error" name="age" type="text" value="250">
This is a core plugin, that means it is always enabled and its code a good example for learning how to build new plugins, you're welcome to fork it.
See "PLUGINS" in Mojolicious::Plugins for a list of plugins that are available by default.
Mojolicious::Plugin::TagHelpers implements the following helpers.
%= check_box employed => 1 %= check_box employed => 1, disabled => 'disabled'
Generate input tag of type checkbox. Previous input values will automatically get picked up and shown as default.
input
checkbox
<input name="employed" type="checkbox" value="1"> <input disabled="disabled" name="employed" type="checkbox" value="1">
%= color_field 'background' %= color_field background => '#ffffff' %= color_field background => '#ffffff', id => 'foo'
Generate input tag of type color. Previous input values will automatically get picked up and shown as default.
color
<input name="background" type="color"> <input name="background" type="color" value="#ffffff"> <input id="foo" name="background" type="color" value="#ffffff">
%= csrf_field
Generate input tag of type hidden with "csrf_token" in Mojolicious::Plugin::DefaultHelpers.
hidden
<input name="csrf_token" type="hidden" value="fa6a08...">
%= date_field 'end' %= date_field end => '2012-12-21' %= date_field end => '2012-12-21', id => 'foo'
Generate input tag of type date. Previous input values will automatically get picked up and shown as default.
date
<input name="end" type="date"> <input name="end" type="date" value="2012-12-21"> <input id="foo" name="end" type="date" value="2012-12-21">
%= datetime_field 'end' %= datetime_field end => '2012-12-21T23:59:59Z' %= datetime_field end => '2012-12-21T23:59:59Z', id => 'foo'
Generate input tag of type datetime. Previous input values will automatically get picked up and shown as default.
datetime
<input name="end" type="datetime"> <input name="end" type="datetime" value="2012-12-21T23:59:59Z"> <input id="foo" name="end" type="datetime" value="2012-12-21T23:59:59Z">
%= email_field 'notify' %= email_field notify => 'nospam@example.com' %= email_field notify => 'nospam@example.com', id => 'foo'
Generate input tag of type email. Previous input values will automatically get picked up and shown as default.
email
<input name="notify" type="email"> <input name="notify" type="email" value="nospam@example.com"> <input id="foo" name="notify" type="email" value="nospam@example.com">
%= file_field 'avatar' %= file_field 'avatar', id => 'foo'
Generate input tag of type file.
file
<input name="avatar" type="file"> <input id="foo" name="avatar" type="file">
%= form_for login => begin %= text_field 'first_name' %= submit_button % end %= form_for login => {format => 'txt'} => (method => 'POST') => begin %= text_field 'first_name' %= submit_button % end %= form_for '/login' => (enctype => 'multipart/form-data') => begin %= text_field 'first_name', disabled => 'disabled' %= submit_button % end %= form_for 'http://example.com/login' => (method => 'POST') => begin %= text_field 'first_name' %= submit_button % end %= form_for some_delete_route => begin %= submit_button 'Remove' % end
Generate portable form tag with "url_for" in Mojolicious::Controller. For routes that do not allow GET, a method attribute with the value POST will be automatically added. And for methods other than GET or POST, an _method query parameter will be added as well.
form
GET
method
POST
_method
<form action="/path/to/login"> <input name="first_name" type="text"> <input type="submit" value="Ok"> </form> <form action="/path/to/login.txt" method="POST"> <input name="first_name" type="text"> <input type="submit" value="Ok"> </form> <form action="/path/to/login" enctype="multipart/form-data"> <input disabled="disabled" name="first_name" type="text"> <input type="submit" value="Ok"> </form> <form action="http://example.com/login" method="POST"> <input name="first_name" type="text"> <input type="submit" value="Ok"> </form> <form action="/path/to/delete/route?_method=DELETE" method="POST"> <input type="submit" value="Remove"> </form>
%= hidden_field foo => 'bar' %= hidden_field foo => 'bar', id => 'bar'
Generate input tag of type hidden.
<input name="foo" type="hidden" value="bar"> <input id="bar" name="foo" type="hidden" value="bar">
%= image '/images/foo.png' %= image '/images/foo.png', alt => 'Foo'
Generate portable img tag.
img
<img src="/path/to/images/foo.png"> <img alt="Foo" src="/path/to/images/foo.png">
%= input_tag 'first_name' %= input_tag first_name => 'Default' %= input_tag 'employed', type => 'checkbox'
Generate input tag. Previous input values will automatically get picked up and shown as default.
<input name="first_name"> <input name="first_name" value="Default"> <input name="employed" type="checkbox">
%= javascript '/script.js' %= javascript begin var a = 'b'; % end
Generate portable script tag for JavaScript asset.
script
<script src="/path/to/script.js"></script> <script><![CDATA[ var a = 'b'; ]]></script>
%= label_for first_name => 'First name' %= label_for first_name => 'First name', class => 'user' %= label_for first_name => begin First name % end %= label_for first_name => (class => 'user') => begin First name % end
Generate label tag.
label
<label for="first_name">First name</label> <label class="user" for="first_name">First name</label> <label for="first_name"> First name </label> <label class="user" for="first_name"> First name </label>
%= link_to Home => 'index' %= link_to Home => 'index' => {format => 'txt'} => (class => 'menu') %= link_to index => {format => 'txt'} => (class => 'menu') => begin Home % end %= link_to Contact => 'mailto:sri@example.com' <%= link_to index => begin %>Home<% end %> <%= link_to '/file.txt' => begin %>File<% end %> <%= link_to 'http://mojolicio.us' => begin %>Mojolicious<% end %> <%= link_to url_for->query(foo => 'bar')->to_abs => begin %>Retry<% end %>
Generate portable a tag with "url_for" in Mojolicious::Controller, defaults to using the capitalized link target as content.
a
<a href="/path/to/index">Home</a> <a class="menu" href="/path/to/index.txt">Home</a> <a class="menu" href="/path/to/index.txt"> Home </a> <a href="mailto:sri@example.com">Contact</a> <a href="/path/to/index">Home</a> <a href="/path/to/file.txt">File</a> <a href="http://mojolicio.us">Mojolicious</a> <a href="http://127.0.0.1:3000/current/path?foo=bar">Retry</a>
%= month_field 'vacation' %= month_field vacation => '2012-12' %= month_field vacation => '2012-12', id => 'foo'
Generate input tag of type month. Previous input values will automatically get picked up and shown as default.
month
<input name="vacation" type="month"> <input name="vacation" type="month" value="2012-12"> <input id="foo" name="vacation" type="month" value="2012-12">
%= number_field 'age' %= number_field age => 25 %= number_field age => 25, id => 'foo', min => 0, max => 200
Generate input tag of type number. Previous input values will automatically get picked up and shown as default.
number
<input name="age" type="number"> <input name="age" type="number" value="25"> <input id="foo" max="200" min="0" name="age" type="number" value="25">
%= password_field 'pass' %= password_field 'pass', id => 'foo'
Generate input tag of type password.
password
<input name="pass" type="password"> <input id="foo" name="pass" type="password">
%= radio_button country => 'germany' %= radio_button country => 'germany', id => 'foo'
Generate input tag of type radio. Previous input values will automatically get picked up and shown as default.
radio
<input name="country" type="radio" value="germany"> <input id="foo" name="country" type="radio" value="germany">
%= range_field 'age' %= range_field age => 25 %= range_field age => 25, id => 'foo', min => 0, max => 200
Generate input tag of type range. Previous input values will automatically get picked up and shown as default.
range
<input name="age" type="range"> <input name="age" type="range" value="25"> <input id="foo" max="200" min="200" name="age" type="range" value="25">
%= search_field 'q' %= search_field q => 'perl' %= search_field q => 'perl', id => 'foo'
Generate input tag of type search. Previous input values will automatically get picked up and shown as default.
search
<input name="q" type="search"> <input name="q" type="search" value="perl"> <input id="foo" name="q" type="search" value="perl">
%= select_field country => [qw(de en)] %= select_field country => [[Germany => 'de'], 'en'], id => 'eu' %= select_field country => [[Germany => 'de', disabled => 'disabled'], 'en'] %= select_field country => [c(EU => [[Germany => 'de'], 'en'], id => 'eu')] %= select_field country => [c(EU => [qw(de en)]), c(Asia => [qw(cn jp)])]
Generate select and option tags from array references and optgroup tags from Mojo::Collection objects. Previous input values will automatically get picked up and shown as default.
select
option
optgroup
<select name="country"> <option value="de">de</option> <option value="en">en</option> </select> <select id="eu" name="country"> <option value="de">Germany</option> <option value="en">en</option> </select> <select name="country"> <option disabled="disabled" value="de">Germany</option> <option value="en">en</option> </select> <select name="country"> <optgroup id="eu" label="EU"> <option value="de">Germany</option> <option value="en">en</option> </optgroup> </select> <select name="country"> <optgroup label="EU"> <option value="de">de</option> <option value="en">en</option> </optgroup> <optgroup label="Asia"> <option value="cn">cn</option> <option value="jp">jp</option> </optgroup> </select>
%= stylesheet '/foo.css' %= stylesheet begin body {color: #000} % end
Generate portable style or link tag for CSS asset.
style
link
<link href="/path/to/foo.css" rel="stylesheet"> <style><![CDATA[ body {color: #000} ]]></style>
%= submit_button %= submit_button 'Ok!', id => 'foo'
Generate input tag of type submit.
submit
<input type="submit" value="Ok"> <input id="foo" type="submit" value="Ok!">
%=t div => 'test & 123'
Alias for "tag".
<div>test & 123</div>
%= tag 'br' %= tag 'div' %= tag 'div', id => 'foo', hidden => undef %= tag div => 'test & 123' %= tag div => (id => 'foo') => 'test & 123' %= tag div => (data => {my_id => 1, Name => 'test'}) => 'test & 123' %= tag div => begin test & 123 % end <%= tag div => (id => 'foo') => begin %>test & 123<% end %>
HTML tag generator, the data attribute may contain a hash reference with key/value pairs to generate attributes from.
data
<br> <div></div> <div id="foo" hidden></div> <div>test & 123</div> <div id="foo">test & 123</div> <div data-my-id="1" data-name="test">test & 123</div> <div> test & 123 </div> <div id="foo">test & 123</div>
Very useful for reuse in more specific tag helpers.
my $output = $c->tag('meta'); my $output = $c->tag('meta', charset => 'UTF-8'); my $output = $c->tag(div => '<p>This will be escaped</p>'); my $output = $c->tag(div => sub { '<p>This will not be escaped</p>' });
Results are automatically wrapped in Mojo::ByteStream objects to prevent accidental double escaping in ep templates.
ep
%= tag_with_error 'input', class => 'foo'
Same as "tag", but adds the class field-with-error.
<input class="foo field-with-error">
%= tel_field 'work' %= tel_field work => '123456789' %= tel_field work => '123456789', id => 'foo'
Generate input tag of type tel. Previous input values will automatically get picked up and shown as default.
tel
<input name="work" type="tel"> <input name="work" type="tel" value="123456789"> <input id="foo" name="work" type="tel" value="123456789">
%= text_area 'story' %= text_area 'story', cols => 40 %= text_area story => 'Default', cols => 40 %= text_area story => (cols => 40) => begin Default % end
Generate textarea tag. Previous input values will automatically get picked up and shown as default.
textarea
<textarea name="story"></textarea> <textarea cols="40" name="story"></textarea> <textarea cols="40" name="story">Default</textarea> <textarea cols="40" name="story"> Default </textarea>
%= text_field 'first_name' %= text_field first_name => 'Default' %= text_field first_name => 'Default', class => 'user'
Generate input tag of type text. Previous input values will automatically get picked up and shown as default.
text
<input name="first_name" type="text"> <input name="first_name" type="text" value="Default"> <input class="user" name="first_name" type="text" value="Default">
%= time_field 'start' %= time_field start => '23:59:59' %= time_field start => '23:59:59', id => 'foo'
Generate input tag of type time. Previous input values will automatically get picked up and shown as default.
time
<input name="start" type="time"> <input name="start" type="time" value="23:59:59"> <input id="foo" name="start" type="time" value="23:59:59">
%= url_field 'address' %= url_field address => 'http://mojolicio.us' %= url_field address => 'http://mojolicio.us', id => 'foo'
Generate input tag of type url. Previous input values will automatically get picked up and shown as default.
url
<input name="address" type="url"> <input name="address" type="url" value="http://mojolicio.us"> <input id="foo" name="address" type="url" value="http://mojolicio.us">
%= week_field 'vacation' %= week_field vacation => '2012-W17' %= week_field vacation => '2012-W17', id => 'foo'
Generate input tag of type week. Previous input values will automatically get picked up and shown as default.
week
<input name="vacation" type="week"> <input name="vacation" type="week" value="2012-W17"> <input id="foo" name="vacation" type="week" value="2012-W17">
Mojolicious::Plugin::TagHelpers inherits all methods from Mojolicious::Plugin and implements the following new ones.
$plugin->register(Mojolicious->new);
Register helpers in Mojolicious application.
Mojolicious, Mojolicious::Guides, http://mojolicio.us.
To install Mojolicious, copy and paste the appropriate command in to your terminal.
cpanm
cpanm Mojolicious
CPAN shell
perl -MCPAN -e shell install Mojolicious
For more information on module installation, please visit the detailed CPAN module installation guide.