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 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 Generate portable "form" tag with "form_for", containing a single
54 button.
55 <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 check_box
70 %= check_box 'employed'
71 %= check_box employed => 1
72 %= check_box employed => 1, checked => undef, id => 'foo'
73 Generate "input" tag of type "checkbox". Previous input values will
75 automatically get picked up and shown as default.
76 <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 color_field
82 %= color_field 'background'
83 %= color_field background => '#ffffff'
84 %= color_field background => '#ffffff', id => 'foo'
85 Generate "input" tag of type "color". Previous input values will
87 automatically get picked up and shown as default.
88 <input name="background" type="color">
90 <input name="background" type="color" value="#ffffff">
91 <input id="foo" name="background" type="color" value="#ffffff">
92 csrf_button_to
94 %= csrf_button_to Remove => 'some_delete_route'
95 Same as "button_to", but also includes a "csrf_field".
97 <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 csrf_field
104 %= csrf_field
105 Generate "input" tag of type "hidden" with "csrf_token" in
107 Mojolicious::Plugin::DefaultHelpers.
108 <input name="csrf_token" type="hidden" value="fa6a08...">
110 date_field
112 %= date_field 'end'
113 %= date_field end => '2012-12-21'
114 %= date_field end => '2012-12-21', id => 'foo'
115 Generate "input" tag of type "date". Previous input values will
117 automatically get picked up and shown as default.
118 <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 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 Generate "input" tag of type "datetime-local". Previous input values
129 will automatically get picked up and shown as default.
130 <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 email_field
136 %= email_field 'notify'
137 %= email_field notify => 'nospam@example.com'
138 %= email_field notify => 'nospam@example.com', id => 'foo'
139 Generate "input" tag of type "email". Previous input values will
141 automatically get picked up and shown as default.
142 <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 file_field
148 %= file_field 'avatar'
149 %= file_field 'avatar', id => 'foo'
150 Generate "input" tag of type "file".
152 <input name="avatar" type="file">
154 <input id="foo" name="avatar" type="file">
155 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 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 <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 hidden_field
203 %= hidden_field foo => 'bar'
204 %= hidden_field foo => 'bar', id => 'bar'
205 Generate "input" tag of type "hidden".
207 <input name="foo" type="hidden" value="bar">
209 <input id="bar" name="foo" type="hidden" value="bar">
210 image
212 %= image '/images/foo.png'
213 %= image '/images/foo.png', alt => 'Foo'
214 Generate portable "img" tag.
216 <img src="/path/to/images/foo.png">
218 <img alt="Foo" src="/path/to/images/foo.png">
219 input_tag
221 %= input_tag 'first_name'
222 %= input_tag first_name => 'Default'
223 %= input_tag 'employed', type => 'checkbox'
224 Generate "input" tag. Previous input values will automatically get
226 picked up and shown as default.
227 <input name="first_name">
229 <input name="first_name" value="Default">
230 <input name="employed" type="checkbox">
231 javascript
233 %= javascript '/script.js'
234 %= javascript '/script.js', defer => undef
235 %= javascript begin
236 var a = 'b';
237 % end
238 Generate portable "script" tag for JavaScript asset.
240 <script src="/path/to/script.js"></script>
242 <script defer src="/path/to/script.js"></script>
243 <script><![CDATA[
244 var a = 'b';
245 ]]></script>
246 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 Generate "label" tag.
258 <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 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 Generate portable "a" tag with "url_for" in Mojolicious::Controller,
281 defaults to using the capitalized link target as content.
282 <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 month_field
295 %= month_field 'vacation'
296 %= month_field vacation => '2012-12'
297 %= month_field vacation => '2012-12', id => 'foo'
298 Generate "input" tag of type "month". Previous input values will
300 automatically get picked up and shown as default.
301 <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 number_field
307 %= number_field 'age'
308 %= number_field age => 25
309 %= number_field age => 25, id => 'foo', min => 0, max => 200
310 Generate "input" tag of type "number". Previous input values will
312 automatically get picked up and shown as default.
313 <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 password_field
319 %= password_field 'pass'
320 %= password_field 'pass', id => 'foo'
321 Generate "input" tag of type "password".
323 <input name="pass" type="password">
325 <input id="foo" name="pass" type="password">
326 radio_button
328 %= radio_button 'test'
329 %= radio_button country => 'germany'
330 %= radio_button country => 'germany', checked => undef, id => 'foo'
331 Generate "input" tag of type "radio". Previous input values will
333 automatically get picked up and shown as default.
334 <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 range_field
340 %= range_field 'age'
341 %= range_field age => 25
342 %= range_field age => 25, id => 'foo', min => 0, max => 200
343 Generate "input" tag of type "range". Previous input values will
345 automatically get picked up and shown as default.
346 <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 search_field
352 %= search_field 'q'
353 %= search_field q => 'perl'
354 %= search_field q => 'perl', id => 'foo'
355 Generate "input" tag of type "search". Previous input values will
357 automatically get picked up and shown as default.
358 <input name="q" type="search">
360 <input name="q" type="search" value="perl">
361 <input id="foo" name="q" type="search" value="perl">
362 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 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 <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 stylesheet
404 %= stylesheet '/foo.css'
405 %= stylesheet '/foo.css', title => 'Foo style'
406 %= stylesheet begin
407 body {color: #000}
408 % end
409 Generate portable "style" or "link" tag for CSS asset.
411 <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 submit_button
419 %= submit_button
420 %= submit_button 'Ok!', id => 'foo'
421 Generate "input" tag of type "submit".
423 <input type="submit" value="Ok">
425 <input id="foo" type="submit" value="Ok!">
426 t
428 %= t div => 'test & 123'
429 Alias for "tag".
431 <div>test & 123</div>
433 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 Alias for "new_tag" in Mojo::DOM.
447 <br>
449 <div></div>
450 <div id="foo" hidden></div>
451 <div>test & 123</div>
452 <div id="foo">test & 123</div>
453 <div data-my-id="1" data-name="test">test & 123</div>
454 <div>
455 test & 123
456 </div>
457 <div id="foo">test & 123</div>
458 Very useful for reuse in more specific tag helpers.
460 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 Results are automatically wrapped in Mojo::ByteStream objects to
467 prevent accidental double escaping in "ep" templates.
468 tag_with_error
470 %= tag_with_error 'input', class => 'foo'
471 Same as "tag", but adds the class "field-with-error".
473 <input class="foo field-with-error">
475 tel_field
477 %= tel_field 'work'
478 %= tel_field work => '123456789'
479 %= tel_field work => '123456789', id => 'foo'
480 Generate "input" tag of type "tel". Previous input values will
482 automatically get picked up and shown as default.
483 <input name="work" type="tel">
485 <input name="work" type="tel" value="123456789">
486 <input id="foo" name="work" type="tel" value="123456789">
487 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 Generate "textarea" tag. Previous input values will automatically get
497 picked up and shown as default.
498 <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 text_field
507 %= text_field 'first_name'
508 %= text_field first_name => 'Default'
509 %= text_field first_name => 'Default', class => 'user'
510 Generate "input" tag of type "text". Previous input values will
512 automatically get picked up and shown as default.
513 <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 time_field
519 %= time_field 'start'
520 %= time_field start => '23:59:59'
521 %= time_field start => '23:59:59', id => 'foo'
522 Generate "input" tag of type "time". Previous input values will
524 automatically get picked up and shown as default.
525 <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 url_field
531 %= url_field 'address'
532 %= url_field address => 'https://mojolicious.org'
533 %= url_field address => 'https://mojolicious.org', id => 'foo'
534 Generate "input" tag of type "url". Previous input values will
536 automatically get picked up and shown as default.
537 <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 week_field
543 %= week_field 'vacation'
544 %= week_field vacation => '2012-W17'
545 %= week_field vacation => '2012-W17', id => 'foo'
546 Generate "input" tag of type "week". Previous input values will
548 automatically get picked up and shown as default.
549 <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
555 Mojolicious::Plugin::TagHelpers inherits all methods from
556 Mojolicious::Plugin and implements the following new ones.
557 register
559 $plugin->register(Mojolicious->new);
560 Register helpers in Mojolicious application.
562
564 Mojolicious, Mojolicious::Guides, <https://mojolicious.org>.
565perl v5.34.0 2022-01-21Mojolicious::Plugin::TagHelpers(3)