Strange issue on label id

Question

Hi,

I keep encountering errors in my label and input tags despite having made several changes. When I check the code in both Visual Studio and AI, I can't seem to find any errors. However, when I run the code, the browser shows issues. What could be causing this problem?

Also, the Bazor type is web assembly.

<form>
    <h1>AI Image Generator</h1>
    <div>
        <label>
            <input type="text"  id="imageText" @bind="@ImageText" />
        </label>
    </div>
    <button @onclick="GenerateImage" type="button">Generate Image</button>
</form>

 

<div>
    <form>
        <h1>AI Image Generator</h1>
        <div class="form-group">
            <label for="imageText">Enter your Image text:</label>
            <!-- Use @bind to bind the value of the input field to a property in our code-behind file -->
            <input type="text" class="form-control" name="imageText" id="imageText" @bind="@ImageText" />
        </div>
        <button @onclick="GenerateImage" type="button">Generate Image</button>
    </form>
    <div>
        @*  Display the generated image if available *@
        @if (generatedImageUrl != null)
            {
            <img src="@generatedImageUrl" alt="Generated Image" />
            }
    </div>
</div>