HTML5 introduces some new functionalities to web form.
But always take note, as with CSS3, not all of these functionalities are supported in all web browser.
The <fieldset> that is used for grouping related elements in the form and it will put an outline to the form.
As you could see, a legend Contact information can be included in the outline too.
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>Quick contact form</title>
</head>
<body>
<form>
<fieldset>
<legend>Contact information</legend>
<ul>
<li>
<label for='email'>Email:</label>
<input required type='email' id='email' name='email'/>
</li>
<li>
<label for='tel'>Telephone number:</label>
<input required type='tel' id='tel' name='tel'/>
</li>
<li>
<label for='url'>Website:</label>
<input required type='url' id='url' name='url'/>
</li>
</ul>
<input type='submit' value='Submit this' />
</fieldset>
</form>
</body>
</html>
The email input type tells the browser that user should enter an email address.
In all of the fields, we have put a required attribute.
This will tell compatible browsers to ensure that the field is filled up before being submitted.