.\" Automatically generated by Pod::Man 4.11 (Pod::Simple 3.35)
.\"
.\" Standard preamble:
.\" ========================================================================
.de Sp \" Vertical space (when we can't use .PP)
.if t .sp .5v
.if n .sp
..
.de Vb \" Begin verbatim text
.ft CW
.nf
.ne \\$1
..
.de Ve \" End verbatim text
.ft R
.fi
..
.\" Set up some character translations and predefined strings. \*(-- will
.\" give an unbreakable dash, \*(PI will give pi, \*(L" will give a left
.\" double quote, and \*(R" will give a right double quote. \*(C+ will
.\" give a nicer C++. Capital omega is used to do unbreakable dashes and
.\" therefore won't be available. \*(C` and \*(C' expand to `' in nroff,
.\" nothing in troff, for use with C<>.
.tr \(*W-
.ds C+ C\v'-.1v'\h'-1p'\s-2+\h'-1p'+\s0\v'.1v'\h'-1p'
.ie n \{\
. ds -- \(*W-
. ds PI pi
. if (\n(.H=4u)&(1m=24u) .ds -- \(*W\h'-12u'\(*W\h'-12u'-\" diablo 10 pitch
. if (\n(.H=4u)&(1m=20u) .ds -- \(*W\h'-12u'\(*W\h'-8u'-\" diablo 12 pitch
. ds L" ""
. ds R" ""
. ds C` ""
. ds C' ""
'br\}
.el\{\
. ds -- \|\(em\|
. ds PI \(*p
. ds L" ``
. ds R" ''
. ds C`
. ds C'
'br\}
.\"
.\" Escape single quotes in literal strings from groff's Unicode transform.
.ie \n(.g .ds Aq \(aq
.el .ds Aq '
.\"
.\" If the F register is >0, we'll generate index entries on stderr for
.\" titles (.TH), headers (.SH), subsections (.SS), items (.Ip), and index
.\" entries marked with X<> in POD. Of course, you'll have to process the
.\" output yourself in some meaningful fashion.
.\"
.\" Avoid warning from groff about undefined register 'F'.
.de IX
..
.nr rF 0
.if \n(.g .if rF .nr rF 1
.if (\n(rF:(\n(.g==0)) \{\
. if \nF \{\
. de IX
. tm Index:\\$1\t\\n%\t"\\$2"
..
. if !\nF==2 \{\
. nr % 0
. nr F 2
. \}
. \}
.\}
.rr rF
.\" ========================================================================
.\"
.IX Title "Mojolicious::Plugin::TagHelpers 3"
.TH Mojolicious::Plugin::TagHelpers 3 "2023-08-15" "perl v5.26.3" "User Contributed Perl Documentation"
.\" For nroff, turn off justification. Always turn off hyphenation; it makes
.\" way too many mistakes in technical documents.
.if n .ad l
.nh
.SH "NAME"
Mojolicious::Plugin::TagHelpers \- Tag helpers plugin
.SH "SYNOPSIS"
.IX Header "SYNOPSIS"
.Vb 2
\& # Mojolicious
\& $app\->plugin(\*(AqTagHelpers\*(Aq);
\&
\& # Mojolicious::Lite
\& plugin \*(AqTagHelpers\*(Aq;
.Ve
.SH "DESCRIPTION"
.IX Header "DESCRIPTION"
Mojolicious::Plugin::TagHelpers is a collection of \s-1HTML\s0 tag helpers for Mojolicious, based on the \s-1HTML\s0 Living
Standard <https://html.spec.whatwg.org>.
.PP
Most form helpers can automatically pick up previous input values and will show them as default. You can also use
\&\*(L"param\*(R" in Mojolicious::Plugin::DefaultHelpers to set them manually and let necessary attributes always be generated
automatically.
.PP
.Vb 4
\& % param country => \*(Aqgermany\*(Aq unless param \*(Aqcountry\*(Aq;
\& <%= radio_button country => \*(Aqgermany\*(Aq %> Germany
\& <%= radio_button country => \*(Aqfrance\*(Aq %> France
\& <%= radio_button country => \*(Aquk\*(Aq %> UK
.Ve
.PP
For fields that failed validation with \*(L"validation\*(R" in Mojolicious::Plugin::DefaultHelpers the \f(CW\*(C`field\-with\-error\*(C'\fR
class will be automatically added through \*(L"tag_with_error\*(R", to make styling with \s-1CSS\s0 easier.
.PP
.Vb 1
\& <input class="field\-with\-error" name="age" type="text" value="250">
.Ve
.PP
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.
.PP
See \*(L"\s-1PLUGINS\*(R"\s0 in Mojolicious::Plugins for a list of plugins that are available by default.
.SH "HELPERS"
.IX Header "HELPERS"
Mojolicious::Plugin::TagHelpers implements the following helpers.
.SS "asset_tag"
.IX Subsection "asset_tag"
.Vb 2
\& %= asset_tag \*(Aq/app.js\*(Aq
\& %= asset_tag \*(Aq/app.js\*(Aq, async => \*(Aqasync\*(Aq
.Ve
.PP
Generate \f(CW\*(C`script\*(C'\fR, \f(CW\*(C`link\*(C'\fR or \f(CW\*(C`img\*(C'\fR tag for static asset.
.SS "button_to"
.IX Subsection "button_to"
.Vb 4
\& %= button_to Test => \*(Aqsome_get_route\*(Aq
\& %= button_to Test => some_get_route => {id => 23} => (class => \*(Aqmenu\*(Aq)
\& %= button_to Test => \*(Aqhttp://example.com/test\*(Aq => (class => \*(Aqmenu\*(Aq)
\& %= button_to Remove => \*(Aqsome_delete_route\*(Aq
.Ve
.PP
Generate portable \f(CW\*(C`form\*(C'\fR tag with \*(L"form_for\*(R", containing a single button.
.PP
.Vb 12
\& <form action="/path/to/get/route">
\& <input type="submit" value="Test">
\& </form>
\& <form action="/path/to/get/route/23" class="menu">
\& <input type="submit" value="Test">
\& </form>
\& <form action="http://example.com/test" class="menu">
\& <input type="submit" value="Test">
\& </form>
\& <form action="/path/to/delete/route?_method=DELETE" method="POST">
\& <input type="submit" value="Remove">
\& </form>
.Ve
.SS "check_box"
.IX Subsection "check_box"
.Vb 3
\& %= check_box \*(Aqemployed\*(Aq
\& %= check_box employed => 1
\& %= check_box employed => 1, checked => undef, id => \*(Aqfoo\*(Aq
.Ve
.PP
Generate \f(CW\*(C`input\*(C'\fR tag of type \f(CW\*(C`checkbox\*(C'\fR. Previous input values will automatically get picked up and shown as default.
.PP
.Vb 3
\& <input name="employed" type="checkbox">
\& <input name="employed" type="checkbox" value="1">
\& <input checked id="foo" name="employed" type="checkbox" value="1">
.Ve
.SS "color_field"
.IX Subsection "color_field"
.Vb 3
\& %= color_field \*(Aqbackground\*(Aq
\& %= color_field background => \*(Aq#ffffff\*(Aq
\& %= color_field background => \*(Aq#ffffff\*(Aq, id => \*(Aqfoo\*(Aq
.Ve
.PP
Generate \f(CW\*(C`input\*(C'\fR tag of type \f(CW\*(C`color\*(C'\fR. Previous input values will automatically get picked up and shown as default.
.PP
.Vb 3
\& <input name="background" type="color">
\& <input name="background" type="color" value="#ffffff">
\& <input id="foo" name="background" type="color" value="#ffffff">
.Ve
.SS "csrf_button_to"
.IX Subsection "csrf_button_to"
.Vb 1
\& %= csrf_button_to Remove => \*(Aqsome_delete_route\*(Aq
.Ve
.PP
Same as \*(L"button_to\*(R", but also includes a \*(L"csrf_field\*(R".
.PP
.Vb 4
\& <form action="/path/to/delete/route?_method=DELETE" method="POST">
\& <input name="csrf_token" type="hidden" value="fa6a08...">
\& <input type="submit" value="Remove">
\& </form>
.Ve
.SS "csrf_field"
.IX Subsection "csrf_field"
.Vb 1
\& %= csrf_field
.Ve
.PP
Generate \f(CW\*(C`input\*(C'\fR tag of type \f(CW\*(C`hidden\*(C'\fR with \*(L"csrf_token\*(R" in Mojolicious::Plugin::DefaultHelpers.
.PP
.Vb 1
\& <input name="csrf_token" type="hidden" value="fa6a08...">
.Ve
.SS "date_field"
.IX Subsection "date_field"
.Vb 3
\& %= date_field \*(Aqend\*(Aq
\& %= date_field end => \*(Aq2012\-12\-21\*(Aq
\& %= date_field end => \*(Aq2012\-12\-21\*(Aq, id => \*(Aqfoo\*(Aq
.Ve
.PP
Generate \f(CW\*(C`input\*(C'\fR tag of type \f(CW\*(C`date\*(C'\fR. Previous input values will automatically get picked up and shown as default.
.PP
.Vb 3
\& <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">
.Ve
.SS "datetime_field"
.IX Subsection "datetime_field"
.Vb 3
\& %= datetime_field \*(Aqend\*(Aq
\& %= datetime_field end => \*(Aq2012\-12\-21T23:59:59\*(Aq
\& %= datetime_field end => \*(Aq2012\-12\-21T23:59:59\*(Aq, id => \*(Aqfoo\*(Aq
.Ve
.PP
Generate \f(CW\*(C`input\*(C'\fR tag of type \f(CW\*(C`datetime\-local\*(C'\fR. Previous input values will automatically get picked up and shown as
default.
.PP
.Vb 3
\& <input name="end" type="datetime\-local">
\& <input name="end" type="datetime\-local" value="2012\-12\-21T23:59:59">
\& <input id="foo" name="end" type="datetime\-local" value="2012\-12\-21T23:59:59">
.Ve
.SS "email_field"
.IX Subsection "email_field"
.Vb 3
\& %= email_field \*(Aqnotify\*(Aq
\& %= email_field notify => \*(Aqnospam@example.com\*(Aq
\& %= email_field notify => \*(Aqnospam@example.com\*(Aq, id => \*(Aqfoo\*(Aq
.Ve
.PP
Generate \f(CW\*(C`input\*(C'\fR tag of type \f(CW\*(C`email\*(C'\fR. Previous input values will automatically get picked up and shown as default.
.PP
.Vb 3
\& <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">
.Ve
.SS "favicon"
.IX Subsection "favicon"
.Vb 2
\& %= favicon
\& %= favicon \*(Aq/favicon.ico\*(Aq;
.Ve
.PP
Generate \f(CW\*(C`link\*(C'\fR tag for favicon, defaulting to the one that comes bundled with Mojolicious.
.PP
.Vb 2
\& <link rel="icon" href="/mojo/favicon.ico">
\& <link rel="icon" href="/favicon.ico">
.Ve
.SS "file_field"
.IX Subsection "file_field"
.Vb 2
\& %= file_field \*(Aqavatar\*(Aq
\& %= file_field \*(Aqavatar\*(Aq, id => \*(Aqfoo\*(Aq
.Ve
.PP
Generate \f(CW\*(C`input\*(C'\fR tag of type \f(CW\*(C`file\*(C'\fR.
.PP
.Vb 2
\& <input name="avatar" type="file">
\& <input id="foo" name="avatar" type="file">
.Ve
.SS "form_for"
.IX Subsection "form_for"
.Vb 10
\& %= form_for login => begin
\& %= text_field \*(Aqfirst_name\*(Aq
\& %= submit_button
\& % end
\& %= form_for login => {format => \*(Aqtxt\*(Aq} => (method => \*(AqPOST\*(Aq) => begin
\& %= text_field \*(Aqfirst_name\*(Aq
\& %= submit_button
\& % end
\& %= form_for \*(Aq/login\*(Aq => (enctype => \*(Aqmultipart/form\-data\*(Aq) => begin
\& %= text_field \*(Aqfirst_name\*(Aq, disabled => \*(Aqdisabled\*(Aq
\& %= submit_button
\& % end
\& %= form_for \*(Aqhttp://example.com/login\*(Aq => (method => \*(AqPOST\*(Aq) => begin
\& %= text_field \*(Aqfirst_name\*(Aq
\& %= submit_button
\& % end
\& %= form_for some_delete_route => begin
\& %= submit_button \*(AqRemove\*(Aq
\& % end
.Ve
.PP
Generate portable \f(CW\*(C`form\*(C'\fR tag with \*(L"url_for\*(R" in Mojolicious::Controller. For routes that do not allow \f(CW\*(C`GET\*(C'\fR, a
\&\f(CW\*(C`method\*(C'\fR attribute with the value \f(CW\*(C`POST\*(C'\fR will be automatically added. And for methods other than \f(CW\*(C`GET\*(C'\fR or \f(CW\*(C`POST\*(C'\fR,
an \f(CW\*(C`_method\*(C'\fR query parameter will be added as well.
.PP
.Vb 10
\& <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>
.Ve
.SS "hidden_field"
.IX Subsection "hidden_field"
.Vb 2
\& %= hidden_field foo => \*(Aqbar\*(Aq
\& %= hidden_field foo => \*(Aqbar\*(Aq, id => \*(Aqbar\*(Aq
.Ve
.PP
Generate \f(CW\*(C`input\*(C'\fR tag of type \f(CW\*(C`hidden\*(C'\fR.
.PP
.Vb 2
\& <input name="foo" type="hidden" value="bar">
\& <input id="bar" name="foo" type="hidden" value="bar">
.Ve
.SS "image"
.IX Subsection "image"
.Vb 2
\& %= image \*(Aq/images/foo.png\*(Aq
\& %= image \*(Aq/images/foo.png\*(Aq, alt => \*(AqFoo\*(Aq
.Ve
.PP
Generate portable \f(CW\*(C`img\*(C'\fR tag.
.PP
.Vb 2
\& <img src="/path/to/images/foo.png">
\& <img alt="Foo" src="/path/to/images/foo.png">
.Ve
.SS "input_tag"
.IX Subsection "input_tag"
.Vb 3
\& %= input_tag \*(Aqfirst_name\*(Aq
\& %= input_tag first_name => \*(AqDefault\*(Aq
\& %= input_tag \*(Aqemployed\*(Aq, type => \*(Aqcheckbox\*(Aq
.Ve
.PP
Generate \f(CW\*(C`input\*(C'\fR tag. Previous input values will automatically get picked up and shown as default.
.PP
.Vb 3
\& <input name="first_name">
\& <input name="first_name" value="Default">
\& <input name="employed" type="checkbox">
.Ve
.SS "javascript"
.IX Subsection "javascript"
.Vb 5
\& %= javascript \*(Aq/script.js\*(Aq
\& %= javascript \*(Aq/script.js\*(Aq, defer => undef
\& %= javascript begin
\& const a = \*(Aqb\*(Aq;
\& % end
.Ve
.PP
Generate portable \f(CW\*(C`script\*(C'\fR tag for JavaScript asset.
.PP
.Vb 5
\& <script src="/path/to/script.js"></script>
\& <script defer src="/path/to/script.js"></script>
\& <script><![CDATA[
\& const a = \*(Aqb\*(Aq;
\& ]]></script>
.Ve
.SS "label_for"
.IX Subsection "label_for"
.Vb 8
\& %= label_for first_name => \*(AqFirst name\*(Aq
\& %= label_for first_name => \*(AqFirst name\*(Aq, class => \*(Aquser\*(Aq
\& %= label_for first_name => begin
\& First name
\& % end
\& %= label_for first_name => (class => \*(Aquser\*(Aq) => begin
\& First name
\& % end
.Ve
.PP
Generate \f(CW\*(C`label\*(C'\fR tag.
.PP
.Vb 8
\& <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>
.Ve
.SS "link_to"
.IX Subsection "link_to"
.Vb 10
\& %= link_to Home => \*(Aqindex\*(Aq
\& %= link_to Home => \*(Aqindex\*(Aq => {format => \*(Aqtxt\*(Aq} => (class => \*(Aqmenu\*(Aq)
\& %= link_to index => {format => \*(Aqtxt\*(Aq} => (class => \*(Aqmenu\*(Aq) => begin
\& Home
\& % end
\& %= link_to Contact => \*(Aqmailto:sri@example.com\*(Aq
\& <%= link_to index => begin %>Home<% end %>
\& <%= link_to \*(Aq/file.txt\*(Aq => begin %>File<% end %>
\& <%= link_to \*(Aqhttps://mojolicious.org\*(Aq => begin %>Mojolicious<% end %>
\& <%= link_to url_for\->query(foo => \*(Aqbar\*(Aq)\->to_abs => begin %>Retry<% end %>
.Ve
.PP
Generate portable \f(CW\*(C`a\*(C'\fR tag with \*(L"url_for\*(R" in Mojolicious::Controller, defaults to using the capitalized link target as
content.
.PP
.Vb 10
\& <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="https://mojolicious.org">Mojolicious</a>
\& <a href="http://127.0.0.1:3000/current/path?foo=bar">Retry</a>
.Ve
.PP
The first argument to \f(CW\*(C`link_to\*(C'\fR is the link content, except when the
final argument is Perl code such as a template block (created with the
\&\f(CW\*(C`begin\*(C'\fR and \f(CW\*(C`end\*(C'\fR keywords); in that case, the link content is
omitted at the start of the argument list, and the block will become
the link content.
.SS "month_field"
.IX Subsection "month_field"
.Vb 3
\& %= month_field \*(Aqvacation\*(Aq
\& %= month_field vacation => \*(Aq2012\-12\*(Aq
\& %= month_field vacation => \*(Aq2012\-12\*(Aq, id => \*(Aqfoo\*(Aq
.Ve
.PP
Generate \f(CW\*(C`input\*(C'\fR tag of type \f(CW\*(C`month\*(C'\fR. Previous input values will automatically get picked up and shown as default.
.PP
.Vb 3
\& <input name="vacation" type="month">
\& <input name="vacation" type="month" value="2012\-12">
\& <input id="foo" name="vacation" type="month" value="2012\-12">
.Ve
.SS "number_field"
.IX Subsection "number_field"
.Vb 3
\& %= number_field \*(Aqage\*(Aq
\& %= number_field age => 25
\& %= number_field age => 25, id => \*(Aqfoo\*(Aq, min => 0, max => 200
.Ve
.PP
Generate \f(CW\*(C`input\*(C'\fR tag of type \f(CW\*(C`number\*(C'\fR. Previous input values will automatically get picked up and shown as default.
.PP
.Vb 3
\& <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">
.Ve
.SS "password_field"
.IX Subsection "password_field"
.Vb 2
\& %= password_field \*(Aqpass\*(Aq
\& %= password_field \*(Aqpass\*(Aq, id => \*(Aqfoo\*(Aq
.Ve
.PP
Generate \f(CW\*(C`input\*(C'\fR tag of type \f(CW\*(C`password\*(C'\fR.
.PP
.Vb 2
\& <input name="pass" type="password">
\& <input id="foo" name="pass" type="password">
.Ve
.SS "radio_button"
.IX Subsection "radio_button"
.Vb 3
\& %= radio_button \*(Aqtest\*(Aq
\& %= radio_button country => \*(Aqgermany\*(Aq
\& %= radio_button country => \*(Aqgermany\*(Aq, checked => undef, id => \*(Aqfoo\*(Aq
.Ve
.PP
Generate \f(CW\*(C`input\*(C'\fR tag of type \f(CW\*(C`radio\*(C'\fR. Previous input values will automatically get picked up and shown as default.
.PP
.Vb 3
\& <input name="test" type="radio">
\& <input name="country" type="radio" value="germany">
\& <input checked id="foo" name="country" type="radio" value="germany">
.Ve
.SS "range_field"
.IX Subsection "range_field"
.Vb 3
\& %= range_field \*(Aqage\*(Aq
\& %= range_field age => 25
\& %= range_field age => 25, id => \*(Aqfoo\*(Aq, min => 0, max => 200
.Ve
.PP
Generate \f(CW\*(C`input\*(C'\fR tag of type \f(CW\*(C`range\*(C'\fR. Previous input values will automatically get picked up and shown as default.
.PP
.Vb 3
\& <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">
.Ve
.SS "search_field"
.IX Subsection "search_field"
.Vb 3
\& %= search_field \*(Aqq\*(Aq
\& %= search_field q => \*(Aqperl\*(Aq
\& %= search_field q => \*(Aqperl\*(Aq, id => \*(Aqfoo\*(Aq
.Ve
.PP
Generate \f(CW\*(C`input\*(C'\fR tag of type \f(CW\*(C`search\*(C'\fR. Previous input values will automatically get picked up and shown as default.
.PP
.Vb 3
\& <input name="q" type="search">
\& <input name="q" type="search" value="perl">
\& <input id="foo" name="q" type="search" value="perl">
.Ve
.SS "select_field"
.IX Subsection "select_field"
.Vb 5
\& %= select_field country => [\*(Aqde\*(Aq, \*(Aqen\*(Aq]
\& %= select_field country => [[Germany => \*(Aqde\*(Aq], \*(Aqen\*(Aq], id => \*(Aqeu\*(Aq
\& %= select_field country => [[Germany => \*(Aqde\*(Aq, selected => \*(Aqselected\*(Aq], \*(Aqen\*(Aq]
\& %= select_field country => [c(EU => [[Germany => \*(Aqde\*(Aq], \*(Aqen\*(Aq], id => \*(Aqeu\*(Aq)]
\& %= select_field country => [c(EU => [\*(Aqde\*(Aq, \*(Aqen\*(Aq]), c(Asia => [\*(Aqcn\*(Aq, \*(Aqjp\*(Aq])]
.Ve
.PP
Generate \f(CW\*(C`select\*(C'\fR and \f(CW\*(C`option\*(C'\fR tags from array references and \f(CW\*(C`optgroup\*(C'\fR tags from Mojo::Collection objects.
Previous input values will automatically get picked up and shown as default.
.PP
.Vb 10
\& <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 selected="selected" 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>
.Ve
.SS "stylesheet"
.IX Subsection "stylesheet"
.Vb 5
\& %= stylesheet \*(Aq/foo.css\*(Aq
\& %= stylesheet \*(Aq/foo.css\*(Aq, title => \*(AqFoo style\*(Aq
\& %= stylesheet begin
\& body {color: #000}
\& % end
.Ve
.PP
Generate portable \f(CW\*(C`style\*(C'\fR or \f(CW\*(C`link\*(C'\fR tag for \s-1CSS\s0 asset.
.PP
.Vb 5
\& <link href="/path/to/foo.css" rel="stylesheet">
\& <link href="/path/to/foo.css" rel="stylesheet" title="Foo style">
\& <style><![CDATA[
\& body {color: #000}
\& ]]></style>
.Ve
.SS "submit_button"
.IX Subsection "submit_button"
.Vb 2
\& %= submit_button
\& %= submit_button \*(AqOk!\*(Aq, id => \*(Aqfoo\*(Aq
.Ve
.PP
Generate \f(CW\*(C`input\*(C'\fR tag of type \f(CW\*(C`submit\*(C'\fR.
.PP
.Vb 2
\& <input type="submit" value="Ok">
\& <input id="foo" type="submit" value="Ok!">
.Ve
.SS "t"
.IX Subsection "t"
.Vb 1
\& %= t div => \*(Aqtest & 123\*(Aq
.Ve
.PP
Alias for \*(L"tag\*(R".
.PP
.Vb 1
\& <div>test & 123</div>
.Ve
.SS "tag"
.IX Subsection "tag"
.Vb 10
\& %= tag \*(Aqbr\*(Aq
\& %= tag \*(Aqdiv\*(Aq
\& %= tag \*(Aqdiv\*(Aq, id => \*(Aqfoo\*(Aq, hidden => undef
\& %= tag \*(Aqdiv\*(Aq, \*(Aqtest & 123\*(Aq
\& %= tag \*(Aqdiv\*(Aq, id => \*(Aqfoo\*(Aq, \*(Aqtest & 123\*(Aq
\& %= tag \*(Aqdiv\*(Aq, data => {my_id => 1, Name => \*(Aqtest\*(Aq}, \*(Aqtest & 123\*(Aq
\& %= tag div => begin
\& test & 123
\& % end
\& <%= tag div => (id => \*(Aqfoo\*(Aq) => begin %>test & 123<% end %>
.Ve
.PP
Alias for \*(L"new_tag\*(R" in Mojo::DOM.
.PP
.Vb 10
\& <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>
.Ve
.PP
Very useful for reuse in more specific tag helpers.
.PP
.Vb 4
\& my $output = $c\->tag(\*(Aqmeta\*(Aq);
\& my $output = $c\->tag(\*(Aqmeta\*(Aq, charset => \*(AqUTF\-8\*(Aq);
\& my $output = $c\->tag(\*(Aqdiv\*(Aq, \*(Aq<p>This will be escaped</p>\*(Aq);
\& my $output = $c\->tag(\*(Aqdiv\*(Aq, sub { \*(Aq<p>This will not be escaped</p>\*(Aq });
.Ve
.PP
Results are automatically wrapped in Mojo::ByteStream objects to prevent accidental double escaping in \f(CW\*(C`ep\*(C'\fR
templates.
.SS "tag_with_error"
.IX Subsection "tag_with_error"
.Vb 1
\& %= tag_with_error \*(Aqinput\*(Aq, class => \*(Aqfoo\*(Aq
.Ve
.PP
Same as \*(L"tag\*(R", but adds the class \f(CW\*(C`field\-with\-error\*(C'\fR.
.PP
.Vb 1
\& <input class="foo field\-with\-error">
.Ve
.SS "tel_field"
.IX Subsection "tel_field"
.Vb 3
\& %= tel_field \*(Aqwork\*(Aq
\& %= tel_field work => \*(Aq123456789\*(Aq
\& %= tel_field work => \*(Aq123456789\*(Aq, id => \*(Aqfoo\*(Aq
.Ve
.PP
Generate \f(CW\*(C`input\*(C'\fR tag of type \f(CW\*(C`tel\*(C'\fR. Previous input values will automatically get picked up and shown as default.
.PP
.Vb 3
\& <input name="work" type="tel">
\& <input name="work" type="tel" value="123456789">
\& <input id="foo" name="work" type="tel" value="123456789">
.Ve
.SS "text_area"
.IX Subsection "text_area"
.Vb 6
\& %= text_area \*(Aqstory\*(Aq
\& %= text_area \*(Aqstory\*(Aq, cols => 40
\& %= text_area story => \*(AqDefault\*(Aq, cols => 40
\& %= text_area story => (cols => 40) => begin
\& Default
\& % end
.Ve
.PP
Generate \f(CW\*(C`textarea\*(C'\fR tag. Previous input values will automatically get picked up and shown as default.
.PP
.Vb 6
\& <textarea name="story"></textarea>
\& <textarea cols="40" name="story"></textarea>
\& <textarea cols="40" name="story">Default</textarea>
\& <textarea cols="40" name="story">
\& Default
\& </textarea>
.Ve
.SS "text_field"
.IX Subsection "text_field"
.Vb 3
\& %= text_field \*(Aqfirst_name\*(Aq
\& %= text_field first_name => \*(AqDefault\*(Aq
\& %= text_field first_name => \*(AqDefault\*(Aq, class => \*(Aquser\*(Aq
.Ve
.PP
Generate \f(CW\*(C`input\*(C'\fR tag of type \f(CW\*(C`text\*(C'\fR. Previous input values will automatically get picked up and shown as default.
.PP
.Vb 3
\& <input name="first_name" type="text">
\& <input name="first_name" type="text" value="Default">
\& <input class="user" name="first_name" type="text" value="Default">
.Ve
.SS "time_field"
.IX Subsection "time_field"
.Vb 3
\& %= time_field \*(Aqstart\*(Aq
\& %= time_field start => \*(Aq23:59:59\*(Aq
\& %= time_field start => \*(Aq23:59:59\*(Aq, id => \*(Aqfoo\*(Aq
.Ve
.PP
Generate \f(CW\*(C`input\*(C'\fR tag of type \f(CW\*(C`time\*(C'\fR. Previous input values will automatically get picked up and shown as default.
.PP
.Vb 3
\& <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">
.Ve
.SS "url_field"
.IX Subsection "url_field"
.Vb 3
\& %= url_field \*(Aqaddress\*(Aq
\& %= url_field address => \*(Aqhttps://mojolicious.org\*(Aq
\& %= url_field address => \*(Aqhttps://mojolicious.org\*(Aq, id => \*(Aqfoo\*(Aq
.Ve
.PP
Generate \f(CW\*(C`input\*(C'\fR tag of type \f(CW\*(C`url\*(C'\fR. Previous input values will automatically get picked up and shown as default.
.PP
.Vb 3
\& <input name="address" type="url">
\& <input name="address" type="url" value="https://mojolicious.org">
\& <input id="foo" name="address" type="url" value="https://mojolicious.org">
.Ve
.SS "week_field"
.IX Subsection "week_field"
.Vb 3
\& %= week_field \*(Aqvacation\*(Aq
\& %= week_field vacation => \*(Aq2012\-W17\*(Aq
\& %= week_field vacation => \*(Aq2012\-W17\*(Aq, id => \*(Aqfoo\*(Aq
.Ve
.PP
Generate \f(CW\*(C`input\*(C'\fR tag of type \f(CW\*(C`week\*(C'\fR. Previous input values will automatically get picked up and shown as default.
.PP
.Vb 3
\& <input name="vacation" type="week">
\& <input name="vacation" type="week" value="2012\-W17">
\& <input id="foo" name="vacation" type="week" value="2012\-W17">
.Ve
.SH "METHODS"
.IX Header "METHODS"
Mojolicious::Plugin::TagHelpers inherits all methods from Mojolicious::Plugin and implements the following new
ones.
.SS "register"
.IX Subsection "register"
.Vb 1
\& $plugin\->register(Mojolicious\->new);
.Ve
.PP
Register helpers in Mojolicious application.
.SH "SEE ALSO"
.IX Header "SEE ALSO"
Mojolicious, Mojolicious::Guides, <https://mojolicious.org>.