Source Code: (back to article)
<!DOCTYPE html>
<html>
<head>
<style>
fieldset {
margin-bottom: 20px;
}
legend {
color: #fff;
background-color: #095484;
padding: 3px 5px;
font-size: 20px;
}
</style>
</head>
<body>
<h2>Fill the Form to Participate in the Big Project</h2>
<form action="/form/submit" method="post">
<fieldset>
<legend>Personal information</legend>
<label for="name"> First name: </label>
<input id="name" type="text" name="firstname" placeholder="First name" required>
<label for="last">Last name:</label>
<input id="last" type="text" name="lastname" placeholder="Last name" required>
<br>
<br>
<label for="age">Age:</label>
<input id="age" type="number" min="10" max="100" step="1" name="number-of-colors">
<label for="website">Website:</label>
<input id="website" type="url" multiple>
<br>
<br>
<label for="address">Email address:</label>
<input id="address" type="email" name="email" placeholder="YourEmail@example.com" required>
<label for="tel">Tel.:</label>
<input id="tel" type="tel" placeholder="123-456-7890" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}">