<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>
</form>
body {
background-color: #fff;
color: #333;
font: 1em / 1.4 Helvetica Neue, Helvetica, Arial, sans-serif;
padding: 1em;
margin: 0;
}
* {
box-sizing: border-box;
}
label {
display: inline-block;
width: 5em;
text-align: right;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.