1Mojolicious::Plugin::TaUgsHeerlpCeornst(r3i)buted Perl DMoocjuomleinctiaotuiso:n:Plugin::TagHelpers(3)
2
6 Mojolicious::Plugin::TagHelpers - Tag helpers plugin
7
9 # Mojolicious
10 $app->plugin('TagHelpers');
11 # Mojolicious::Lite
13 plugin 'TagHelpers';
14
16 Mojolicious::Plugin::TagHelpers is a collection of HTML tag helpers for
17 Mojolicious, based on the HTML Living Standard
18 <https://html.spec.whatwg.org>.
19 Most form helpers can automatically pick up previous input values and
21 will show them as default. You can also use "param" in
22 Mojolicious::Plugin::DefaultHelpers to set them manually and let
23 necessary attributes always be generated automatically.
24 % param country => 'germany' unless param 'country';
26 <%= radio_button country => 'germany' %> Germany
27 <%= radio_button country => 'france' %> France
28 <%= radio_button country => 'uk' %> UK
29 For fields that failed validation with "validation" in
31 Mojolicious::Plugin::DefaultHelpers the "field-with-error" class will
32 be automatically added through "tag_with_error", to make styling with
33 CSS easier.
34 <input class="field-with-error" name="age" type="text" value="250">
36 This is a core plugin, that means it is always enabled and its code a
38 good example for learning how to build new plugins, you're welcome to
39 fork it.
40 See "PLUGINS" in Mojolicious::Plugins for a list of plugins that are
42 available by default.
43
45 Mojolicious::Plugin::TagHelpers implements the following helpers.
46 asset_tag
48 %= asset_tag '/app.js'
49 %= asset_tag '/app.js', async => 'async'
50 Generate "script", "link" or "img" tag for static asset.
52 button_to
54 %= button_to Test => 'some_get_route'
55 %= button_to Test => some_get_route => {id => 23} => (class => 'menu')
56 %= button_to Test => 'http://example.com/test' => (class => 'menu')
57 %= button_to Remove => 'some_delete_route'
58 Generate portable "form" tag with "form_for", containing a single
60 button.
61 <form action="/path/to/get/route">
63 <input type="submit" value="Test">
64 </form>
65 <form action="/path/to/get/route/23" class="menu">
66 <input type="submit" value="Test">
67 </form>
68 <form action="http://example.com/test" class="menu">
69 <input type="submit" value="Test">
70 </form>
71 <form action="/path/to/delete/route?_method=DELETE" method="POST">
72 <input type="submit" value="Remove">
73 </form>
74 check_box
76 %= check_box 'employed'
77 %= check_box employed => 1
78 %= check_box employed => 1, checked => undef, id => 'foo'
79 Generate "input" tag of type "checkbox". Previous input values will
81 automatically get picked up and shown as default.
82 <input name="employed" type="checkbox">
84 <input name="employed" type="checkbox" value="1">
85 <input checked id="foo" name="employed" type="checkbox" value="1">
86 color_field
88 %= color_field 'background'
89 %= color_field background => '#ffffff'
90 %= color_field background => '#ffffff', id => 'foo'
91 Generate "input" tag of type "color". Previous input values will
93 automatically get picked up and shown as default.
94 <input name="background" type="color">
96 <input name="background" type="color" value="#ffffff">
97 <input id="foo" name="background" type="color" value="#ffffff">
98 csrf_button_to
100 %= csrf_button_to Remove => 'some_delete_route'
101 Same as "button_to", but also includes a "csrf_field".
103 <form action="/path/to/delete/route?_method=DELETE" method="POST">
105 <input name="csrf_token" type="hidden" value="fa6a08...">
106 <input type="submit" value="Remove">
107 </form>
108 csrf_field
110 %= csrf_field
111 Generate "input" tag of type "hidden" with "csrf_token" in
113 Mojolicious::Plugin::DefaultHelpers.
114 <input name="csrf_token" type="hidden" value="fa6a08...">
116 date_field
118 %= date_field 'end'
119 %= date_field end => '2012-12-21'
120 %= date_field end => '2012-12-21', id => 'foo'
121 Generate "input" tag of type "date". Previous input values will
123 automatically get picked up and shown as default.
124 <input name="end" type="date">
126 <input name="end" type="date" value="2012-12-21">
127 <input id="foo" name="end" type="date" value="2012-12-21">
128 datetime_field
130 %= datetime_field 'end'
131 %= datetime_field end => '2012-12-21T23:59:59'
132 %= datetime_field end => '2012-12-21T23:59:59', id => 'foo'
133 Generate "input" tag of type "datetime-local". Previous input values
135 will automatically get picked up and shown as default.
136 <input name="end" type="datetime-local">
138 <input name="end" type="datetime-local" value="2012-12-21T23:59:59">
139 <input id="foo" name="end" type="datetime-local" value="2012-12-21T23:59:59">
140 email_field
142 %= email_field 'notify'
143 %= email_field notify => 'nospam@example.com'
144 %= email_field notify => 'nospam@example.com', id => 'foo'
145 Generate "input" tag of type "email". Previous input values will
147 automatically get picked up and shown as default.
148 <input name="notify" type="email">
150 <input name="notify" type="email" value="nospam@example.com">
151 <input id="foo" name="notify" type="email" value="nospam@example.com">
152 favicon
154 %= favicon
155 %= favicon '/favicon.ico';
156 Generate "link" tag for favicon, defaulting to the one that comes
158 bundled with Mojolicious.
159 <link rel="icon" href="/mojo/favicon.ico">
161 <link rel="icon" href="/favicon.ico">
162 file_field
164 %= file_field 'avatar'
165 %= file_field 'avatar', id => 'foo'
166 Generate "input" tag of type "file".
168 <input name="avatar" type="file">
170 <input id="foo" name="avatar" type="file">
171 form_for
173 %= form_for login => begin
174 %= text_field 'first_name'
175 %= submit_button
176 % end
177 %= form_for login => {format => 'txt'} => (method => 'POST') => begin
178 %= text_field 'first_name'
179 %= submit_button
180 % end
181 %= form_for '/login' => (enctype => 'multipart/form-data') => begin
182 %= text_field 'first_name', disabled => 'disabled'
183 %= submit_button
184 % end
185 %= form_for 'http://example.com/login' => (method => 'POST') => begin
186 %= text_field 'first_name'
187 %= submit_button
188 % end
189 %= form_for some_delete_route => begin
190 %= submit_button 'Remove'
191 % end
192 Generate portable "form" tag with "url_for" in Mojolicious::Controller.
194 For routes that do not allow "GET", a "method" attribute with the value
195 "POST" will be automatically added. And for methods other than "GET" or
196 "POST", an "_method" query parameter will be added as well.
197 <form action="/path/to/login">
199 <input name="first_name" type="text">
200 <input type="submit" value="Ok">
201 </form>
202 <form action="/path/to/login.txt" method="POST">
203 <input name="first_name" type="text">
204 <input type="submit" value="Ok">
205 </form>
206 <form action="/path/to/login" enctype="multipart/form-data">
207 <input disabled="disabled" name="first_name" type="text">
208 <input type="submit" value="Ok">
209 </form>
210 <form action="http://example.com/login" method="POST">
211 <input name="first_name" type="text">
212 <input type="submit" value="Ok">
213 </form>
214 <form action="/path/to/delete/route?_method=DELETE" method="POST">
215 <input type="submit" value="Remove">
216 </form>
217 hidden_field
219 %= hidden_field foo => 'bar'
220 %= hidden_field foo => 'bar', id => 'bar'
221 Generate "input" tag of type "hidden".
223 <input name="foo" type="hidden" value="bar">
225 <input id="bar" name="foo" type="hidden" value="bar">
226 image
228 %= image '/images/foo.png'
229 %= image '/images/foo.png', alt => 'Foo'
230 Generate portable "img" tag.
232 <img src="/path/to/images/foo.png">
234 <img alt="Foo" src="/path/to/images/foo.png">
235 input_tag
237 %= input_tag 'first_name'
238 %= input_tag first_name => 'Default'
239 %= input_tag 'employed', type => 'checkbox'
240 Generate "input" tag. Previous input values will automatically get
242 picked up and shown as default.
243 <input name="first_name">
245 <input name="first_name" value="Default">
246 <input name="employed" type="checkbox">
247 javascript
249 %= javascript '/script.js'
250 %= javascript '/script.js', defer => undef
251 %= javascript begin
252 const a = 'b';
253 % end
254 Generate portable "script" tag for JavaScript asset.
256 <script src="/path/to/script.js"></script>
258 <script defer src="/path/to/script.js"></script>
259 <script><![CDATA[
260 const a = 'b';
261 ]]></script>
262 label_for
264 %= label_for first_name => 'First name'
265 %= label_for first_name => 'First name', class => 'user'
266 %= label_for first_name => begin
267 First name
268 % end
269 %= label_for first_name => (class => 'user') => begin
270 First name
271 % end
272 Generate "label" tag.
274 <label for="first_name">First name</label>
276 <label class="user" for="first_name">First name</label>
277 <label for="first_name">
278 First name
279 </label>
280 <label class="user" for="first_name">
281 First name
282 </label>
283 link_to
285 %= link_to Home => 'index'
286 %= link_to Home => 'index' => {format => 'txt'} => (class => 'menu')
287 %= link_to index => {format => 'txt'} => (class => 'menu') => begin
288 Home
289 % end
290 %= link_to Contact => 'mailto:sri@example.com'
291 <%= link_to index => begin %>Home<% end %>
292 <%= link_to '/file.txt' => begin %>File<% end %>
293 <%= link_to 'https://mojolicious.org' => begin %>Mojolicious<% end %>
294 <%= link_to url_for->query(foo => 'bar')->to_abs => begin %>Retry<% end %>
295 Generate portable "a" tag with "url_for" in Mojolicious::Controller,
297 defaults to using the capitalized link target as content.
298 <a href="/path/to/index">Home</a>
300 <a class="menu" href="/path/to/index.txt">Home</a>
301 <a class="menu" href="/path/to/index.txt">
302 Home
303 </a>
304 <a href="mailto:sri@example.com">Contact</a>
305 <a href="/path/to/index">Home</a>
306 <a href="/path/to/file.txt">File</a>
307 <a href="https://mojolicious.org">Mojolicious</a>
308 <a href="http://127.0.0.1:3000/current/path?foo=bar">Retry</a>
309 The first argument to "link_to" is the link content, except when the
311 final argument is Perl code such as a template block (created with the
312 "begin" and "end" keywords); in that case, the link content is omitted
313 at the start of the argument list, and the block will become the link
314 content.
315 month_field
317 %= month_field 'vacation'
318 %= month_field vacation => '2012-12'
319 %= month_field vacation => '2012-12', id => 'foo'
320 Generate "input" tag of type "month". Previous input values will
322 automatically get picked up and shown as default.
323 <input name="vacation" type="month">
325 <input name="vacation" type="month" value="2012-12">
326 <input id="foo" name="vacation" type="month" value="2012-12">
327 number_field
329 %= number_field 'age'
330 %= number_field age => 25
331 %= number_field age => 25, id => 'foo', min => 0, max => 200
332 Generate "input" tag of type "number". Previous input values will
334 automatically get picked up and shown as default.
335 <input name="age" type="number">
337 <input name="age" type="number" value="25">
338 <input id="foo" max="200" min="0" name="age" type="number" value="25">
339 password_field
341 %= password_field 'pass'
342 %= password_field 'pass', id => 'foo'
343 Generate "input" tag of type "password".
345 <input name="pass" type="password">
347 <input id="foo" name="pass" type="password">
348 radio_button
350 %= radio_button 'test'
351 %= radio_button country => 'germany'
352 %= radio_button country => 'germany', checked => undef, id => 'foo'
353 Generate "input" tag of type "radio". Previous input values will
355 automatically get picked up and shown as default.
356 <input name="test" type="radio">
358 <input name="country" type="radio" value="germany">
359 <input checked id="foo" name="country" type="radio" value="germany">
360 range_field
362 %= range_field 'age'
363 %= range_field age => 25
364 %= range_field age => 25, id => 'foo', min => 0, max => 200
365 Generate "input" tag of type "range". Previous input values will
367 automatically get picked up and shown as default.
368 <input name="age" type="range">
370 <input name="age" type="range" value="25">
371 <input id="foo" max="200" min="200" name="age" type="range" value="25">
372 search_field
374 %= search_field 'q'
375 %= search_field q => 'perl'
376 %= search_field q => 'perl', id => 'foo'
377 Generate "input" tag of type "search". Previous input values will
379 automatically get picked up and shown as default.
380 <input name="q" type="search">
382 <input name="q" type="search" value="perl">
383 <input id="foo" name="q" type="search" value="perl">
384 select_field
386 %= select_field country => ['de', 'en']
387 %= select_field country => [[Germany => 'de'], 'en'], id => 'eu'
388 %= select_field country => [[Germany => 'de', selected => 'selected'], 'en']
389 %= select_field country => [c(EU => [[Germany => 'de'], 'en'], id => 'eu')]
390 %= select_field country => [c(EU => ['de', 'en']), c(Asia => ['cn', 'jp'])]
391 Generate "select" and "option" tags from array references and
393 "optgroup" tags from Mojo::Collection objects. Previous input values
394 will automatically get picked up and shown as default.
395 <select name="country">
397 <option value="de">de</option>
398 <option value="en">en</option>
399 </select>
400 <select id="eu" name="country">
401 <option value="de">Germany</option>
402 <option value="en">en</option>
403 </select>
404 <select name="country">
405 <option selected="selected" value="de">Germany</option>
406 <option value="en">en</option>
407 </select>
408 <select name="country">
409 <optgroup id="eu" label="EU">
410 <option value="de">Germany</option>
411 <option value="en">en</option>
412 </optgroup>
413 </select>
414 <select name="country">
415 <optgroup label="EU">
416 <option value="de">de</option>
417 <option value="en">en</option>
418 </optgroup>
419 <optgroup label="Asia">
420 <option value="cn">cn</option>
421 <option value="jp">jp</option>
422 </optgroup>
423 </select>
424 stylesheet
426 %= stylesheet '/foo.css'
427 %= stylesheet '/foo.css', title => 'Foo style'
428 %= stylesheet begin
429 body {color: #000}
430 % end
431 Generate portable "style" or "link" tag for CSS asset.
433 <link href="/path/to/foo.css" rel="stylesheet">
435 <link href="/path/to/foo.css" rel="stylesheet" title="Foo style">
436 <style><![CDATA[
437 body {color: #000}
438 ]]></style>
439 submit_button
441 %= submit_button
442 %= submit_button 'Ok!', id => 'foo'
443 Generate "input" tag of type "submit".
445 <input type="submit" value="Ok">
447 <input id="foo" type="submit" value="Ok!">
448 t
450 %= t div => 'test & 123'
451 Alias for "tag".
453 <div>test & 123</div>
455 tag
457 %= tag 'br'
458 %= tag 'div'
459 %= tag 'div', id => 'foo', hidden => undef
460 %= tag 'div', 'test & 123'
461 %= tag 'div', id => 'foo', 'test & 123'
462 %= tag 'div', data => {my_id => 1, Name => 'test'}, 'test & 123'
463 %= tag div => begin
464 test & 123
465 % end
466 <%= tag div => (id => 'foo') => begin %>test & 123<% end %>
467 Alias for "new_tag" in Mojo::DOM.
469 <br>
471 <div></div>
472 <div id="foo" hidden></div>
473 <div>test & 123</div>
474 <div id="foo">test & 123</div>
475 <div data-my-id="1" data-name="test">test & 123</div>
476 <div>
477 test & 123
478 </div>
479 <div id="foo">test & 123</div>
480 Very useful for reuse in more specific tag helpers.
482 my $output = $c->tag('meta');
484 my $output = $c->tag('meta', charset => 'UTF-8');
485 my $output = $c->tag('div', '<p>This will be escaped</p>');
486 my $output = $c->tag('div', sub { '<p>This will not be escaped</p>' });
487 Results are automatically wrapped in Mojo::ByteStream objects to
489 prevent accidental double escaping in "ep" templates.
490 tag_with_error
492 %= tag_with_error 'input', class => 'foo'
493 Same as "tag", but adds the class "field-with-error".
495 <input class="foo field-with-error">
497 tel_field
499 %= tel_field 'work'
500 %= tel_field work => '123456789'
501 %= tel_field work => '123456789', id => 'foo'
502 Generate "input" tag of type "tel". Previous input values will
504 automatically get picked up and shown as default.
505 <input name="work" type="tel">
507 <input name="work" type="tel" value="123456789">
508 <input id="foo" name="work" type="tel" value="123456789">
509 text_area
511 %= text_area 'story'
512 %= text_area 'story', cols => 40
513 %= text_area story => 'Default', cols => 40
514 %= text_area story => (cols => 40) => begin
515 Default
516 % end
517 Generate "textarea" tag. Previous input values will automatically get
519 picked up and shown as default.
520 <textarea name="story"></textarea>
522 <textarea cols="40" name="story"></textarea>
523 <textarea cols="40" name="story">Default</textarea>
524 <textarea cols="40" name="story">
525 Default
526 </textarea>
527 text_field
529 %= text_field 'first_name'
530 %= text_field first_name => 'Default'
531 %= text_field first_name => 'Default', class => 'user'
532 Generate "input" tag of type "text". Previous input values will
534 automatically get picked up and shown as default.
535 <input name="first_name" type="text">
537 <input name="first_name" type="text" value="Default">
538 <input class="user" name="first_name" type="text" value="Default">
539 time_field
541 %= time_field 'start'
542 %= time_field start => '23:59:59'
543 %= time_field start => '23:59:59', id => 'foo'
544 Generate "input" tag of type "time". Previous input values will
546 automatically get picked up and shown as default.
547 <input name="start" type="time">
549 <input name="start" type="time" value="23:59:59">
550 <input id="foo" name="start" type="time" value="23:59:59">
551 url_field
553 %= url_field 'address'
554 %= url_field address => 'https://mojolicious.org'
555 %= url_field address => 'https://mojolicious.org', id => 'foo'
556 Generate "input" tag of type "url". Previous input values will
558 automatically get picked up and shown as default.
559 <input name="address" type="url">
561 <input name="address" type="url" value="https://mojolicious.org">
562 <input id="foo" name="address" type="url" value="https://mojolicious.org">
563 week_field
565 %= week_field 'vacation'
566 %= week_field vacation => '2012-W17'
567 %= week_field vacation => '2012-W17', id => 'foo'
568 Generate "input" tag of type "week". Previous input values will
570 automatically get picked up and shown as default.
571 <input name="vacation" type="week">
573 <input name="vacation" type="week" value="2012-W17">
574 <input id="foo" name="vacation" type="week" value="2012-W17">
575
577 Mojolicious::Plugin::TagHelpers inherits all methods from
578 Mojolicious::Plugin and implements the following new ones.
579 register
581 $plugin->register(Mojolicious->new);
582 Register helpers in Mojolicious application.
584
586 Mojolicious, Mojolicious::Guides, <https://mojolicious.org>.
587perl v5.38.0 2023-09-11Mojolicious::Plugin::TagHelpers(3)