For my form requirement, I am utilizing Jotforms. After downloading the code, I am currently in the process of customizing the CSS and HTML to fulfill my design needs.
Jotforms uses a set of ul , li for managing its HTML structure. However, I encountered an issue when trying to have a container inside the ul with background and padding. Research revealed that having anything inside the ul other than li's and ul's is incorrect. This resulted in an error due to not having an li child, leading me to remove the div. Now, I am adding an li which contains many more li's inside it. Here is a snippet of the code:
HTML
<form class="jotform-form" action="https://submit.jotform.me/submit/81913120509450/" method="post" enctype="multipart/form-data" name="form_81913120509450" id="81913120509450" accept-charset="utf-8">
<input type="hidden" name="formID" value="81913120509450" />
<div class="form-all">
<ul class="form-section page-section">
<li class="form-line" data-type="control_text" id="id_7">
<div id="cid_7" class="form-input-wide">
<div id="text_7" class="form-html" data-component="text">
<h1>
Logo Designing
</h1>
</div>
</div>
</li>
<li class="form-line" data-type="control_text" id="id_9">
<div id="cid_9" class="form-input-wide">
<div id="text_9" class="form-html" data-component="text">
<p>The best brands own a word or phrase and a related space in consumer's minds. which become each brand's position in the marketplace.brand image and identity to instantly have meaning for consumers and differentiate it from competitor brands</p>
</div>
</div>
</li>
<li class="form-line" data-type="control_widget" id="id_10">
<div id="cid_10" class="">
<div style="width:100%;text-align:Left" data-component="widget-directEmbed">
<div class="direct-embed-widgets " data-type="direct-embed" style="width:50px;height:50px">
<div class="form_breadcrumbs_widget" id="form_breadcrumbs_widget_'10'">
<script type="text/javascript">
var qidBreadcrumbs = '10';
var tabsCustomCssBreadcrumbs = 'numerically';
var navigateWithoutValidationBreadcrumbs = 'Yes';
var formTabsThemeBreadcrumbs = 'se-theme-maya-blue';
var numberTypeBreadcrumbs = 'numerically';
</script>
<script src="//widgets.jotform.io/breadcrumbs/min/scripts.min.js" type="text/javascript"></script>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</form>
The issue arises with the commented out white-box div. Although changing it to li seems to fix it initially, it creates further problems as displayed in the editor. The console indicates that each li after the white-box class should be nested inside it, resulting in a mismatched closing tag error.
To explore this further, you can refer to the visual representations of the issue in the editor:
https://i.sstatic.net/SAsnX.png
and the consequences of changing it to li:
https://i.sstatic.net/vMauj.png
It appears that despite aligning the closing tag with the suggested li, the content does not occupy the expected space within the editor. Moreover, the editor highlights a potential error stating "ending tag matches nothing." If anyone has insights on resolving this issue, guidance would be greatly appreciated.