Guide to making a mobile number input field with a constant country code

I'm struggling to create a mobile input box that separates the mobile number and country code with a divider or fixes the country code in the field without success.

Something similar to this image: https://i.sstatic.net/6HwYdZrB.png

But I don't need any flags or extra elements.

This is the current code I have been working on:

<div class="form-group">
    <label for="u_tel" class="control-label">Customer phone number:<sup>*</sup> (Please DO NOT include the +36/06 area code)</label>
    <input type="text" value="{$user_data.u_tel}" class="form-control" id="u_tel" name="u_tel"  placeholder="701234567 (Please provide phone number without area code and spaces)" required data-required-error="Please enter your phone number" minlength="8" maxlength="9">
    <div class="help-block with-errors"></div>
</div>
htmlcssbootstrap-4

Answer №1

If I were to create a similar layout, I would go with:

<div class="input-group mb-3">
    <div class="input-group-prepend">
        <span class="input-group-text">+1</span>
    </div>
    <input type="text" class="form-control" placeholder="Username">
</div>

This setup allows you to include a div where you can house either the country code alone or combine it with the country's flag (you have the freedom to customize it as needed).

Answer №2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mobile Input</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div class="container mt-5">
    <div class="form-group">
        <label for="u_tel" class="control-label">Mobile</label>
        <div class="input-group">
            <div class="input-group-prepend">
                <select class="custom-select" id="country_code" name="country_code">
                    <option value="+65">+65</option>
                    <option value="+1">+1</option>
                    <option value="+44">+44</option>
                    <!-- Add more country codes as needed -->
                </select>
            </div>
            <div class="divider"></div>
            <input type="text" class="form-control" id="u_tel" name="u_tel" placeholder="91234567" required data-required-error="Please enter your mobile number" minlength="8" maxlength="8">
        </div>
        <div class="help-block with-errors"></div>
    </div>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</body>
</html>

Feel free to use this code snippet as a basis for your project.

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

Steps to easily modify the color of Font Awesome stacked icons when hovering over them

I have incorporated two Font Awesome icons into my design: fa-circle-thin fa-user-plus These icons are stacked to create a circular icon appearance. <span class="fa-stack fa-sm"> <i class="fa fa-circle-thin fa-stack-2x"></i> <i c ...

htmlcssfont-awesome

Show a variety of pictures in a random arrangement?

Looking for some help here! I'm trying to shuffle my images in a random order each time the page is refreshed. It's like a game of musical chairs but with pictures! Does anyone know how to achieve this? I've done some searching, but haven& ...

javascriptphphtml

What is the method for selecting the element currently under the mouse cursor?

Is it possible to change the color of all elements you hover over using plain Javascript without jQuery? HTML <ul> <li></li> <li></li> <li></li> </ul> JavaScript (function() { var item = ...

javascripthtml

Switch up the color of checkboxes with a dropdown menu option

I have an HTML dropdown code and I am trying to trigger a click event when a specific value is selected. Once this value is clicked, I want some checkboxes to change color. <select> <option value="calculate">calculate</option> ...

javascripthtmldrop-down-menu

Getting in formation without needing a table

Tables are not the way to go for alignment. How can I align this without using a table? I have several input fields, each with a label positioned to the left of it. I want all the input fields to be aligned on the left side. Below is a simple representati ...

htmlcssvertical-alignment

Tips for creating a responsive H1 tag within the Avada WordPress theme by implementing CSS

One of my acquaintances recently upgraded his Avada WordPress theme to the latest version of WordPress without physically uploading any files. However, after this upgrade, he noticed that the page titles (H1) no longer appear responsive as they did before. ...

csswordpress

Ensure that three spans are precisely aligned to occupy a single line

My dilemma is as follows: I have a line within a document that has a set width. Now, there are 3 elements involved - one <a> tag and two <span> tags. The content in the <a> tag varies in width each time it appears on the line. The thi ...

htmlcssresponsive-design

Utilize/Absolve/Add a Prefix to angular material scss styles

Issue I am facing a challenge with integrating angular material SCSS into my application. I want to ensure that these styles are isolated and scoped specifically for my application, as it will be embedded within a larger monolith. The goal is to prevent a ...

cssangularsassangular-material

Selection of country and state in a form

Within the "My Account" form for users, I have implemented two select fields - one for country and one for state. These fields are automatically populated with lists from countries.js, which is functioning well. However, whenever a user accesses their acco ...

phphtmlforms

Issue with Laravel project: Views are not updating after code changes

Despite my efforts to clear and refresh everything, my Laravel project is not reflecting the changes. I have attempted clearing the view and deleting files manually. I also ran cache:clear, changed the root folder name, but the project continues to displa ...

phphtmllaravel

The importance of formatting in coding and how to effectively apply it

Why is proper code formatting so important for programmers? What are the benefits of following consistent formatting rules, and what exactly are these rules? Many programmers prefer to write their code like this: <html> <head> < ...

phphtmlcssformatting

Tips for customizing the selection tip of a custom cursor using CSS

I have integrated a color picker jquery plugin on my website to allow users to pick colors from an image. I made a modification in the CSS to change the cursor to an eyedropper icon. However, currently when clicking on the image, the color pointed by the u ...

javascriptjqueryhtmlcsscursor

Unexpected display issues with CSS shapes in Bootstrap framework

Been experimenting with creating custom shapes in Bootstrap - they display correctly in HTML and CSS, but Bootstrap distorts them. It seems like there are no conflicting classes. Could it be necessary to use '!important' on some of the elements? ...

cssbootstrap-5

The website content is not visible on Internet Explorer version 10

Issue with Internet Explorer 10 I recently completed a new website for our company: . However, I am encountering some challenges with the site when viewed on IE 10 on Windows 7. For some reason, a large portion of the text is not displaying properly in IE ...

javascripthtmlangularjsinternet-explorer

Issue with sending an ajax post request using Jquery

The jquery ajax request below is not working as expected: $(document).ready(function(){ var friendrequest = $(".friendrequest").val(); $(".afriendreq").click(function(){ $(".afriendreq").hide(); ...

htmlajaxjquery

The processing indicator fails to function properly when trying to refresh a jQuery datatable

I am currently customizing the loading indicator for the datatable using a spinner called startLoadGlobal(SPINNER_DATA_TABLE_FINANCEIRO_CARREGAR_REGISTROS) in jQuery. It works correctly when I initially load the datatable, however, when I reload it, the sp ...

javascripthtmljqueryjquery-uidatatables

Tips for disabling automatic browser scrolling to a specific div ID?

I have a webpage with a vertical accordion in the center to display content. Upon loading the page, the accordion is centered. However, when a user clicks on a tab, the entire page scrolls up, moving the tab to the top of the browser. Is there a way to pre ...

javascriptjqueryhtmlcssaccordion

Is it possible to customize the bullet color for an unordered list using li:before?

Recently, I came across a clever solution for changing the color of a bullet point. The method mentioned an alternative approach as well. "If you're unable to edit your HTML, you can opt for list-style-image with a customized colored dot, or utilize ...

htmlcss

Innovative CSS techniques and outdated web browsers

Do you think it's beneficial to incorporate cutting-edge CSS-properties such as border-radius, text-shadow, box-shadow, and gradient into your layout designs today? And how about utilizing values like rgba()? As I explore various web galleries, I not ...

cssbrowser

Creating a fully responsive grid layout with Bootstrap 4: Utilizing columns within

I designed a page using Bootstrap 4, featuring an options menu on the left side and a container div with rows and columns. To display the options menu, I adjusted the size of the container div by changing the "left" value. However, the arrangement of the ...

containersbootstrap-4responsive