CSS Input Zip code

Question

Good morning,

I would like to make my input text accept only four numbers and dps of that put "-" and accept only three numbers.

This is possible only with HTML and CSS?

Answer 1

You can use the attribute pattern along with the required:

<form>
<label for="CEP">CEP:
<input name="CEP" id="CEP" required pattern="\d{5}-\d{3}"/>
</label>
<input type="submit" value="Enviar" />
</form>

Remembering that the CEP (unless mistaken) are 5 digits - and 3 digits. Source

Answer 2

Only with HTML and CSS I believe it would not be possible, but with jQuery it is easy to do this. Follow example:

    $(document).ready(function () { 
        var $campo = $("#cep");
        $campo.mask('00000-000', {reverse: true});
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.0/jquery.mask.js"></script>

CEP <input type="text" id="cep" name="cep" />

This way the field will be limited only to numbers and the number of digits requested.