Rendered forms are missing closing tags

[TheAutomatingMrLynch]

Hi, I am fairly new to Giraffe and the view engine but I like it very much so far. I have however been facing something that seems to be a bug with forms not having a close tag when rendered. To be honest I do not know whether this is an issue with Giraffe or the view engine.

Steps to replicate:

• Add following F# code to a view:

div [_id "page-column-1"] [
    form [_class "add-form"] [
        label [_for "name" ] [ str "Name: " ]
        input [_type "text"; _id "name"; _name "name" ] 
        input [_type "submit"; _value "New" ] 
    ]

    form [_class "add-form"] [
        label [_for "name2" ] [ str "Name2: " ]
        input [_type "text"; _id "name2"; _name "name2" ]
        input [_type "submit"; _value "Copy" ]
    ]
]

• Run your application and locate the forms in raw HTML:

<div id="page-column-1">
	<form class="add-form">
		<label for="name">Name: </label>
		<input type="text" id="name" name="name">
		<input type="submit" value="New" />
		<form class="add-form">
			<label for="name2">Name2: </label>
			<input type="text" id="name2" name="name2">
			<input type="submit" value="Copy" />
</div>

[TheAutomatingMrLynch]

Well bumping Giraffe from version 7.0.0 to 7.0.2 seemed to fix the issue so nevermind.

Thank you for your great work and have a good day! :-)

[TheAutomatingMrLynch]

Soooo, I'm back again. I might be too tired because the issue was not fixed by bumping the Giraffe version anyway. On top of that the text inputs are not closed either it turned out. Actual:

<div id="page-column-1">
	<form class="add-form">
		<label for="name">Name: </label>
		<input type="text" id="name" name="name">
		<input type="submit" value="New" />
		<form class="add-form">
			<label for="name2">Name2: </label>
			<input type="text" id="name2" name="name2"> 
			<input type="submit" value="Copy" />
</div>

Expected:

<div id="page-column-1">
	<form class="add-form">
		<label for="name">Name: </label>
		<input type="text" id="name" name="name" /> 
		<input type="submit" value="New" />
	</form>
	<form class="add-form">
		<label for="name2">Name2: </label>
		<input type="text" id="name2" name="name2" />
		<input type="submit" value="Copy" />
	</form>
</div>

Kind regards B

[dustinmoris]

This is correct behaviour. In HTML5 an input is a void element. It's self closing and doesn't require the SOLIDUS:

• https://www.w3schools.com/tags/tag_input.asp

• https://stackoverflow.com/questions/3741896/what-do-you-call-tags-that-need-no-ending-tag#3741961

[TheAutomatingMrLynch]

My apologies, I don’t do much frontend stuff. <input> without a closing tag in XML and XHTML is not valid and you are correct that it is valid HTML5. But shouldn’t the <form> tag be closed though as it is not a void element?