Using HTML-Tools is simple. Just paste in a csv list or the fields from a Javascript object, a C# class, or a Java class constructor and hit "Go."
A table will show all the fields, which you can then simply map them to a standard HTML element.
Note: The table rows are drag and drop. You can change the order of the HTML element by arranging the order of the table rows before generating the HTML elements.
For each row in the table, select the input type for the HTML element. Change the label text if needed.
The "Req" checkbox makes the element a required field.
The "Label" checkbox will add or remove the label element.
Note: This helper generates Bootstrap-ready HTML markup, similar to the Bootstrap Forms example and usage guidelines for form control styles, layout options, and custom components for creating a wide variety of forms.
Sample data formats include:
Comma Separated Values
Field1, Field2, Field3, Field4
C# Class File
public string CustomerId { get; set; }
public string CustomerCommon { get; set; }
public string CustomerAddress { get; set; }
public string CustomerCity { get; set; }
public string CustomerState { get; set; }
public string CustomerZip { get; set; }
public string CustomerEmail { get; set; }
Javascript Objects
{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
// or
firstName: "John",
lastName: "Doe",
age: 50,
eyeColor: "blue"
Javascript Class Constructors
this.name = name;
this.surname = surname;
A Java Class constructor
gear = startGear;
cadence = startCadence;
speed = startSpeed;
Checking the "HtmlEncode" stops the elements from rendering in the browser and generates HTML code to copy/paste.
Once the HTML elements are generated, simply copy/paste the generated nodes into VSCode and wire them up.
Note: If the input type for a node is not selected, nothing will be generated for that table row.
Note: If you only have one field to generate, just type it in and add a comma after it (e.g. Field1,).
Note: No user input is saved in any way.
References:
- A clean JavaScript CRUD Example Tutorial.
- Bootstrap 4 Forms style guide.
- Thoughts on dynamically populating vanilla HTML controls from a json data object