Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Rendered forms are missing closing tags #28

Open
TheAutomatingMrLynch opened this issue Oct 20, 2024 · 4 comments
Open

Rendered forms are missing closing tags #28

TheAutomatingMrLynch opened this issue Oct 20, 2024 · 4 comments

Comments

@TheAutomatingMrLynch
Copy link

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
Copy link
Author

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
Copy link
Author

TheAutomatingMrLynch commented Oct 20, 2024

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
Copy link
Member

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

@TheAutomatingMrLynch
Copy link
Author

TheAutomatingMrLynch commented Oct 21, 2024

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants