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
Many many thankst!Now I've understood!
I'm achieving a form input table. From this table I collect three data:
- username
- 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 } ]
Try looking at the form node rather than just a html template
thanks but form node doesn't do the function which I m searching for
You can build a form using http nodes
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/
