NAME

Mojolicious::Plugin::TagHelpers - Tag helpers plugin

SYNOPSIS

# Mojolicious
$self->plugin('TagHelpers');

# Mojolicious::Lite
plugin 'TagHelpers';

DESCRIPTION

Mojolicious::Plugin::TagHelpers is a collection of HTML5 tag helpers for Mojolicious. This is a core plugin, that means it is always enabled and its code a good example for learning to build new plugins.

Most form helpers can automatically pick up previous input values and will show them as default. You can also use param 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

HELPERS

Mojolicious::Plugin::TagHelpers implements the following helpers.

base_tag

%= base_tag

Generate base tag refering to the current base URL.

<base href="http://localhost/cgi-bin/myapp.pl" />

check_box

%= check_box employed => 1
%= check_box employed => 1, id => 'foo'

Generate checkbox input element. Previous input values will automatically get picked up and shown as default.

<input name="employed" type="checkbox" value="1" />
<input id="foo" name="employed" type="checkbox" value="1" />

file_field

%= file_field 'avatar'
%= file_field 'avatar', id => 'foo'

Generate file input element.

<input name="avatar" type="file" />
<input id="foo" name="avatar" type="file" />

form_for

%= form_for login => (method => 'post') => begin
  %= text_field 'first_name'
  %= submit_button
% end
%= form_for login => {foo => 'bar'} => (method => 'post') => begin
  %= text_field 'first_name'
  %= submit_button
% end
%= form_for '/login' => (method => 'post') => begin
  %= text_field 'first_name'
  %= submit_button
% end
%= form_for 'http://kraih.com/login' => (method => 'post') => begin
  %= text_field 'first_name'
  %= submit_button
% end

Generate form for route, path or URL.

<form action="/path/to/login" method="post">
  <input name="first_name" />
  <input value="Ok" type="submit" />
</form>
<form action="/path/to/login/bar" method="post">
  <input name="first_name" />
  <input value="Ok" type="submit" />
</form>
<form action="/login" method="post">
  <input name="first_name" />
  <input value="Ok" type="submit" />
</form>
<form action="http://kraih.com/login" method="post">
  <input name="first_name" />
  <input value="Ok" type="submit" />
</form>

hidden_field

%= hidden_field foo => 'bar'
%= hidden_field foo => 'bar', id => 'bar'

Generate hidden input element.

<input name="foo" type="hidden" value="bar" />
<input id="bar" name="foo" type="hidden" value="bar" />

image

%= image '/images/foo.png'
%= image '/images/foo.png', alt => 'Foo'

Generate image tag.

<img src="/images/foo.png" />
<img alt="Foo" src="/images/foo.png" />

input_tag

%= input_tag 'first_name'
%= input_tag first_name => 'Default name'
%= input_tag 'employed', type => 'checkbox'

Generate form input element. Previous input values will automatically get picked up and shown as default.

<input name="first_name" />
<input name="first_name" value="Default name" />
<input name="employed" type="checkbox" />

javascript

%= javascript '/script.js'
%= javascript begin
  var a = 'b';
% end

Generate script tag for Javascript asset.

<script src="/script.js" type="text/javascript" />
<script type="text/javascript"><![CDATA[
  var a = 'b';
]]></script>

link_to

%= link_to Home => 'index'
%= link_to index => {foo => 'bar'} => (class => 'links') => begin
  Home
% end
<%= link_to index => begin %>Home<% end %>
<%= link_to '/path/to/file' => begin %>File<% end %>
<%= link_to 'http://mojolicio.us' => begin %>Mojolicious<% end %>
<%= link_to url_for->query(foo => $foo) => begin %>Retry<% end %>

Generate link to route, path or URL, defaults to using the capitalized link target as content.

<a href="/path/to/index">Home</a>
<a class="links" href="/path/to/index/bar">Home</a>
<a href="/path/to/index">Home</a>
<a href="/path/to/file">File</a>
<a href="http://mojolicio.us">Mojolicious</a>
<a href="/current/path?foo=something">Retry</a>

password_field

%= password_field 'pass'
%= password_field 'pass', id => 'foo'

Generate password input element.

<input name="pass" type="password" />
<input id="foo" name="pass" type="password" />

radio_button

%= radio_button country => 'germany'
%= radio_button country => 'germany', id => 'foo'

Generate radio input element. Previous input values will automatically get picked up and shown as default.

<input name="country" type="radio" value="germany" />
<input id="foo" name="country" type="radio" value="germany" />

select_field

%= select_field language => [qw/de en/]
%= select_field language => [qw/de en/], id => 'lang'
%= select_field country => [[Germany => 'de'], 'en']
%= select_field country => [{Europe => [[Germany => 'de'], 'en']}]
%= select_field country => [[Germany => 'de', class => 'europe'], 'en']

Generate select, option and optgroup elements. Previous input values will automatically get picked up and shown as default.

<select name="language">
  <option value="de">de</option>
  <option value="en">en</option>
</select>
<select id="lang" name="language">
  <option value="de">de</option>
  <option value="en">en</option>
</select>
<select name="country">
  <option value="de">Germany</option>
  <option value="en">en</option>
</select>
<select id="lang" name="language">
  <optgroup label="Europe">
    <option value="de">Germany</option>
    <option value="en">en</option>
  </optgroup>
</select>
<select name="country">
  <option class="europe" value="de">Germany</option>
  <option value="en">en</option>
</select>

stylesheet

%= stylesheet '/foo.css'
%= stylesheet begin
  body {color: #000}
% end

Generate style or link tag for CSS asset.

<link href="/foo.css" media="screen" rel="stylesheet" type="text/css" />
<style type="text/css"><![CDATA[
  body {color: #000}
]]></style>

submit_button

%= submit_button
%= submit_button 'Ok!', id => 'foo'

Generate submit input element.

<input type="submit" value="Ok" />
<input id="foo" type="submit" value="Ok!" />

t

%=t div => 'some & content'

Alias for tag. Note that this helper is EXPERIMENTAL and might change without warning!

<div>some &amp; content</div>

tag

%= tag 'div'
%= tag 'div', id => 'foo'
%= tag div => 'some & content'
<%= tag div => begin %>some & content<% end %>

HTML5 tag generator.

<div />
<div id="foo" />
<div>some &amp; content</div>
<div>some & content</div>

Very useful for reuse in more specific tag helpers.

$self->tag('div');
$self->tag('div', id => 'foo');
$self->tag(div => sub { 'Content' });

Results are automatically wrapped in Mojo::ByteStream objects to prevent accidental double escaping.

text_field

%= text_field 'first_name'
%= text_field first_name => 'Default name'
%= text_field first_name => 'Default name', class => 'user'

Generate text input element. Previous input values will automatically get picked up and shown as default.

<input name="first_name" />
<input name="first_name" value="Default name" />
<input class="user" name="first_name" value="Default name" />

text_area

%= text_area 'foo'
%= text_area foo => begin
  Default!
% end

Generate textarea element. Previous input values will automatically get picked up and shown as default.

<textarea name="foo"></textarea>
<textarea name="foo">
  Default!
</textarea>

METHODS

Mojolicious::Plugin::TagHelpers inherits all methods from Mojolicious::Plugin and implements the following new ones.

register

$plugin->register;

Register helpers in Mojolicious application.

SEE ALSO

Mojolicious, Mojolicious::Guides, http://mojolicio.us.

cpanm Mojolicious

perl -MCPAN -e shell
install Mojolicious