Creating custom form on dashborad

Dashboard
1

I am trying to recreate following form on dashbord:

<!DOCTYPE html><html lang='en'><head><meta charset='utf-8'/><title>RPIEasy</title><meta name='viewport' content='width=device-width, initial-scale=1.0'><script><!--
function dept_onchange(frmselect) {frmselect.submit();}
//--></script><link rel="stylesheet" type="text/css" href="default.css"></head><body class='bodymenu'><span class='message' id='rbtmsg'></span><header class='headermenu'><h1>RPI Easy: RPIEasy </h1><div class='menu_button'>&#9776;</div><BR><div class='menubar'><a class='menu' href='.'>⌂ Main</a><a class='menu' href='config'>⚙ Config</a><a class='menu' href='controllers'>💬 Controllers</a><a class='menu' href='hardware'>📌 Hardware</a><a class='menu active' href='devices'>🔌 Devices</a><a class='menu' href='rules'>⧴ Rules</a><a class='menu' href='notifications'>✉ Notifications</a><a class='menu' href='tools'>🔧 Tools</a></div></header><section><span class='message error'></span><form name='frmselect' method='post'><table class='normal'><TR><TD colspan='2'><h2>Task Settings</h2><TR><TD style='width:150px;' align='left'>Device:<TD><input type='hidden' name='TDNUM' value='204'>Output - Stepper driver (TESTING)<TR><TD>Name:<TD><input class='wide' type='text' name='TDN' id='TDN' maxlength=40 value=''><TR><TD>Enabled:<TD><label class='container'>&nbsp;<input type='checkbox' id='TDE' name='TDE'><span class='checkmark'></span></label><TR><TD colspan='2'><h3>Actuator</h3><TR><TD>1st GPIO:<TD><select id='selectwidth' name='taskdevicepin1'><option value=-1 selected>None</option><option value=2>GPIO2 (Default)</option><option value=3>GPIO3 (Default)</option><option value=4>GPIO4 (Default)</option><option value=17>GPIO17 (Default)</option><option value=18>GPIO18/PWM0 (Default)</option><option value=27>GPIO27 (Default)</option><option value=22>GPIO22 (Default)</option><option value=23>GPIO23 (Default)</option><option value=24>GPIO24 (Default)</option><option value=10>GPIO10 (Default)</option><option value=9>GPIO9 (Default)</option><option value=25>GPIO25 (Default)</option><option value=11>GPIO11 (Default)</option><option value=8>GPIO8 (Default)</option><option value=7>GPIO7 (Default)</option><option value=5>GPIO5 (Default)</option><option value=6>GPIO6 (Output)</option><option value=12>GPIO12/PWM0 (Output)</option><option value=13>GPIO13/PWM1 (Output)</option><option value=19>GPIO19/PWM1 (Output)</option><option value=16>GPIO16 (Output)</option><option value=26>GPIO26 (Output)</option><option value=20>GPIO20 (Output)</option><option value=21>GPIO21 (Output)</option></select><TR><TD>2nd GPIO:<TD><select id='selectwidth' name='taskdevicepin2'><option value=-1 selected>None</option><option value=2>GPIO2 (Default)</option><option value=3>GPIO3 (Default)</option><option value=4>GPIO4 (Default)</option><option value=17>GPIO17 (Default)</option><option value=18>GPIO18/PWM0 (Default)</option><option value=27>GPIO27 (Default)</option><option value=22>GPIO22 (Default)</option><option value=23>GPIO23 (Default)</option><option value=24>GPIO24 (Default)</option><option value=10>GPIO10 (Default)</option><option value=9>GPIO9 (Default)</option><option value=25>GPIO25 (Default)</option><option value=11>GPIO11 (Default)</option><option value=8>GPIO8 (Default)</option><option value=7>GPIO7 (Default)</option><option value=5>GPIO5 (Default)</option><option value=6>GPIO6 (Output)</option><option value=12>GPIO12/PWM0 (Output)</option><option value=13>GPIO13/PWM1 (Output)</option><option value=19>GPIO19/PWM1 (Output)</option><option value=16>GPIO16 (Output)</option><option value=26>GPIO26 (Output)</option><option value=20>GPIO20 (Output)</option><option value=21>GPIO21 (Output)</option></select><TR><TD>3rd GPIO:<TD><select id='selectwidth' name='taskdevicepin3'><option value=-1 selected>None</option><option value=2>GPIO2 (Default)</option><option value=3>GPIO3 (Default)</option><option value=4>GPIO4 (Default)</option><option value=17>GPIO17 (Default)</option><option value=18>GPIO18/PWM0 (Default)</option><option value=27>GPIO27 (Default)</option><option value=22>GPIO22 (Default)</option><option value=23>GPIO23 (Default)</option><option value=24>GPIO24 (Default)</option><option value=10>GPIO10 (Default)</option><option value=9>GPIO9 (Default)</option><option value=25>GPIO25 (Default)</option><option value=11>GPIO11 (Default)</option><option value=8>GPIO8 (Default)</option><option value=7>GPIO7 (Default)</option><option value=5>GPIO5 (Default)</option><option value=6>GPIO6 (Output)</option><option value=12>GPIO12/PWM0 (Output)</option><option value=13>GPIO13/PWM1 (Output)</option><option value=19>GPIO19/PWM1 (Output)</option><option value=16>GPIO16 (Output)</option><option value=26>GPIO26 (Output)</option><option value=20>GPIO20 (Output)</option><option value=21>GPIO21 (Output)</option></select><TR><TD>4th GPIO:<TD><select id='selectwidth' name='taskdevicepin4'><option value=-1 selected>None</option><option value=2>GPIO2 (Default)</option><option value=3>GPIO3 (Default)</option><option value=4>GPIO4 (Default)</option><option value=17>GPIO17 (Default)</option><option value=18>GPIO18/PWM0 (Default)</option><option value=27>GPIO27 (Default)</option><option value=22>GPIO22 (Default)</option><option value=23>GPIO23 (Default)</option><option value=24>GPIO24 (Default)</option><option value=10>GPIO10 (Default)</option><option value=9>GPIO9 (Default)</option><option value=25>GPIO25 (Default)</option><option value=11>GPIO11 (Default)</option><option value=8>GPIO8 (Default)</option><option value=7>GPIO7 (Default)</option><option value=5>GPIO5 (Default)</option><option value=6>GPIO6 (Output)</option><option value=12>GPIO12/PWM0 (Output)</option><option value=13>GPIO13/PWM1 (Output)</option><option value=19>GPIO19/PWM1 (Output)</option><option value=16>GPIO16 (Output)</option><option value=26>GPIO26 (Output)</option><option value=20>GPIO20 (Output)</option><option value=21>GPIO21 (Output)</option></select><TR><TD><TD><div class='note'>Note: Set 4 pins to OUTPUT <a href='pinout'>at pinout</a> first, than specify them here.</div><TR><TD>Speed:<TD><input class='widenumber' type='number' name='p204_speed' min=1 max=25 value=0><TR><TD colspan='2'><hr><TR><TD colspan='2'><h3>Values</h3></table><table class='normal'><TR><TH style='width:30px;' align='center'>#<TH align='left'>Name<TR><TD>1<TD><input class='wide' type='text' name='TDVN1' id='TDVN1' maxlength=40 value='Angle'><TR><TD colspan='4'><hr><TR><TD><TD colspan='3'><a class='button link' href='devices?setpage=1'>Close</a><input class='button link' type='submit' value='Submit' name='Submit'><div id='toastmessage'></div><script type='text/javascript'>toasting();</script><input type='hidden' name='edit' value='1'><input type='hidden' name='index' value='4'><input type='hidden' name='page' value='1'><input class='button link' type='submit' value='Delete' name='del'><div id='toastmessage'></div><script type='text/javascript'>toasting();</script></table></form></section><footer><br><h6>Made by <a href='http://bitekmindenhol.blog.hu' style='font-size: 15px; text-decoration: none'>NS Tech</a>. - Designed by <a href='http://www.letscontrolit.com' style='font-size: 15px; text-decoration: none'>www.letscontrolit.com</a></h6></footer></body></html>

What is the easiest way to recreate this form on dashboard.My node-red instance is running on raspberry pi and this html file above is in /home/pi/rpieasy directory on same raspberry pi.

Any help is appreciated.

Thanks

2

Have you tried the ui_template node? Or the ui_builder?

The built in help info (and the abundance of threads on this forum) are more than enough to get going.

3

I looked at uibuilder in the past but for me it is little complicated.I was hoping to use template node somehow to do this.

Thanks for your suggestion.