Html Question posted in
Some basic documentation can be found here.

Html – How to create a mobile number input box with fixed country code

I am trying to create a mobile input box with mobile number and country code separated by a divider or just the country code being fixed in the field but unable to do it.

Something like this:

(https://i.sstatic.net/6HwYdZrB.png)](https://i.sstatic.net/M6DSg36p.png)

But it doesn’t need the flag or anything extra.

This is the current code I’m working with.

<div class="form-group">
        <label for="u_tel" class="control-label">Megrendelő telefonszáma:<sup>*</sup> (Kérjük NE tüntesse fel a +36/06 előhívószámot)</label>
        <input type="text" value="{$user_data.u_tel}" class="form-control" id="u_tel" name="u_tel"  placeholder="701234567 (Előhívószám és szóköz nélkül kérjük feltüntetni)" required data-required-error="Kérjük, adja meg a telefonszámát" minlength="8" maxlength="9">
        <div class="help-block with-errors"></div>
    </div>
Tags:

2

Answers


  1. 0

    I’d use something like this:

    <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>

    where you add a div where you can store just the country code or the country code with the flag of the country (feel free to customise it)

    Login or Signup to reply.
  2. 0 
    <!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>

    Here is my view, You may try something like this.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search