dasda123

На вводе регулярка состоящая из 4 форматов разделенных "|" - дающая массив из 6 значений, на выходе выбор 4 форматов который собирает эти 6 значений.

Код то в одну строчку:

<input id="inMac">
<select id="typeMac">
<option value=0>XX-XX-XX-XX-XX-XX</option>
<option value=1>xxxx.xxxx.xxxx</option>
<option value=2>xx:xx:xx:xx:xx:xx</option>
<option value=3>xxxxxxxxxxxx</option>
</select><button onclick='a=[0,0,0,0,0,0].fill("([1-9abcdef]{2})");document.querySelector("#inMac").value=[x=>x.map(x=>x.toUpperCase()).join("-"),x=>x[0]+x[1]+"."+x[2]+x[3]+"."+x[4]+x[5],x=>x.join(":"),x=>x.join("")][document.querySelector("#typeMac").value](document.querySelector("#inMac").value.toLowerCase().split(RegExp([a.join("[\-\:]"),[0,0,0].fill(a[0]+a[0]).join("."),a.join()].join("|"))).filter(x=>x&&x.length==2))'>JUST DO IT</button>

Код сделан максимально непонятно, просто чтобы показать что это возможно,а еще он не учитиывет 0.

Потому, что элеметны формы - это определенная группа, которая должна физически находится внутри тега form. Поставьте 3-тий label аналогично двум предыдущим, а для выноса отображения результат визуально сделайте следующее в css:

.label.l-3 {
display: inline-block;
position: absolute;
top: 75px;
right: 0px;
left: 0px:
}

Для точечного позиционирования подберите свои значения top, right или top, left конкретно в вашем случае. Таким образом вы извлечете этот элемент из нормального потока и расположите его где вашей душе вздумается!)

Юзай обработчик для onchange, а не onclick, камрад.