# Template node: how to merge HTML AND CSS

**URL:** <https://discourse.nodered.org/t/template-node-how-to-merge-html-and-css/7006>\
**Category:** Dashboard\
**Created:** [19 January 2019 08:13 UTC](https://discourse.nodered.org/t/template-node-how-to-merge-html-and-css/7006 "2019-01-19T08:13:49Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![cpaolojo](https://avatars.discourse-cdn.com/v4/letter/c/b5ac83/32.png) [@cpaolojo](https://discourse.nodered.org/u/cpaolojo)\
**Post date:** [19 January 2019 08:13 UTC](https://discourse.nodered.org/t/template-node-how-to-merge-html-and-css/7006/1 "2019-01-19T08:13:49Z")

</div>

hi all,  
sorry for stupid question. i've tried to serch on the web the solution for my question but I didn't find anything.  
reading forum, usually you can find the code divided I'm two part: HTML part and CSS (for example) part.  
how have I to merge this two parts in my template node code?  
thanks all

---

<div class="post-metadata">

**Author:** ![Jaxn](https://avatars.discourse-cdn.com/v4/letter/j/f19dbf/32.png) [@Jaxn](https://discourse.nodered.org/u/Jaxn)\
**Post date:** [19 January 2019 08:45 UTC](https://discourse.nodered.org/t/template-node-how-to-merge-html-and-css/7006/2 "2019-01-19T08:45:22Z")

</div>

[https://www.w3schools.com/tags/tag\_style.asp](https://www.w3schools.com/tags/tag_style.asp)

---

<div class="post-metadata">

**Author:** ![cpaolojo](https://avatars.discourse-cdn.com/v4/letter/c/b5ac83/32.png) [@cpaolojo](https://discourse.nodered.org/u/cpaolojo)\
**Post date:** [19 January 2019 11:53 UTC](https://discourse.nodered.org/t/template-node-how-to-merge-html-and-css/7006/3 "2019-01-19T11:53:22Z")

</div>

Many many thankst!Now I've understood!  
I'm achieving a form input table. From this table I collect three data:

- username
- email
- password  
When pressing "submit" button, I would send the data throug three different node-red message filelds::
- msg.username
- msg.email
- msg.psw  
How can I do?  
Here follows the code

`[{ "id": "5f87f892.8e4bc8", "type": "ui_template", "z": "adf90cec.8c94", "group": "400cefcc.505cd", "name": "prova", "order": 7, "width": "0", "height": "0", "format": "<html>\n<form>\n <style>\n * {box-sizing: border-box;}\n\n/* Style the input container */\n.input-container {\n display: flex;\n width: 100%;\n margin-bottom: 15px;\n}\n\n/* Style the form icons */\n.icon {\n padding: 10px;\n background: dodgerblue;\n color: white;\n min-width: 50px;\n text-align: center;\n}\n\n/* Style the input fields */\n.input-field {\n width: 100%;\n padding: 10px;\n outline: none;\n}\n\n.input-field:focus {\n border: 2px solid dodgerblue;\n}\n\n/* Set a style for the submit button */\n.btn {\n background-color: dodgerblue;\n color: white;\n padding: 15px 20px;\n border: none;\n cursor: pointer;\n width: 100%;\n opacity: 0.9;\n}\n\n.btn:hover {\n opacity: 1;\n}\n </style>\n \n <h2>Register Form</h2>\n <div class=\"input-container\">\n <i class=\"fa fa-user icon\"></i>\n <input class=\"input-field\" type=\"text\" placeholder=\"Username\" name=\"usrnm\">\n </div>\n\n <div class=\"input-container\">\n <i class=\"fa fa-envelope icon\"></i>\n <input class=\"input-field\" type=\"text\" placeholder=\"Email\" name=\"email\">\n </div>\n\n <div class=\"input-container\">\n <i class=\"fa fa-key icon\"></i>\n <input class=\"input-field\" type=\"password\" placeholder=\"Password\" name=\"psw\">\n </div>\n\n <button type=\"submit\" class=\"btn\" ng-click=\"send({payload:'psw')\">Register</button>\n \n</form>\n</html>\n", "storeOutMessages": true, "fwdInMessages": true, "templateScope": "local", "x": 428.01953125, "y": 164.00390625, "wires": [ [ "18baef70.c08d01"] ] }, { "id": "400cefcc.505cd", "type": "ui_group", "z": "", "name": "Group 1", "tab": "950aa41c.07bb38", "order": 1, "disp": true, "width": "6", "collapse": false }, { "id": "950aa41c.07bb38", "type": "ui_tab", "z": "", "name": "prova", "icon": "dashboard", "order": 20 } ]`

---

<div class="post-metadata">

**Author:** ![ukmoose](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/ukmoose/32/13_2.png) [@ukmoose](https://discourse.nodered.org/u/ukmoose)\
**Post date:** [19 January 2019 13:30 UTC](https://discourse.nodered.org/t/template-node-how-to-merge-html-and-css/7006/4 "2019-01-19T13:30:18Z")

</div>

Try looking at the `form` node rather than just a html template

---

<div class="post-metadata">

**Author:** ![cpaolojo](https://avatars.discourse-cdn.com/v4/letter/c/b5ac83/32.png) [@cpaolojo](https://discourse.nodered.org/u/cpaolojo)\
**Post date:** [19 January 2019 13:31 UTC](https://discourse.nodered.org/t/template-node-how-to-merge-html-and-css/7006/5 "2019-01-19T13:31:52Z")

</div>

thanks but form node doesn't do the function which I m searching for

---

<div class="post-metadata">

**Author:** ![Jaxn](https://avatars.discourse-cdn.com/v4/letter/j/f19dbf/32.png) [@Jaxn](https://discourse.nodered.org/u/Jaxn)\
**Post date:** [21 January 2019 08:18 UTC](https://discourse.nodered.org/t/template-node-how-to-merge-html-and-css/7006/6 "2019-01-21T08:18:28Z")

</div>

You can build a form using http nodes  
 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/2X/c/c4376e5945305b61a76d0eafc62eb25b38798b51.png)  
The first flow shows the form and does a post to /tnw on submit.  
The second flow captures that post and you can simply grep the input.  
I am sorry, i cannot show you the code of the nodes, but just take a look at the "HTTP endpoints" section in [https://cookbook.nodered.org/](https://cookbook.nodered.org/)
