1Mojolicious::Plugin::TaUgsHeerlpCeornst(r3i)buted Perl DMoocjuomleinctiaotuiso:n:Plugin::TagHelpers(3)
2
3
4

NAME

6       Mojolicious::Plugin::TagHelpers - Tag helpers plugin
7

SYNOPSIS

9         # Mojolicious
10         $app->plugin('TagHelpers');
11
12         # Mojolicious::Lite
13         plugin 'TagHelpers';
14

DESCRIPTION

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
20       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
25         % 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
30       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
35         <input class="field-with-error" name="age" type="text" value="250">
36
37       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
41       See "PLUGINS" in Mojolicious::Plugins for a list of plugins that are
42       available by default.
43

HELPERS

45       Mojolicious::Plugin::TagHelpers implements the following helpers.
46
47   button_to
48         %= button_to Test => 'some_get_route'
49         %= button_to Test => some_get_route => {id => 23} => (class => 'menu')
50         %= button_to Test => 'http://example.com/test' => (class => 'menu')
51         %= button_to Remove => 'some_delete_route'
52
53       Generate portable "form" tag with "form_for", containing a single
54       button.
55
56         <form action="/path/to/get/route">
57           <input type="submit" value="Test">
58         </form>
59         <form action="/path/to/get/route/23" class="menu">
60           <input type="submit" value="Test">
61         </form>
62         <form action="http://example.com/test" class="menu">
63           <input type="submit" value="Test">
64         </form>
65         <form action="/path/to/delete/route?_method=DELETE" method="POST">
66           <input type="submit" value="Remove">
67         </form>
68
69   check_box
70         %= check_box 'employed'
71         %= check_box employed => 1
72         %= check_box employed => 1, checked => undef, id => 'foo'
73
74       Generate "input" tag of type "checkbox". Previous input values will
75       automatically get picked up and shown as default.
76
77         <input name="employed" type="checkbox">
78         <input name="employed" type="checkbox" value="1">
79         <input checked id="foo" name="employed" type="checkbox" value="1">
80
81   color_field
82         %= color_field 'background'
83         %= color_field background => '#ffffff'
84         %= color_field background => '#ffffff', id => 'foo'
85
86       Generate "input" tag of type "color". Previous input values will
87       automatically get picked up and shown as default.
88
89         <input name="background" type="color">
90         <input name="background" type="color" value="#ffffff">
91         <input id="foo" name="background" type="color" value="#ffffff">
92
93   csrf_button_to
94         %= csrf_button_to Remove => 'some_delete_route'
95
96       Same as "button_to", but also includes a "csrf_field".
97
98         <form action="/path/to/delete/route?_method=DELETE" method="POST">
99           <input name="csrf_token" type="hidden" value="fa6a08...">
100           <input type="submit" value="Remove">
101         </form>
102
103   csrf_field
104         %= csrf_field
105
106       Generate "input" tag of type "hidden" with "csrf_token" in
107       Mojolicious::Plugin::DefaultHelpers.
108
109         <input name="csrf_token" type="hidden" value="fa6a08...">
110
111   date_field
112         %= date_field 'end'
113         %= date_field end => '2012-12-21'
114         %= date_field end => '2012-12-21', id => 'foo'
115
116       Generate "input" tag of type "date". Previous input values will
117       automatically get picked up and shown as default.
118
119         <input name="end" type="date">
120         <input name="end" type="date" value="2012-12-21">
121         <input id="foo" name="end" type="date" value="2012-12-21">
122
123   datetime_field
124         %= datetime_field 'end'
125         %= datetime_field end => '2012-12-21T23:59:59'
126         %= datetime_field end => '2012-12-21T23:59:59', id => 'foo'
127
128       Generate "input" tag of type "datetime-local". Previous input values
129       will automatically get picked up and shown as default.
130
131         <input name="end" type="datetime-local">
132         <input name="end" type="datetime-local" value="2012-12-21T23:59:59">
133         <input id="foo" name="end" type="datetime-local" value="2012-12-21T23:59:59">
134
135   email_field
136         %= email_field 'notify'
137         %= email_field notify => 'nospam@example.com'
138         %= email_field notify => 'nospam@example.com', id => 'foo'
139
140       Generate "input" tag of type "email". Previous input values will
141       automatically get picked up and shown as default.
142
143         <input name="notify" type="email">
144         <input name="notify" type="email" value="nospam@example.com">
145         <input id="foo" name="notify" type="email" value="nospam@example.com">
146
147   file_field
148         %= file_field 'avatar'
149         %= file_field 'avatar', id => 'foo'
150
151       Generate "input" tag of type "file".
152
153         <input name="avatar" type="file">
154         <input id="foo" name="avatar" type="file">
155
156   form_for
157         %= form_for login => begin
158           %= text_field 'first_name'
159           %= submit_button
160         % end
161         %= form_for login => {format => 'txt'} => (method => 'POST') => begin
162           %= text_field 'first_name'
163           %= submit_button
164         % end
165         %= form_for '/login' => (enctype => 'multipart/form-data') => begin
166           %= text_field 'first_name', disabled => 'disabled'
167           %= submit_button
168         % end
169         %= form_for 'http://example.com/login' => (method => 'POST') => begin
170           %= text_field 'first_name'
171           %= submit_button
172         % end
173         %= form_for some_delete_route => begin
174           %= submit_button 'Remove'
175         % end
176
177       Generate portable "form" tag with "url_for" in Mojolicious::Controller.
178       For routes that do not allow "GET", a "method" attribute with the value
179       "POST" will be automatically added. And for methods other than "GET" or
180       "POST", an "_method" query parameter will be added as well.
181
182         <form action="/path/to/login">
183           <input name="first_name" type="text">
184           <input type="submit" value="Ok">
185         </form>
186         <form action="/path/to/login.txt" method="POST">
187           <input name="first_name" type="text">
188           <input type="submit" value="Ok">
189         </form>
190         <form action="/path/to/login" enctype="multipart/form-data">
191           <input disabled="disabled" name="first_name" type="text">
192           <input type="submit" value="Ok">
193         </form>
194         <form action="http://example.com/login" method="POST">
195           <input name="first_name" type="text">
196           <input type="submit" value="Ok">
197         </form>
198         <form action="/path/to/delete/route?_method=DELETE" method="POST">
199           <input type="submit" value="Remove">
200         </form>
201
202   hidden_field
203         %= hidden_field foo => 'bar'
204         %= hidden_field foo => 'bar', id => 'bar'
205
206       Generate "input" tag of type "hidden".
207
208         <input name="foo" type="hidden" value="bar">
209         <input id="bar" name="foo" type="hidden" value="bar">
210
211   image
212         %= image '/images/foo.png'
213         %= image '/images/foo.png', alt => 'Foo'
214
215       Generate portable "img" tag.
216
217         <img src="/path/to/images/foo.png">
218         <img alt="Foo" src="/path/to/images/foo.png">
219
220   input_tag
221         %= input_tag 'first_name'
222         %= input_tag first_name => 'Default'
223         %= input_tag 'employed', type => 'checkbox'
224
225       Generate "input" tag. Previous input values will automatically get
226       picked up and shown as default.
227
228         <input name="first_name">
229         <input name="first_name" value="Default">
230         <input name="employed" type="checkbox">
231
232   javascript
233         %= javascript '/script.js'
234         %= javascript '/script.js', defer => undef
235         %= javascript begin
236           const a = 'b';
237         % end
238
239       Generate portable "script" tag for JavaScript asset.
240
241         <script src="/path/to/script.js"></script>
242         <script defer src="/path/to/script.js"></script>
243         <script><![CDATA[
244           const a = 'b';
245         ]]></script>
246
247   label_for
248         %= label_for first_name => 'First name'
249         %= label_for first_name => 'First name', class => 'user'
250         %= label_for first_name => begin
251           First name
252         % end
253         %= label_for first_name => (class => 'user') => begin
254           First name
255         % end
256
257       Generate "label" tag.
258
259         <label for="first_name">First name</label>
260         <label class="user" for="first_name">First name</label>
261         <label for="first_name">
262           First name
263         </label>
264         <label class="user" for="first_name">
265           First name
266         </label>
267
268   link_to
269         %= link_to Home => 'index'
270         %= link_to Home => 'index' => {format => 'txt'} => (class => 'menu')
271         %= link_to index => {format => 'txt'} => (class => 'menu') => begin
272           Home
273         % end
274         %= link_to Contact => 'mailto:sri@example.com'
275         <%= link_to index => begin %>Home<% end %>
276         <%= link_to '/file.txt' => begin %>File<% end %>
277         <%= link_to 'https://mojolicious.org' => begin %>Mojolicious<% end %>
278         <%= link_to url_for->query(foo => 'bar')->to_abs => begin %>Retry<% end %>
279
280       Generate portable "a" tag with "url_for" in Mojolicious::Controller,
281       defaults to using the capitalized link target as content.
282
283         <a href="/path/to/index">Home</a>
284         <a class="menu" href="/path/to/index.txt">Home</a>
285         <a class="menu" href="/path/to/index.txt">
286           Home
287         </a>
288         <a href="mailto:sri@example.com">Contact</a>
289         <a href="/path/to/index">Home</a>
290         <a href="/path/to/file.txt">File</a>
291         <a href="https://mojolicious.org">Mojolicious</a>
292         <a href="http://127.0.0.1:3000/current/path?foo=bar">Retry</a>
293
294   month_field
295         %= month_field 'vacation'
296         %= month_field vacation => '2012-12'
297         %= month_field vacation => '2012-12', id => 'foo'
298
299       Generate "input" tag of type "month". Previous input values will
300       automatically get picked up and shown as default.
301
302         <input name="vacation" type="month">
303         <input name="vacation" type="month" value="2012-12">
304         <input id="foo" name="vacation" type="month" value="2012-12">
305
306   number_field
307         %= number_field 'age'
308         %= number_field age => 25
309         %= number_field age => 25, id => 'foo', min => 0, max => 200
310
311       Generate "input" tag of type "number". Previous input values will
312       automatically get picked up and shown as default.
313
314         <input name="age" type="number">
315         <input name="age" type="number" value="25">
316         <input id="foo" max="200" min="0" name="age" type="number" value="25">
317
318   password_field
319         %= password_field 'pass'
320         %= password_field 'pass', id => 'foo'
321
322       Generate "input" tag of type "password".
323
324         <input name="pass" type="password">
325         <input id="foo" name="pass" type="password">
326
327   radio_button
328         %= radio_button 'test'
329         %= radio_button country => 'germany'
330         %= radio_button country => 'germany', checked => undef, id => 'foo'
331
332       Generate "input" tag of type "radio". Previous input values will
333       automatically get picked up and shown as default.
334
335         <input name="test" type="radio">
336         <input name="country" type="radio" value="germany">
337         <input checked id="foo" name="country" type="radio" value="germany">
338
339   range_field
340         %= range_field 'age'
341         %= range_field age => 25
342         %= range_field age => 25, id => 'foo', min => 0, max => 200
343
344       Generate "input" tag of type "range". Previous input values will
345       automatically get picked up and shown as default.
346
347         <input name="age" type="range">
348         <input name="age" type="range" value="25">
349         <input id="foo" max="200" min="200" name="age" type="range" value="25">
350
351   search_field
352         %= search_field 'q'
353         %= search_field q => 'perl'
354         %= search_field q => 'perl', id => 'foo'
355
356       Generate "input" tag of type "search". Previous input values will
357       automatically get picked up and shown as default.
358
359         <input name="q" type="search">
360         <input name="q" type="search" value="perl">
361         <input id="foo" name="q" type="search" value="perl">
362
363   select_field
364         %= select_field country => ['de', 'en']
365         %= select_field country => [[Germany => 'de'], 'en'], id => 'eu'
366         %= select_field country => [[Germany => 'de', selected => 'selected'], 'en']
367         %= select_field country => [c(EU => [[Germany => 'de'], 'en'], id => 'eu')]
368         %= select_field country => [c(EU => ['de', 'en']), c(Asia => ['cn', 'jp'])]
369
370       Generate "select" and "option" tags from array references and
371       "optgroup" tags from Mojo::Collection objects.  Previous input values
372       will automatically get picked up and shown as default.
373
374         <select name="country">
375           <option value="de">de</option>
376           <option value="en">en</option>
377         </select>
378         <select id="eu" name="country">
379           <option value="de">Germany</option>
380           <option value="en">en</option>
381         </select>
382         <select name="country">
383           <option selected="selected" value="de">Germany</option>
384           <option value="en">en</option>
385         </select>
386         <select name="country">
387           <optgroup id="eu" label="EU">
388             <option value="de">Germany</option>
389             <option value="en">en</option>
390           </optgroup>
391         </select>
392         <select name="country">
393           <optgroup label="EU">
394             <option value="de">de</option>
395             <option value="en">en</option>
396           </optgroup>
397           <optgroup label="Asia">
398             <option value="cn">cn</option>
399             <option value="jp">jp</option>
400           </optgroup>
401         </select>
402
403   stylesheet
404         %= stylesheet '/foo.css'
405         %= stylesheet '/foo.css', title => 'Foo style'
406         %= stylesheet begin
407           body {color: #000}
408         % end
409
410       Generate portable "style" or "link" tag for CSS asset.
411
412         <link href="/path/to/foo.css" rel="stylesheet">
413         <link href="/path/to/foo.css" rel="stylesheet" title="Foo style">
414         <style><![CDATA[
415           body {color: #000}
416         ]]></style>
417
418   submit_button
419         %= submit_button
420         %= submit_button 'Ok!', id => 'foo'
421
422       Generate "input" tag of type "submit".
423
424         <input type="submit" value="Ok">
425         <input id="foo" type="submit" value="Ok!">
426
427   t
428         %= t div => 'test & 123'
429
430       Alias for "tag".
431
432         <div>test &amp; 123</div>
433
434   tag
435         %= tag 'br'
436         %= tag 'div'
437         %= tag 'div', id => 'foo', hidden => undef
438         %= tag 'div', 'test & 123'
439         %= tag 'div', id => 'foo', 'test & 123'
440         %= tag 'div', data => {my_id => 1, Name => 'test'}, 'test & 123'
441         %= tag div => begin
442           test & 123
443         % end
444         <%= tag div => (id => 'foo') => begin %>test & 123<% end %>
445
446       Alias for "new_tag" in Mojo::DOM.
447
448         <br>
449         <div></div>
450         <div id="foo" hidden></div>
451         <div>test &amp; 123</div>
452         <div id="foo">test &amp; 123</div>
453         <div data-my-id="1" data-name="test">test &amp; 123</div>
454         <div>
455           test & 123
456         </div>
457         <div id="foo">test & 123</div>
458
459       Very useful for reuse in more specific tag helpers.
460
461         my $output = $c->tag('meta');
462         my $output = $c->tag('meta', charset => 'UTF-8');
463         my $output = $c->tag('div', '<p>This will be escaped</p>');
464         my $output = $c->tag('div', sub { '<p>This will not be escaped</p>' });
465
466       Results are automatically wrapped in Mojo::ByteStream objects to
467       prevent accidental double escaping in "ep" templates.
468
469   tag_with_error
470         %= tag_with_error 'input', class => 'foo'
471
472       Same as "tag", but adds the class "field-with-error".
473
474         <input class="foo field-with-error">
475
476   tel_field
477         %= tel_field 'work'
478         %= tel_field work => '123456789'
479         %= tel_field work => '123456789', id => 'foo'
480
481       Generate "input" tag of type "tel". Previous input values will
482       automatically get picked up and shown as default.
483
484         <input name="work" type="tel">
485         <input name="work" type="tel" value="123456789">
486         <input id="foo" name="work" type="tel" value="123456789">
487
488   text_area
489         %= text_area 'story'
490         %= text_area 'story', cols => 40
491         %= text_area story => 'Default', cols => 40
492         %= text_area story => (cols => 40) => begin
493           Default
494         % end
495
496       Generate "textarea" tag. Previous input values will automatically get
497       picked up and shown as default.
498
499         <textarea name="story"></textarea>
500         <textarea cols="40" name="story"></textarea>
501         <textarea cols="40" name="story">Default</textarea>
502         <textarea cols="40" name="story">
503           Default
504         </textarea>
505
506   text_field
507         %= text_field 'first_name'
508         %= text_field first_name => 'Default'
509         %= text_field first_name => 'Default', class => 'user'
510
511       Generate "input" tag of type "text". Previous input values will
512       automatically get picked up and shown as default.
513
514         <input name="first_name" type="text">
515         <input name="first_name" type="text" value="Default">
516         <input class="user" name="first_name" type="text" value="Default">
517
518   time_field
519         %= time_field 'start'
520         %= time_field start => '23:59:59'
521         %= time_field start => '23:59:59', id => 'foo'
522
523       Generate "input" tag of type "time". Previous input values will
524       automatically get picked up and shown as default.
525
526         <input name="start" type="time">
527         <input name="start" type="time" value="23:59:59">
528         <input id="foo" name="start" type="time" value="23:59:59">
529
530   url_field
531         %= url_field 'address'
532         %= url_field address => 'https://mojolicious.org'
533         %= url_field address => 'https://mojolicious.org', id => 'foo'
534
535       Generate "input" tag of type "url". Previous input values will
536       automatically get picked up and shown as default.
537
538         <input name="address" type="url">
539         <input name="address" type="url" value="https://mojolicious.org">
540         <input id="foo" name="address" type="url" value="https://mojolicious.org">
541
542   week_field
543         %= week_field 'vacation'
544         %= week_field vacation => '2012-W17'
545         %= week_field vacation => '2012-W17', id => 'foo'
546
547       Generate "input" tag of type "week". Previous input values will
548       automatically get picked up and shown as default.
549
550         <input name="vacation" type="week">
551         <input name="vacation" type="week" value="2012-W17">
552         <input id="foo" name="vacation" type="week" value="2012-W17">
553

METHODS

555       Mojolicious::Plugin::TagHelpers inherits all methods from
556       Mojolicious::Plugin and implements the following new ones.
557
558   register
559         $plugin->register(Mojolicious->new);
560
561       Register helpers in Mojolicious application.
562

SEE ALSO

564       Mojolicious, Mojolicious::Guides, <https://mojolicious.org>.
565
566
567
568perl v5.36.0                      2022-07-22Mojolicious::Plugin::TagHelpers(3)
Impressum