NAME
Mojolicious::Plugin::TagHelpers - Tag helpers plugin
SYNOPSIS
$self ->plugin( 'TagHelpers' );
plugin 'TagHelpers' ;
|
DESCRIPTION
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 the tag_with_error
helper, to make styling with CSS easier.
<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.
HELPERS
Mojolicious::Plugin::TagHelpers implements the following helpers.
check_box
%= check_box employed => 1
%= check_box employed => 1, disabled => 'disabled'
|
Generate checkbox input element. Previous input values will automatically get picked up and shown as default.
<input name= "employed" type= "checkbox" value= "1" />
<input disabled= "disabled" name= "employed" type= "checkbox" value= "1" />
|
color_field
%= color_field 'background'
%= color_field background => '#ffffff'
%= color_field background => '#ffffff' , id => 'foo'
|
Generate color input element. Previous input values will automatically get picked up and shown as default.
<input name= "background" type= "color" />
<input name= "background" type= "color" value= "#ffffff" />
<input id= "foo" name= "background" type= "color" value= "#ffffff" />
|
csrf_field
Generate hidden input element with "csrf_token" in Mojolicious::Plugin::DefaultHelpers.
<input name= "csrf_token" type= "hidden" value= "fa6a08..." />
|
date_field
%= date_field 'end'
%= date_field end => '2012-12-21'
%= date_field end => '2012-12-21' , id => 'foo'
|
Generate date input element. Previous input values will automatically get picked up and shown as default.
<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
%= datetime_field 'end'
%= datetime_field end => '2012-12-21T23:59:59Z'
%= datetime_field end => '2012-12-21T23:59:59Z' , id => 'foo'
|
Generate datetime input element. Previous input values will automatically get picked up and shown as default.
<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
%= email_field 'notify'
%= email_field notify => 'nospam@example.com'
%= email_field notify => 'nospam@example.com' , id => 'foo'
|
Generate email input element. Previous input values will automatically get picked up and shown as default.
<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
%= 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 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
%= text_field 'first_name'
%= submit_button
% end
|
Generate portable form tag with "url_for" in Mojolicious::Controller. For routes that allow POST but not GET, a method
attribute will be automatically added.
<form action= "/path/to/login" >
<input name= "first_name" />
<input value= "Ok" type= "submit" />
</form>
<form action= "/path/to/login.txt" method= "POST" >
<input name= "first_name" />
<input value= "Ok" type= "submit" />
</form>
<form action= "/path/to/login" enctype= "multipart/form-data" >
<input disabled= "disabled" name= "first_name" />
<input value= "Ok" type= "submit" />
</form>
<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 portable img tag.
<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 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 portable script tag for Javascript
asset.
<script src= "/path/to/script.js" />
<script><![CDATA[
var a = 'b' ;
]]></script>
|
label_for
%= 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.
<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
%= 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 url_for->query( foo => 'bar' )-> to_abs => begin %>Retry<% end %>
|
Generate portable link with "url_for" in Mojolicious::Controller, defaults to using the capitalized link target as content.
<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>
|
month_field
%= month_field 'vacation'
%= month_field vacation => '2012-12'
%= month_field vacation => '2012-12' , id => 'foo'
|
Generate month input element. Previous input values will automatically get picked up and shown as default.
<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
%= number_field 'age'
%= number_field age => 25
%= number_field age => 25, id => 'foo' , min => 0, max => 200
|
Generate number input element. Previous input values will automatically get picked up and shown as default.
<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
%= 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 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" />
|
range_field
%= range_field 'age'
%= range_field age => 25
%= range_field age => 25, id => 'foo' , min => 0, max => 200
|
Generate range input element. Previous input values will automatically get picked up and shown as default.
<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
%= search_field 'q'
%= search_field q => 'perl'
%= search_field q => 'perl' , id => 'foo'
|
Generate search input element. Previous input values will automatically get picked up and shown as default.
<input name= "q" type= "search" />
<input name= "q" type= "search" value= "perl" />
<input id= "foo" name= "q" type= "search" value= "perl" />
|
select_field
%= 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 elements from array references and optgroup elements from Mojo::Collection objects. Previous input values will automatically get picked up and shown as default.
< 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
%= stylesheet '/foo.css'
%= stylesheet begin
body {color:
% end
|
Generate portable style or link tag for CSS
asset.
< link href= "/path/to/foo.css" rel= "stylesheet" />
<style><![CDATA[
body {color:
]]></style>
|
%= submit_button
%= submit_button 'Ok!' , id => 'foo'
|
Generate submit input element.
<input type= "submit" value= "Ok" />
<input id= "foo" type= "submit" value= "Ok!" />
|
t
Alias for "tag".
<div>test & ; 123</div>
|
tag
%= tag 'div'
%= tag 'div' , id => 'foo'
%= 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/XML tag generator.
<div />
<div id= "foo" />
<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.
$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.
tag_with_error
%= tag_with_error 'input' , class => 'foo'
|
Same as "tag", but adds the class field-with-error
.
<input class= "foo field-with-error" />
|
tel_field
%= tel_field 'work'
%= tel_field work => '123456789'
%= tel_field work => '123456789' , id => 'foo'
|
Generate tel input element. Previous input values will automatically get picked up and shown as default.
<input name= "work" type= "tel" />
<input name= "work" type= "tel" value= "123456789" />
<input id= "foo" name= "work" type= "tel" value= "123456789" />
|
text_area
%= text_area 'foo'
%= text_area 'foo' , cols => 40
%= text_area foo => 'Default!' , cols => 40
%= text_area foo => ( cols => 40) => begin
Default!
% end
|
Generate textarea element. Previous input values will automatically get picked up and shown as default.
<textarea name= "foo" ></textarea>
<textarea cols= "40" name= "foo" ></textarea>
<textarea cols= "40" name= "foo" >Default!</textarea>
<textarea cols= "40" name= "foo" >
Default!
</textarea>
|
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" type= "text" />
<input name= "first_name" type= "text" value= "Default name" />
<input class= "user" name= "first_name" type= "text" value= "Default name" />
|
time_field
%= time_field 'start'
%= time_field start => '23:59:59'
%= time_field start => '23:59:59' , id => 'foo'
|
Generate time input element. Previous input values will automatically get picked up and shown as default.
<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
Generate url input element. Previous input values will automatically get picked up and shown as default.
<input name= "address" type= "url" />
|
week_field
%= week_field 'vacation'
%= week_field vacation => '2012-W17'
%= week_field vacation => '2012-W17' , id => 'foo'
|
Generate week input element. Previous input values will automatically get picked up and shown as default.
<input name= "vacation" type= "week" />
<input name= "vacation" type= "week" value= "2012-W17" />
<input id= "foo" name= "vacation" type= "week" value= "2012-W17" />
|
METHODS
Mojolicious::Plugin::TagHelpers inherits all methods from Mojolicious::Plugin and implements the following new ones.
register
$plugin ->register(Mojolicious->new);
|
Register helpers in Mojolicious application.
SEE ALSO
Mojolicious, Mojolicious::Guides, http://mojolicio.us.