How to take input of phone number globally using numbers
Table of contents
No headings in the article.
First, create an HTML page and add the code present below to get the icons and symbols of the country with their flags of the phone number that you will enter in the field.
<!-- international telephone no -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
Create a form with the phone number field and submit button in the body of the HTML.
In this the type of input has to be of tel which means telephone 📞 in order to accept only telephone numbers 🔢 only.
<form>
<p>phone Number</p><input id="phone" type="tel" placeholder="+910123456789">
<button type="submit">submit</button>
</form>
Copy the below code to see the flags and code of the telephone number you enter with their country code starting with "+".
<!--Add the code at last of body tag-->
<script>
const phoneInputField = document.querySelector("#phone");
const phoneInput = window.intlTelInput(phoneInputField, {
utilsScript:
"https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
});
</script>
The final code will be like this.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sign Up</title>
<!-- international telephone no -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/css/intlTelInput.css"
/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/intlTelInput.min.js"></script>
</head>
<body>
<form>
<p>phone Number</p><input id="phone" type="tel" placeholder = "+91 0123456789" required>
<button type="submit">submit</button>
</form>
<!--Add the code at last of body tag-->
<script>
const phoneInputField = document.querySelector("#phone");
const phoneInput = window.intlTelInput(phoneInputField, {
utilsScript:
"https://cdnjs.cloudflare.com/ajax/libs/intl-tel-input/17.0.8/js/utils.js",
});
</script>
</body>
</html>
I hope you find valuable content through this blog about hoe to display the phone number field with country code.