Not understanding Code Suggest / Errors regarding Forms

This inconsistency wastes time when using forms on a page.

When Wappler inserts a form we get this:

<form id="form1"> 
form elements, inputs, inputs

</form> -- we all know this closing tag is necessary

But, as in this example Wappler is happy to accept a </div> as the form close at line 92.

the form started up here on line 46 –

In fact I cannot put the close tag </form> in place of this </div> without causing an error . And the Code Suggest never sees a closing </form> tag as needed.

Yet on my next page Wappler makes sense and reports no errors, even telling me at which line the closing </form> tag must go --


The errors show that there are some unclosed tags on the page i.e. the number of closed tags is not equal to the number of the open tags - they are either more than or less than the open ones. Or you nested elements wrongly. And it’s not necessarily related to your form …

We can’t really help you by looking part of the code on cropped screenshots. Better paste your whole code so we can check what is wrong with your code.

The errors you see are the errors I force when I try to “suggest” to Wappler where the
</form>
closing tag would normally go.

Otherwise, as I say, Wappler has no problems to find with the page that is missing the
</form>
closing tag.

So please paste your whole code between <body> and </body> so that i can check what exactly are you doing and what is wrong with your code.

I will enclose the page code to help you figure out this situation.

Page code dumbed down.
I removed some of my Form header code about actions in case the login form status was authorized or unauthorized.
Still in my Wappler 4.6.4 no Form closing tag required.
I know I am missing something.

    <!doctype html>
    <html>

    <head>

    <script src="../dmxAppConnect/dmxAppConnect.js"></script>

    <meta charset="UTF-8">
    <title>Trainings</title>
    <link rel="stylesheet" href="../dmxAppConnect/dmxAutocomplete/dmxAutocomplete.css">

    <script src="../js/jquery-3.5.1.min.js"></script>
    <script src="dmxAppConnect/dmxTyped/typed.min.js" defer=""></script>

    <script src="../dmxAppConnect/dmxTyped/dmxTyped.js"></script>

    <script src="../dmxAppConnect/dmxBootstrap5Alert/dmxBootstrap5Alert.js" defer=""></script>

    <script src="../dmxAppConnect/dmxBrowser/dmxBrowser.js" defer=""></script>

    <script src="../dmxAppConnect/dmxFormatter/dmxFormatter.js" defer=""></script>

    <script src="../dmxAppConnect/dmxValidator/dmxValidator.js" defer=""></script>

    <link rel="stylesheet" href="../dmxAppConnect/dmxValidator/dmxValidator.css">


    <script src="../dmxAppConnect/dmxAutocomplete/dmxAutocomplete.js" defer=""></script>

    <script src="../dmxAppConnect/dmxDataTraversal/dmxDataTraversal.js" defer=""></script>

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">

    <script src="../dmxAppConnect/dmxStateManagement/dmxStateManagement.js" defer=""></script>
    <link rel="stylesheet" href="../css/bootstrap-icons.css" />
    <link rel="stylesheet" href="../bootstrap/5/cerulean/bootstrap.min.css" />
    </head>

    <body id="trainingslogin" is="dmx-app">


        <div class="d-flex justify-content-center ms-2 me-2 bg-secondary" id="totalpage" style="">

            <div class="wappler-block pt-3 pb-3 container-lg">
                <div class="d-flex"><img class="wappler-type-user mb-4 img-fluid rounded-0 img-thumbnail" width="1200" height="561" src="../assets/images/Optimized-apoformDec-hand.png" id="health"></div>
                <div class="row">
                    <div class="d-flex col justify-content-center">
                        <button id="btn1" class="btn bg-secondary ms-1 disabled fw-bold btn-secondary">
                            <div class="contentArea">
                                <p class="fw-bolder text-info" id="leftwelcome">Herzlich willkommen.
                                <p wappler-command="editContent">words words words.</p>
                                </p>
                            </div>
                        </button>
                    </div>

                    <div class="d-flex col">

                        <div class="contentArea"></div>

                        <form id="serverconnectform1" dmx-param="" action="../dmxConnect/api/loginvalidate.php" method="post" />
                        <div class="row row-cols-8">
                            <div class="mb-3 col-6 h-auto w-75" id="trainingslogin1">
                                <input type="number" class="form-control me-0 style1" id="apo_Kunden_ID" name="apo_Kunden_ID" aria-describedby="input1_help" placeholder=" Apotheke Kundennummer ein" width="50%">
                            </div>

                            <div class="row row-cols-8">
                                <div class="mb-3 col-6 w-50" id="trainingslogin2">
                                    <input type="number" class="form-control me-0 " id="PLZ1" name="PLZ" aria-describedby="input1_help" placeholder="Ihre PLZ an" width="50%">
                                </div>
                            </div>

                            <div class="row row-cols-8">
                                <div class="mb-3 col-6 w-50" id="trainingslogin3">
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" value="1" id="remember" name="remember">
                                        <label class="form-check-label" for="remember">Erinnern Sie sich bitte an mich.</label>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <button id="btn2" class="btn btn-primary" type="submit">Hier eingeben</button>
                    </div>
                </div>

                <footer id="problemefooter" class="container-fluid text-center">


                    <div class="contentArea" id="probleme">

                        <p>
                            Content content content
                        </p>
                    </div>
                </footer>

            </div>

        </div>
        <script src="../bootstrap/5/js/bootstrap.bundle.min.js"></script>
    </body>

    </html>

Why do you have your form tag like:

<form id="serverconnectform1" dmx-param="" action="../dmxConnect/api/loginvalidate.php" method="post" />

it should not end with /> but just > as forms are not self-closing tags … such as <img /> or <br /> for example.

So in short - what you have entered is wrong:

<form ... />

The opening form tag must be

<form ... >
1 Like

There you go!
And Code Suggest allowed me to do it.
Thank you, Teodor!