Comment vérifier le format d'une URL en HTML ?

On peut utiliser l'attribut PATTERN d'un INPUT d'un formulaire HTML5 pour vérifier le format d'une URL. Pour ce faire on utilise une expression régulière, une REGEX.

Plusieurs REGEX sont possibles en fonction du format de l'URL demandé.

La REGEX suivante accepte plusieurs formats d'adresses : les adresses avec un nom de domaine classique, les adresses IP, les alias, les URL contenant l'adresse d'une page (index.php par exemple), avec ou sans les paramètres passés en GET :

Voici le PATTERN correspondant:

pattern="^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+$"

Exemple (si vous saisissez autre chose que les caractères autorisés par la REGEX votre navigateur retourne une erreur) :

<form id="monFormulaire" method='post' action='#' role="form">
<input name="url" 
    id="url" 
    value="" 
    required="required" aria-required="true"
    pattern="^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+$"
    title="L'adresse du site web (URL)"
   type="text" spellcheck="false" style="width:50%;" />
<input type="submit" value="Envoyer" />
</form>

Remarque : Pour des raisons de sécurité vous devez également vérifier le format de l'URL coté serveur. Pour ce faire vous disposez de deux solutions.

• Soit vous utilisez la REGEX avec la fonction PHP preg_match().
• Soit vous utilisez la fonction PHP filter_var() avec son argument FILTER_VALIDATE_URL. Vous pouvez vus inspirer du code PHP disponible sur cette question.