All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

HTML Input Text Numbers Only

Last Updated : Jul 1, 2023

HTML Input Text Numbers Only

In this tutorial we will show you the solution of HTML input text numbers only, in HTML there is also a method with the help of which you are able to insert only number. This question is very important.

Because sometimes we make a from or want to enter only number like calculator. In these cases, only number are allowed. Hence, in this article we will make an input tag, in which only numbers are allowed to enter.

In previous session, we will show you how to make an input tag with text only, we hope that you understand that properly.

Step By Step Guide On HTML Input Text Numbers Only :-

As, there are many ways to done this. But in this article we show only you to how you are able to do this in html only and with the help of input tags in html.

For this, we will create a form in the example given below. We hope that you know what form is and why it is used. If you don’t know then you must go through our article, in which we talk about forms.

<!DOCTYPE html>
      <html>
        <head>
          <title> Title of the document<title>
   </head>
<body>
    <h2>
        feedback form
    </h2>
    <form action="#" method="get">
        <label for="">
            Enter your name here:
        </label>
        <input type="text">
        <br>
        <br>
        <label for="">
            Please enter whatsapp number here:
        </label>
        <input type="number" name="" id="">
        <br><br>
        <p>
            This information is only for educational purposes.
        </p>
        <br><br>
        <p>
            Give your feedback here
        </p>
        <textarea name="" id="" cols="50" rows="7"></textarea>
        <br><br>
        <input type="button" value="Submit">
        <input type="button" value="Reset">
    </form>
</body>
      </html>
  1. First, we write <! DOCTYPE html> which we used as an instruction to the web browser about what version of HTML file is written in.
  2. Secondly, the <html> tag is used to indicate the beginning of an HTML document.
  3. As above now <head> tag is used to contain information about web page. In this tag a <title> tag is used which helps us to specify a webpage title. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
  4. Thirdly, <body> tag is used to define the webpage body. All the contents to show on website are written here. In body, we create a registration form, in this first we create an input tag for name with text type. After this we create a input field for numbers only with input type number. Rest is for feedback and submit and reset. Which are discussed later.
  5. We hope you understand that with the help of input type number only you are able to allow only number in input text field. Later, we will also discuss this topic again with the help of jQuery and JavaScript.
  6. At last, the <body> and <html> tags are closed with </body> and </html> respectively.

Conclusion :-

In conclusion, here we want to say that we are now able to allow numbers only with the help of input type number only in input tag.

In later, session we also describe textarea and submit, reset button that we use here. I hope this tutorial on HTML input text numbers only helps you.

Author Image About Anjali

Experienced Computer Programmer with a broad range of experience in technology. Strengths in application development and Object Oriented architecture design, front end programming, usability and multimedia technology. Expert in coding languages such as C, C++ Java, JavaScript, PHP and more.

Follow Anjali On Linkedin 🡪