Phoenix.HTML

View Source Phoenix.HTML.Link (Phoenix.HTML v3.3.1)

Conveniences for working with links and URLs in HTML.

Link to this section Summary

Functions

button(opts, opts)

Generates a button tag that uses the Javascript function handleClick() (see phoenix_html.js) to submit the form data.

link(text, opts)

Generates a link to the given URL.

Link to this section Functions

Link to this function

button(opts, opts)

View Source

Generates a button tag that uses the Javascript function handleClick() (see phoenix_html.js) to submit the form data.

Useful to ensure that links that change data are not triggered by search engines and other spidering software.

examples

 Examples 

button("hello", to: "/world")
#=> <button class="button" data-csrf="csrf_token" data-method="post" data-to="/world">hello</button>

button("hello", to: "/world", method: :get, class: "btn")
#=> <button class="btn" data-method="get" data-to="/world">hello</button>

options

 Options

  • :to - the page to link to. This option is required

  • :method - the method to use with the button. Defaults to :post.

All other options are forwarded to the underlying button input.

When the :method is set to :get and the :to URL contains query parameters the generated form element will strip the parameters in accordance with the W3C form specification.

data-attributes

 Data attributes

Data attributes are added as a keyword list passed to the data key. The following data attributes are supported:

  • data-confirm - shows a confirmation prompt before generating and submitting the form.
Link to this function

link(text, opts)

View Source

Generates a link to the given URL.

examples

 Examples 

link("hello", to: "/world")
#=> <a href="/world">hello</a>

link("hello", to: URI.parse("https://elixir-lang.org"))
#=> <a href="https://elixir-lang.org">hello</a>

link("<hello>", to: "/world")
#=> <a href="/world">&lt;hello&gt;</a>

link("<hello>", to: "/world", class: "btn")
#=> <a class="btn" href="/world">&lt;hello&gt;</a>

link("delete", to: "/the_world", data: [confirm: "Really?"])
#=> <a data-confirm="Really?" href="/the_world">delete</a>

# If you supply a method other than `:get`:
link("delete", to: "/everything", method: :delete)
#=> <a href="/everything" data-csrf="csrf_token" data-method="delete" data-to="/everything">delete</a>

# You can use a `do ... end` block too:
link to: "/hello" do
  "world"
end
#=> <a href="/hello">world<a>

options

 Options

  • :to - the page to link to. This option is required

  • :method - the method to use with the link. In case the method is not :get, the link is generated inside the form which sets the proper information. In order to submit the form, JavaScript must be enabled

  • :csrf_token - a custom token to use for links with a method other than :get.

All other options are forwarded to the underlying <a> tag.

data-attributes

 Data attributes

Data attributes are added as a keyword list passed to the data key. The following data attributes are supported:

  • data-confirm - shows a confirmation prompt before generating and submitting the form when :method is not :get.

csrf-protection

 CSRF Protection

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