{"title":"Basic View Helpers","description":"","section":"guides/views","version":"v1.5","path":"guides/views/basic-view-helpers","canonical_url":"https://amberframework.org/docs/v1.5/guides/views/basic-view-helpers","markdown_url":"https://amberframework.org/docs/v1.5/guides/views/basic-view-helpers.md","inherited":true,"content_markdown":"# Basic View Helpers\n\nThe [Jasper::Helpers](https://github.com/amberframework/jasper-helpers) library provides a common set of helper methods that can simplify the development of the views.\n\n## Links\n\nA `link_to` helper is available:\n\n```text\n== link_to \"Home\", \"/\"\n```\n\nProduces the following HTML\n\n```markup\n<a href=\"/\">Home</a>\n```\n\n## Buttons\n\nA `button_to` helper is available:\n\n```text\n== button_to \"Logout\", \"/logout\"\n```\n\nProduces the following HTML\n\n```markup\n<form action=\"/logout\" class=\"button\" method=\"post\">\n  <button type=\"submit\">Logout</button>\n</form>\n```\n\nFor more complex forms, see section below.\n\n## Forms\n\nThe form helpers listed below are very basic helpers that are included by default. For a more complete form building experience we strongly recommend using [FormBuilder.cr](form-builder.md)\n\nThe following methods provide simple HTML form elements:\n\n* `form`\n* `text_field`\n* `label`\n* `hidden_field`\n* `select_field`\n* `text_area`\n* `check_box`\n* `submit`\n\nUse `amber generate scaffold [Resource] [field:type] ...` to get the most up-to-date examples of using helpers for resources.\n\n### form\n\n```text\n== form(action: \"/posts\", method: :post) do\n  == csrf_tag\n  == submit(\"Create Post\")\n\n/ When using `method: :patch`, it add the hidden '_method' field for you\n== form(action: \"/posts\", method: :patch) do\n  == csrf_tag\n  == submit(\"Update Post\")\n```\n\nProduces the following HTML\n\n```markup\n<form action=\"/posts\" method=\"post\">\n  <input type=\"hidden\" name=\"<csrf-name-here>\" value=\"<csrf-token-here>\" />\n  <input type=\"submit\" value=\"Create Post\" id=\"create_post\">\n</form>\n\n<form action=\"/posts\" method=\"post\">\n  <input type=\"hidden\" name=\"_method\" id=\"_method\" value=\"patch\">\n  <input type=\"hidden\" name=\"<csrf-name-here>\" value=\"<csrf-token-here>\" />\n  <input type=\"submit\" value=\"Update Post\" id=\"update_post\">\n</form>\n```\n\n### text\\_field\n\n```text\n== text_field name: \"title\", value: \"\", placeholder: \"Title\"\n```\n\nProduces the following HTML\n\n```markup\n<input type=\"text\" name=\"title\" id=\"title\" value=\"\" placeholder=\"Title\">\n```\n\n### label\n\n```text\n== label :title\n```\n\nProduces the following HTML\n\n```markup\n<label for=\"title\" id=\"title_label\">Title</label>\n```\n\n### text\\_area\n\n```text\n== text_area name: \"body\", content: \"\", placeholder: \"Body\", size: \"30x10\"\n```\n\nProduces the following HTML\n\n```markup\n<textarea name=\"body\" id=\"body\" placeholder=\"Body\" cols=\"30\" rows=\"10\"></textarea>\n```\n\n### hidden\\_field\n\n```text\n== hidden_field name: \"secret\", content: \"Super Secret\"\n```\n\nProduces the following HTML\n\n```markup\n<input type=\"hidden\" name=\"secret\" id=\"secret\" content=\"Super Secret\">\n```\n\n### select\\_field\n\n```text\n/ Array of Arrays\n== select_field name: \"ranking\", collection: [[1, \"First\"], [2, \"Second\"]], selected: 1\n\n/ Array of Hashes\n== select_field name: \"ranking\", collection: [{ 1 => \"First\" }, { 2 => \"Second\" }], selected: 1\n\n/ Hash\n== select_field name: \"ranking\", collection: { 1 => \"First\", 2 => \"Second\" }, selected: 1\n```\n\nAll the previous code samples produce the following HTML\n\n```markup\n<select name=\"ranking\">\n  <option value=\"1\" selected=\"selected\">First</option>\n  <option value=\"2\">Second</option>\n</select>\n```\n\n### check\\_box\n\n```text\n== check_box(:published, checked: false)\n```\n\nProduces the following HTML\n\n```markup\n<input type=\"checkbox\" name=\"published\" id=\"published\" value=\"1\" checked=\"false\">\n```\n\n### All together\n\n```text\n== form(action: \"/posts\", method: :post) do\n  == csrf_tag\n\n  == hidden_field name: \"secret\", content: \"Super Secret\"\n\n  == label :title\n  == text_field name: \"title\", value: \"\", placeholder: \"Title\"\n\n  == label :body\n  == text_area name: \"body\", content: \"\", placeholder: \"Body\", size: \"30x10\"\n\n  == label :ranking\n  == select_field name: \"ranking\", collection: [[1, \"First\"], [2, \"Second\"]], selected: 1\n\n  == label(:published)\n  == check_box(:published, checked: false)\n\n  == submit(\"Create Post\")\n```\n\nProduces the following HTML\n\n```markup\n<form action=\"/posts\" method=\"post\">\n  <input type=\"hidden\" name=\"<csrf-name-here>\" value=\"<csrf-token-here>\" />\n\n  <input type=\"hidden\" name=\"secret\" id=\"secret\" content=\"Super Secret\">\n\n  <label for=\"title\" id=\"title_label\">Title</label>\n  <input type=\"text\" name=\"title\" id=\"title\" value=\"\" placeholder=\"Title\">\n\n  <label for=\"body\" id=\"body_label\">Body</label>\n  <textarea name=\"body\" id=\"body\" placeholder=\"Body\" cols=\"30\" rows=\"10\"></textarea>\n\n  <label for=\"ranking\" id=\"ranking_label\">Ranking</label>\n  <select name=\"ranking\">\n    <option value=\"1\" selected=\"selected\">First</option>\n    <option value=\"2\">Second</option>\n  </select>\n\n  <label for=\"published\" id=\"published_label\">Published</label>\n  <input type=\"hidden\" name=\"published\" id=\"published\" value=\"0\"><input type=\"checkbox\" name=\"published\" id=\"published\" value=\"1\" checked=\"false\">\n  <input type=\"submit\" value=\"Create Post\" id=\"create_post\">\n</form>\n```"}