Атрибут form тега <select> — прив'язка списку до форми

HTML

<form id="zamovlennja" name="dostavka" action="#">
  <p class="head">Форма №1 &mdash; id="zamovlennja", name="dostavka"</p>
  <p><input type="text" name="misto" value="Львів" size="12"> місто (поле всередині форми)</p>
  <p class="stan">
    <span class="ok">Форма заповнена: усі привʼязані поля мають значення</span>
    <span class="ne">Форма НЕ заповнена: щось із привʼязаних полів порожнє</span>
  </p>
</form>

<form id="druha" name="druha" action="#">
  <p class="head">Форма №2 &mdash; id="druha"</p>
  <p class="stan">
    <span class="ok">Форма заповнена</span>
    <span class="ne">Форма НЕ заповнена</span>
  </p>
</form>

<p class="head">Чотири списки, які лежать ПОЗА обома формами</p>

<div class="poza">
  <p>
    <select name="rozmir" form="zamovlennja" required>
      <option value="">— оберіть розмір —</option>
      <option>S</option><option>M</option><option>L</option>
    </select>
    <span class="pidpys good">form="zamovlennja" — це id. Оберіть значення: форма №1 позеленіє</span>
  </p>
  <p>
    <select name="kolir" form="dostavka" required>
      <option value="">— оберіть колір —</option>
      <option>синій</option><option>жовтий</option>
    </select>
    <span class="pidpys bad">form="dostavka" — це name форми, а не id: звʼязку немає</span>
  </p>
  <p>
    <select name="kilkist" form="nemaje-takoji" required>
      <option value="">— оберіть кількість —</option>
      <option>1</option><option>2</option>
    </select>
    <span class="pidpys bad">form="nemaje-takoji" — такого id немає: звʼязку немає</span>
  </p>
  <p>
    <select name="doplata" form="druha" required>
      <option value="">— оберіть спосіб —</option>
      <option>картка</option><option>готівка</option>
    </select>
    <span class="pidpys good">form="druha" — привʼязано до форми №2</span>
  </p>
</div>

<p class="note">Списки стоять поруч, у розмітці вони не всередині жодної форми. Але
   стан форми залежить лише від тих, що назвали її id: доки не обрано розмір, форма №1
   вважається незаповненою, а колір і кількість не впливають на неї ніяк.</p>

CSS

.head {
    margin: 0 0 8px;
    color: #5a6472;
    font: 600 14px/1.4 system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: .04em;
}

form {
    max-width: 560px;
    margin-bottom: 12px;
    padding: 10px 12px;
    border-radius: 6px;
}

form:invalid {
    border: 2px solid #d64545;
    background: #fff4f4;
}

form:valid {
    border: 2px solid #3a9a4f;
    background: #f3fbf4;
}

form:valid .ne,
form:invalid .ok {
    display: none;
}

.stan {
    margin: 6px 0 0;
    font-weight: 600;
}

form:invalid .ne {
    color: #c0392b;
}

form:valid .ok {
    color: #1b5e20;
}

.poza {
    max-width: 560px;
    padding: 8px 12px;
    border: 2px dashed #b9c6d8;
    border-radius: 6px;
}

.poza p {
    margin: 8px 0;
}

select {
    padding: 3px 6px;
    font: inherit;
}

.pidpys {
    display: block;
    margin-top: 2px;
    font-size: .85em;
}

.good {
    color: #1b5e20;
}

.bad {
    color: #c0392b;
}

.note {
    max-width: 560px;
    margin-top: 14px;
    color: #5a6472;
    font-size: .9em;
}

HTML

<p>Приклад покоазує як працює атрибут disabled</p>
<hr>
<div>
 
<p>З використанням disabled</p>
  
<select multiple="multiple" name="type" disabled>
<option>Ким ви працювали</option>
<option value = "Програміст">Програміст</option>
<option value = "Системний аміністратор">Системний аміністратор</option>
<option value = "Маркетолог">Маркетолог</option>
<option value = "Дизайнер">Дизайнер </option>
</select>
</div>
<div>
 
<p>Без використанням disabled</p>
    
<select multiple="multiple" name="type">
<option >Ким ви працювали</option>
<option value = "Програміст">Програміст</option>
<option value = "Системний аміністратор">Системний аміністратор</option>
<option value = "Маркетолог">Маркетолог</option>
<option value = "дизайнер">Дизайнер </option>
</select>
</div>
</div>

CSS

div{
  padding:10px;
  float:left;
}

select:focus{
  border: 2px solid #ff0000;  
}