I want to make this
but I don't know how to make the squares and how to set that in one square only one letter can be entered. So far I wrote this, but I really don't know how to continue.
.input {
width: 200px;
border: 1px solid black;
}<label><b>CNP</b></label>
<input class="input" type="text" name="CNP">UPDATE : Thanks to the comments of @Danield I updated with more appropriate unit.
You can use linear-gradient BUT you need to pay attention to different sizes and to the font-family if you want to have one letter inside one slot:
.input {
/* each letter will take 1ch + 1px and we remove 1px of the last one*/
width: calc(15 * (1ch + 1px) - 1px);
border: 1px solid black;
background:
/* 1ch space for the letter + 1px border */
repeating-linear-gradient(to right, #fff, #fff 1ch, #000 1ch, #000 calc(1ch + 1px));
font-size: 29px;
/*since a letter will take 1ch we add 1px to cover the border*/
letter-spacing: 1px;
/*we use a monospace font-family so all the letter will take the same width = 1ch*/
font-family: monospace;
}<input class="input" type="text" maxlength="15" name="CNP">
<p>This will work with any font-size</p>
<input class="input" type="text" maxlength="15" name="CNP" style="font-size:35px;">
ch units might be more appropriate here than px, and letter-spacing: 1px can take into account the extra 1px border space - codepen.io/danield770/pen/zWEGNj - Nice idea though!
ch units font-size isn't an issue anymore - one letter will always fit no matter what the font-size.you can do it with javascript but let's keep on html5 and css as you can see here:
Use maxlenght atribute:
<input type="text" name="my_text[]" maxlength="1" style="float:left">
<input type="text" name="my_text[]" maxlength="1" style="float:left">
<input type="text" name="my_text[]" maxlength="1" style="float:left">
<input type="text" name="my_text[]" maxlength="1" style="float:left">
<input type="text" name="my_text[]" maxlength="1" style="float:left">
<input type="text" name="my_text[]" maxlength="1" style="float:left">
<input type="text" name="my_text[]" maxlength="1" style="float:left">
<input type="text" name="my_text[]" maxlength="1" style="float:left">
<input type="text" name="my_text[]" maxlength="1" style="float:left">
<input type="text" name="my_text[]" maxlength="1" style="float:left">
Remember to create a class or use bootstrap class float-left, I used an inline css but that's not a good practice.
If you need a different border on input you can do it with css:
<input type="text" name="my_text[]" maxlength="1" class="my_text">
<style>
.my_text{
border: 1px solid #000;
float:left;
}
</style>
<!DOCTYPE html>
<html>
<head>
<link href="CSS/style.css" rel="stylesheet" type="text/css">
<title>Laborator 2(P6)</title>
<style>
input {
width: 1.5em;
border: 1px solid black;
}
</style>
</head>
<body>
<div>
<label><b>CNP</b></label>
<input type="text" size=1 maxlength=1>
<input type="text" size=1 maxlength=1 style="margin-left:-5px">
<input type="text" size=1 maxlength=1 style="margin-left:-5px">
</div>
</body>
Note that the input element in the CSS is an element selector.
You can implement it using repeating-linear-gradient and spacing but if you want to add the auto tab effect, you have to use jquery, you can find below an ex.:
<body>
<link href="CSS/style.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Laborator 2(P6)</title>
<label style="float:left; margin-right:5px;"><b>CNP</b></label>
<input type="text" class="inputclass1" maxlength="1" />
<input type="text" class="inputclass1" maxlength="1" />
<input type="text" class="inputclass1" maxlength="1" />
<input type="text" class="inputclass1" maxlength="1" />
<input type="text" class="inputclass1" maxlength="1" />
<input type="text" class="inputclass1" maxlength="1" />
<input type="text" class="inputclass1" maxlength="1" />
<input type="text" class="inputclass1" maxlength="1" />
<input type="text" class="inputclass1" maxlength="1" />
<input type="text" class="inputclass1" maxlength="1" />
<style>
body {
padding: 20px;
}
form > div {
margin: 0 0 20px 0;
}
.inputclass1 {
width:20px;
border: 1px solid black;
float:left
}
</style>
</body>
<script type="text/javascript">
$(document).ready(function(){
$('input').keyup(function(){
if($(this).val().length==$(this).attr("maxlength")){
$(this).next().focus();
}
});
});
</script>
