HTML Form with Contact Number Listed

When using the "tel" attribute in an input, we can set a maximum or minimum length for the input. However, the drawback is that it allows for all types of inputs, whether numeric or alphabetic.

On the other hand, if we use the "number" attribute for the input, it only accepts numbers but we are unable to set a minimum or maximum character limit.

Even though I have specified a pattern within it, there is no change. Is there an alternative to achieve both setting a max-min length and accepting only numeric inputs?

<div class="form-group">
    <label for="exampleFormControlInput3">Mobile Number</label>
        <div class="input-group">
           <span class="input-group-text" id="basic-addon1">+91</span>
               <input type="tel" class="form-control" id="exampleFormControlInput3" maxlength="10" placeholder="012-345-6789" pattern="[0-9]{3}-[0-9]{2}-[0-9]{3}">
        </div> 
 </div>

https://i.sstatic.net/3gmxh.png

Note: Bootstrap 5 has been used for this implementation.

htmlcssbootstrap-5contact-form

Answer №1

To ensure that only numerical input is accepted in a phone number field, you can use the input type "tel" along with JavaScript to filter out alphabetic characters. While the type "tel" provides a pattern attribute for validation, it may not be supported by all browsers.

<label for="phone">Please enter your phone number:</label>

<input type="tel" id="phone" name="phone"
       maxlength ="6"
       pattern="[0-9]{3}-[0-9]{3}"
       oninput="this.value = this.value.replace(/[^0-9.]/g, '').replace(/(\..*?)\..*/g, '$1');"
       required>

<small>Format: 123-456</small>

Click here for more information on using input type tel

Answer №2

It is important to use the correct semantic markup when designing forms on your website. Instead of using type="number", consider using type='tel' for input fields. If you need to control the format of the user input, you can utilize the pattern attribute.

<input type="tel" id="phone" name="phone"
       pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
       required>

For more information, refer to this documentation: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/tel

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A unique and dynamic design concept for my website: a zigzagging structure

I am trying to achieve a layout similar to the one at the provided link, with variable sized div tags on the left and right edges. Can someone please assist me in styling the left and right sides accordingly? Key styles I have used: .rightside { margin-l ...

htmlcss

Styling with react-jss based on intricate conditionals

After experimenting with react-jss for a few weeks, I am faced with the challenge of styling components efficiently. With numerous conditionals in these components, I am striving to avoid creating an excess of new components that essentially share the same ...

cssreactjstypescriptjssreact-typescript

Unable to retrieve input values from the text fields using JavaScript

In my project, I have created two PHP pages - "doc.php" and "chkval.php". The issue I am facing is that the textfield values are not being captured in the "chkval.php" page using $POST method. An error that I encountered is: Use of undefined constant re ...

phpjavascriptmysqlhtmltextfield

Identify the row containing a value of null using jQuery (functionality not performing as anticipated)

Whenever the user clicks on the GetData button, I retrieve JSON data and display it in an HTML table similar to the demo below. Demo: https://plnkr.co/edit/I4XYY6CZohf7IS6wP8dR?p=preview There are instances where the value can be null, such as the loanNu ...

javascriptjqueryhtml

Switch a div to a computed location

I'm having trouble getting this code to animate a div to a calculated position. Can someone please help me troubleshoot? $(document).ready(function() { var is_Clicked = false; $("#togglebutton").click(function() { if (is_Cli ...

javascriptjqueryhtmlcss

The flex box structure crumbles, causing the boxes to align side by side instead of in a masonry layout

I'm currently facing a challenge with my project regarding the utilization of flexbox. Everything seems to be in order, but as you resize your viewport to around 1400px, the column layout collapses. I'm looking for a way to prevent this from hap ...

htmlcssflexbox

I'm curious about this encoding method. Is there a way to convert it in UIWebView?

Can anyone help me figure out how to display these characters correctly in my UIWebView? The screenshot below shows that some European language characters are not being rendered properly. When I checked the original webpage, everything looked fine, so I th ...

htmlcharacter-encodinguiwebview

Using SCSS to apply a class in Next.js

Currently, I am working on a project using Next.js and implementing the SCSS module procedure for styling. An example component directory structure is as follows: SampleComponent -> index.tsx and SampleComponent.module.scss The code in SampleComponent ...

javascriptcssreactjssassnext.js

Retrieve information from the existing URL and utilize it as a parameter in an ajax request

Currently, I am working on a website with only one HTML page. The main functionality involves fetching the URL to extract an ID and then sending it to an API using an AJAX call. Upon success, the data related to the extracted ID is displayed on the page. H ...

javascriptjqueryhtmlajaxurl

Perform a toggle action on the first row when clicking within the current row using Jquery

I've been grappling with the idea of creating a function that can display and hide a comment field when a button is clicked. The challenge here is that there are multiple line items with their own comment boxes. I want to find a way to achieve this wi ...

javascriptjqueryhtmlcss

When I attempt to incorporate multiple sliders on a single page, I encounter difficulties in determining the accurate stopping position if the number of slides varies

I am having trouble setting the correct stop position for sliders with different numbers of slides on a page. When I have the same number of slides in each slider, everything works fine. However, I need to have a different number of slides in each slider ...

javascriptjqueryhtmlcss

Determine the latest date within each group and display the corresponding output value

I am seeking a way to showcase only the most recent value for each group. For example, in the CSV data provided below, the total amount of Bagels in the Cinnamon Raisin variety were collected during three different sampling periods: May 2017, March 2017, ...

javascripthtmljsond3.js

Curved edges navigation bar design

Having trouble rounding the corners of my navigation bar. When I use border-radius: 15px;, it rounds all the corners of the <a> tag, but I only want to round the corners of the <li> tags to adjust the margins of the whole toolbar. Check out th ...

htmlcss

Using JQuery to send a post request to an iframe and receiving a

Currently, I am utilizing a form on a webpage to send data to an iFrame. This process can occur multiple times based on user requests. You can see an example of this process here: Target an iframe with a HTML Post with jQuery My goal is to implement speci ...

jqueryhtmliframecallback

What is the purpose of adding this webkit CSS rule?

Whenever I open Chrome developer tools, I come across something that puzzles me. I always assumed that a CSS property is crossed out when it's overwritten by another class. However, I found myself in this peculiar situation: https://i.sstatic.net/Xm ...

cssgoogle-chrome-devtoolsweb-frontend

Troubleshooting Problems with display:table and display:table-cell Alignment in Internet Explorer Versions 7 and 9

I have been struggling with the layout of a website that contains multiple columns. After extensive work, I believed I had everything properly aligned. Adobe BrowserLab seemed to confirm this, aside from various issues in IE6 and IE7 which I decided to ove ...

htmlcssinternet-explorercss-tables

In CSS, when text within a tab div lacks spaces, it triggers a horizontal scrolling effect

My special css style for the div: .message-body { background: #5181a2; padding: 8px 5px; text-align: justify; } I aim to display this particular text inside the div similar to how 'hello hello' appears on the line above. ...

htmlcss

The container holding the inner elements is slightly oversized by a couple of pixels

Check out this Plunker example. Hello everyone, I am currently working on fitting two inner divs (a title bar and a canvas) inside an outer div. These inner divs are generated dynamically and have specific fixed dimensions. Below is a sample code snippet ...

csshtmlweb

Show data based on the chosen destination

Recently, I've been working on creating a simple printer manager to monitor the status of all my printers. Although I have successfully displayed all the data, I'm facing an issue while trying to organize it by location. The error message I keep ...

javascripthtmlasp.netangulartypescript

Is there a way to view the redirects initiated by the browser on different tabs?

Is there a way to trace the redirects initiated by the browser in separate tabs? One instance would be when a downloaded file triggers a new tab to open. ...

htmldownload