W3cubDocs

/Phoenix

Phoenix.HTML.Tag

Helpers related to producing HTML tags within templates.

Note the examples in this module use safe_to_string/1 imported from Phoenix.HTML for readability.

Summary

Functions

content_tag(name, content)

Creates an HTML tag with given name, content, and attributes.

csrf_meta_tag()

Generates a meta tag with CSRF information.

form_tag(action, opts \\ [])

Generates a form tag.

form_tag(action, options, list)

Generates a form tag with the given contents.

img_tag(src, opts \\ [])

Generates an img tag with a src.

tag(name)

Creates an HTML tag with the given name and options.

Functions

content_tag(name, content)

Creates an HTML tag with given name, content, and attributes.

See Phoenix.HTML.Tag.tag/2 for more information and examples.

iex> safe_to_string content_tag(:p, "Hello")
"<p>Hello</p>"

iex> safe_to_string content_tag(:p, "<Hello>", class: "test")
"<p class=\"test\">&lt;Hello&gt;</p>"

iex> safe_to_string(content_tag :p, class: "test" do
...>   "Hello"
...> end)
"<p class=\"test\">Hello</p>"

iex> safe_to_string content_tag(:option, "Display Value", [{:data, [foo: "bar"]}, value: "value"])
"<option data-foo=\"bar\" value=\"value\">Display Value</option>"

content_tag(name, attrs, attrs)

csrf_meta_tag()

Generates a meta tag with CSRF information.

Tag attributes

  • content - a valid csrf token
  • csrf-param - a request parameter where expected csrf token
  • method-param - a request parameter where expected a custom HTTP method

form_tag(action, opts \\ [])

Generates a form tag.

This function generates the <form> tag without its closing part. Check form_tag/3 for generating an enclosing tag.

Examples

form_tag("/hello")
<form action="/hello" method="post">

form_tag("/hello", method: :get)
<form action="/hello" method="get">

Options

  • :method - the HTTP method. If the method is not "get" nor "post", an input tag with name _method is generated along-side the form tag. Defaults to "post".

  • :multipart - when true, sets enctype to "multipart/form-data". Required when uploading files

  • :csrf_token - for "post" requests, the form tag will automatically include an input tag with name _csrf_token. When set to false, this is disabled

All other options are passed to the underlying HTML tag.

CSRF Protection

By default, CSRF tokens are generated through Plug.CSRFProtection.

form_tag(action, options, list)

Generates a form tag with the given contents.

Examples

form_tag("/hello", method: "get") do
  "Hello"
end
<form action="/hello" method="get">...Hello...</form>

img_tag(src, opts \\ [])

Generates an img tag with a src.

Examples

img_tag(user.photo_path)
<img src="/photo.png">

img_tag(user.photo, class: "image")
<img src="/smile.png" class="image">

To generate a path to an image hosted in your application "priv/static", with the @conn endpoint, use static_path/2 to get a URL with cache control parameters:

img_tag(Routes.static_path(@conn, "/logo.png"))
<img src="/logo-123456.png?vsn=d">

For responsive images, pass a map, list or string through :srcset.

img_tag("/logo.png", srcset: %{"/logo.png" => "1x", "/logo-2x.png" => "2x"})
<img src="/logo.png" srcset="/logo.png 1x, /logo-2x.png 2x">

img_tag("/logo.png", srcset: ["/logo.png", {"/logo-2x.png", "2x"}])
<img src="/logo.png" srcset="/logo.png, /logo-2x.png 2x">

tag(name)

Creates an HTML tag with the given name and options.

iex> safe_to_string tag(:br)
"<br>"
iex> safe_to_string tag(:input, type: "text", name: "user_id")
"<input name=\"user_id\" type=\"text\">"

Data attributes

In order to add custom data attributes you need to pass a tuple containing :data atom and a keyword list with data attributes' names and values as the first element in the tag's attributes keyword list:

iex> safe_to_string tag(:input, [data: [foo: "bar"], id: "some_id"])
"<input data-foo=\"bar\" id=\"some_id\">"

Boolean values

In case an attribute contains a boolean value, its key is repeated when it is true, as expected in HTML, or the attribute is completely removed if it is false:

iex> safe_to_string tag(:audio, autoplay: "autoplay")
"<audio autoplay=\"autoplay\">"
iex> safe_to_string tag(:audio, autoplay: true)
"<audio autoplay>"
iex> safe_to_string tag(:audio, autoplay: false)
"<audio>"

If you want the boolean attribute to be sent as is, you can explicitly convert it to a string before.

tag(name, attrs)

© 2014 Chris McCord
Licensed under the MIT License.
https://hexdocs.pm/phoenix_html/Phoenix.HTML.Tag.html