Let User Create an HTML Form Dynamically

Create a single HTML/CSS/JavaScript page that shall facilitate users creating form dynamically. User shall be able to add required number of input fields of different types. Initially, your page shall display an option list to choose the type of input field to add in the form. So the option list shall include: text input, password, radio, checkbox, option list, email etc. When user select an option, your app shall display a form to get details of that input field. User shall fill the form and click CREATE button. On click, your app shall add that field in the form.

For example, if user select 'text input' from the option list, your app shall display a form with 3 input field, like this:

Field Name:   ____________
Max Width:   ____________
Field ID:        _____________
CSS Class:     _____________ (option list of predefined CSS classes to choose from)
CREATE

When user fill the form and click the CREATE button. Your app shall create an input field as per given detail. Do same for password and email etc. If user select radio, show form to get radio button label, field name, value of each radio button, id and class etc. when user click the CREATE button, create the radio button field accordingly. If user given ID has already used, show error message that the given ID is already assigned to some field. Do same for check box too i.e. show form with appropriate input fields required to add multiple checkboxes. If user select option list, show a form to get details of option list e.g. field label, name, number of options, text and value for each option, etc.

On right side of the form for each input field, add Delete link, when user click the link, that input field shall be deleted from the form. Use bootstap form related classes to make the look and feel better of dynamically generated form. After the generated form, in a large textarea, show html code of the form that your application has generated for the complete form.

Provide a mechanism to facilitate user to sort the input fields of the form. You may give a text field to enter sort value, when user click sort, sort the input fields based on that value. Or you may implement drag and drop events handling etc. to facilitate sorting, do as you like.

Its 20 marks assignment, if two students code matched or I found copied somehow, both would get 0 marks. No exception to this rule for anyone.

Comments