Select Page

Here is an example of how you can create a dynamic form field using HTML template inside a <script> tag.

Browsers and screen readers ignore unrecognized script types like:

<script id="hidden" type="text/x-custom-template">
    <div class="">Hi there this will be hidden from browsers</div>
</script>

You can explore and use this technique in your form fields for enhanced user experience and the ease of doing more in a lot of lesser space.

Click on checkboxes shows and hides form fields on the right-hand side dynamically and also updating the title accordingly.

See the Pen Dynamic form field using script HTML templates – Bootstrap, jQuery by Puneet Sharma (@webdevpuneet) on CodePen.