Closing HTML ≪Input≫ Tag Issue

Closing HTML input tag issue

These are void elements. This means they aren't designed to contain text or other elements, and as such do not need — and in fact, cannot have — a closing tag in HTML.¹

However, they should have a <label> associated with them:

<input id="my_id" type="radio" name="radio_name">
<label for="my_id">Radio Label</label>

Radio buttons by nature can't contain text anyway, so it wouldn't make sense for them to accept text or other elements as content. Another issue with a control that does accept text as input: should its textual content then be its value, or its label? To avoid ambiguity we have a <label> element that does exactly what it says on the tin, and we have a value attribute for denoting an input control's value.

¹ _{XHTML is different; by XML rules, every tag must be opened and closed; this is done with the shortcut syntax instead of a </input> tag, although the latter is equally acceptable:}

<input id="my_id" type="radio" name="radio_name" />
<label for="my_id">Radio Label</label>

Input tag html with close tag or not

You can make the tag closed, which would combine conciseness of HTML and strictness of XHTML:

<input type="text" value="Save" />

For further discussion, please refer to HTML 5: Is it <br>, <br/>, or <br />? but please keep in mind that the top-rated response there is very old. XHTML correctness is more important now than it was in 2009. Also, the closed tag tells the reader not to attempt to look for the closing tag, which makes the code more readable in my opinion.

Closing the div tag making form unusable

There are 2 issues I see here.

You are not closing the input tags which are self-closing tags.
THE PROBLEM: The button is not within the form and you are not attaching the click event in the button to your form - or at least not in the included form.

Here is a revised and working version of your code

<% layout('layouts/boilerPlate') %>
<h1 class="text-center mb-3">Experiment Detail</h1>
<div class="col-6 offset-3">
    <form action="/plannerHome" method="POST" class="classification" enctype="multipart/form-data" >
        <div class="classifications">
            <label class="form-label" for="taskName">Experiment name: </label>
            <input type="text" name="taskName" id="taskName" required />
        </div>
    <!-- The closing tag of this div is causing problem --> 
        <div class="classifications">
            <label class="form-label" for="taskType">Experiment Type: </label>
            <select name="taskType" id="taskType">
                <option value="None">Please Select a Experiment type</option>
                <option value="classify">Classification</option>
                <option value="instance-segmentation">Instance Segmentation</option>
                <option value="semantic-segmentation">Semantic Segmentation</option>
                <option value="localisation">Localisation</option>
            </select>
        </div><!-- This is causing problem -->
    <!-- For the Supplementary material to revise -->
        <div class="classifications">
            <label class="form-label" for="dataManual">Supplementary material: </label> 
            <input class="form-control" type="file" id="dataManual" name="dataManual" />
        </div>  
    <!-- For the input file -->
        <div class="classifications">
            <label class="form-label" for="labelFile">Label file: </label>
            <input class="form-control" type="file" id="labelFile" name="labelFile" />
        </div>  
    <!-- Upload file folder : https://stackoverflow.com/questions/43958335/select-folder-instead-of-single-file-input-->  

        <div class="classifications"> 
            <label class="form-label" for="data">Data: </label>
            <input class="form-control mb-3 " type="file" id="data" name="data" />
        </div>
        <div class="mb-3">
            <button type="submit">Create Experiment</button>
        </div> 
    </form>
</div>

Closing tag with comment produce strange behaviour

In HTML, whitespace isn't entirely ignored. A lot of whitespace (newlines, tabs, spaces) will be reduced to a single space, but that space can sometimes cause problems with your layout.

One option is to remove the whitespace entirely, and have the HTML on a single line.

Another option, the one you came across, is to use a comment. By placing the whitespace inside a comment, it won't be rendered and mess with your layout.

Info on whitespace in HTML: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Whitespace

Self-Closing Tag Issue with document.innerHTML in Javascript

The closing </form> tags show up for me in Firefox when getting .innerHTML.

I'd suggest that the missing tag is due to your markup which I'm pretty sure is invalid:

  <!-- A <form> wrapping a <td> ? -->
<form name="foo" action="foo.php" method="get">
    <td id="td">text:
        <input name="k" type="text" />
         
    </td>
</form>

The parent of a <td> element should be a <tr>, not a <form>.

Given this markup:

<table>
    <tr>
        <form name="foo" action="foo.php" method="get">
            <td id="td">text:
                <input name="k" type="text" />
                 
            </td>
        </form>
    </tr>
</table>

...Firefox gives me this innerHTML for the <table>:

<tbody>
    <tr>
        <form name="foo" action="foo.php" method="get"></form>
            <td id="td">text:
                <input name="k" type="text">
                 
            </td>

    </tr>
</tbody>

It attempts a correction of the invalid markup.

DEMO: http://jsfiddle.net/grM4c/

Form tag closing automatically

Some browsers need the <form> object to open and close within the same parent. In your case, you open a form within a <tr> and then close it within an adjacent <tr>. If you correct that form, it might fix your other problem.

Not sure where in your source files, but lines #242-257 of the generated output at the URL you sent.

<table border=0 cellspacing=0 cellpadding=0 width='100%'>
<tr class='portletHandle' id='handle_itemMainPortlet' >
<td width='100%' height=0 align='left' valign='top'>
<table border=0 cellspacing=0 cellpadding=0 width='100%'>
<tr>
<td width=0 height=0 align='left' valign='top' style='display:none'>
<form method='post' name='form0' id='form0' action='/s.nl'>
<input type='hidden' name='c' value='3374347'>
<input type='hidden' name='n' value='1'>
<input type='hidden' name='sc' value='39'>
<input type='hidden' name='category' value='13945'>
<input type='hidden' name='id' value=''>
<input type='hidden' name='it' value='A'>
<input type='hidden' name='vid' value='RHCpZYbgAWoCAF5X'>
<input type='hidden' name='ck' value='RHCpZYbgAVkCAEOd'>
<input type='hidden' name='cktime' value='123014'>
<input type='hidden' name='cart' value='-1'>

</td>
</tr>
<tr>
</form>

Should rather be:

<table border=0 cellspacing=0 cellpadding=0 width='100%'>
<tr class='portletHandle' id='handle_itemMainPortlet' >
<td width='100%' height=0 align='left' valign='top'>
<table border=0 cellspacing=0 cellpadding=0 width='100%'>
<tr>
<td width=0 height=0 align='left' valign='top' style='display:none'>
<form method='post' name='form0' id='form0' action='/s.nl'>
<input type='hidden' name='c' value='3374347'>
<input type='hidden' name='n' value='1'>
<input type='hidden' name='sc' value='39'>
<input type='hidden' name='category' value='13945'>
<input type='hidden' name='id' value=''>
<input type='hidden' name='it' value='A'>
<input type='hidden' name='vid' value='RHCpZYbgAWoCAF5X'>
<input type='hidden' name='ck' value='RHCpZYbgAVkCAEOd'>
<input type='hidden' name='cktime' value='123014'>
<input type='hidden' name='cart' value='-1'>
<!-- Move here: --></form>
</td>
</tr>
<tr>

Is there any idea that i can put closing tag(/ ) in text input tag of html in django form processing?

To override how a form renders the HTML for its input fields, you could create a custom form widget.

from django.forms.widgets import Input

class JSXInput(Input):
    template_name = 'myapp/widgets/jsxinput.html'

And add this widget to your form field:

class MyForm(Form):
    full_name = forms.CharField(widget=JSXInput)

Then you can crib off of the django/forms/widgets/input.html template in the django.forms.templates module and add your closing brace.

<input type="{{ widget.type }}" .... />

This was for Django 2, but iirc it is pretty similar in 1.11.

However, you should ask yourself whether or not your JSX code should be rendered by Django, or instead be a static asset that then talks to a Django REST API.

Closing HTML ≪Input≫ Tag Issue