task page: https://developer.mozilla.org/en-US/docs/Learn/Forms/Test_your_skills:_Form_structure
my work page:https://codepen.io/sophientaste-163-com/pen/oNGRzxp
<body>
<form>
<fieldset>
<legend>Personal details</legend>
<p>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
</p>
<p>
<label for="age">Age:</label>
<input type="number" id="age" name="age">
</p>
</fieldset>
<fieldset>
<legend>Comment information</legend>
<p>
<label for="comment">Comment:</label>
<input type="text" id="comment" name="comment">
</p>
<p>
<label for="email">Email:</label>
<input type="email" id="email" name="email">
</p>
</fieldset>
<section>
<p>
<button type="submit">sumbit</button>
</p>
</section>
</form>
</body>
I would like to:
- style the form more beautifully
- tried to replace the input with textarea element when coding the comment, however, it seems the textarea usually goes wrong and i cannot even see the email space in the browser