Question

I am reading HTML and CSS by Jon Duckett, and I am reading about labelling form controls using the label tag.

The example that he has shown is given below.

<html>
<head>
	<title>Labelling Form Controls</title>
</head>
<body>
	<form action="http://www.example.org/subscribe.php">
		<label>Age: <input type="text" name="age" /></label>
		<br />
		Gender:
		<input id="female" type="radio" name="gender" value="f">
		<label for="female">Female</label>
		<input id="male" type="radio" name="gender" value="m">
		<label for="male">Male</label>
	</form>
</body>
</html>

Now, in the example he provided, he has not closed the input tags for the female and male radio options.

My question is, as the radio buttons are self-closing, should they be closed as shown below, or not?

<input id="female" type="radio" name="gender" value="f" />
<label for="female">Female</label>
<input id="male" type="radio" name="gender" value="m" />
<label for="male">Male</label>

Answer 1

You don't need to make <input> tags self-closing in HTML5, they're considered empty elements which can't have children. Therefore self-closing them would be redundant.

https://developer.mozilla.org/en-US/docs/Glossary/empty_element

Labelling Form Controls HTML with `input` tag

1 个答案: