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.