Phoenix.HTML.Tag

Phoenix.HTML.Tag

Helpers related to producing HTML tags within templates.

Summary

Functions

content_tag(name, content)

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

content_tag(name, attrs, attrs)

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

tag(name, attrs)

Functions

content_tag(name, content)

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

iex> content_tag(:p, "Hello")
{:safe, [60, "p", [], 62, "Hello", 60, 47, "p", 62]}
iex> content_tag(:p, "<Hello>", class: "test")
{:safe, [60, "p", [[32, "class", 61, 34, "test", 34]], 62, "&lt;Hello&gt;", 60, 47, "p", 62]}

iex> content_tag :p, class: "test" do
...>   "Hello"
...> end
{:safe, [60, "p", [[32, "class", 61, 34, "test", 34]], 62, "Hello", 60, 47, "p", 62]}

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

• :enforce_utf8 - when false, does not enforce utf8. Read below for more information

All other options are passed to the underlying HTML tag.

Enforce UTF-8

Although forms provide the accept-charset attribute, which we set to UTF-8, Internet Explorer 5 up to 8 may ignore the value of this attribute if the user chooses their browser to do so. This ends up triggering the browser to send data in a format that is not understandable by the server.

For this reason, Phoenix automatically includes a “_utf8=✓” parameter in your forms, to force those browsers to send the data in the proper encoding. This technique has been seen in the Rails web framework and reproduced here.

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">

tag(name)

Creates an HTML tag with the given name and options.

iex> tag(:br)
{:safe, [60, "br", [], 62]}
iex> tag(:input, type: "text", name: "user_id")
{:safe, [60, "input", [[32, "name", 61, 34, "user_id", 34], [32, "type", 61, 34, "text", 34]], 62]}

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> tag(:input, [{:data, [foo: "bar"]}, id: "some_id"])
{:safe, [60, "input", [[32, "data-foo", 61, 34, "bar", 34], [32, "id", 61, 34, "some_id", 34]], 62]}

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> tag(:audio, autoplay: true)
{:safe, [60, "audio", [[32, "autoplay", 61, 34, "autoplay", 34]], 62]}
iex> tag(:audio, autoplay: false)
{:safe, [60, "audio", [], 62]}

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

tag(name, attrs)