Атрибут align тега <legend> — де стоїть підпис групи полів

HTML

<fieldset>
  <legend>Без align — заголовок і так ліворуч</legend>
  <label><input type="checkbox"> перше</label>
</fieldset>

<fieldset>
  <legend align="center">align="center"</legend>
  <label><input type="checkbox"> друге</label>
</fieldset>

<fieldset>
  <legend align="right">align="right"</legend>
  <label><input type="checkbox"> третє</label>
</fieldset>

<fieldset>
  <legend align="RIGHT">align="RIGHT" — регістр не важить</legend>
  <label><input type="checkbox"> четверте</label>
</fieldset>

<fieldset class="bad">
  <legend align=" right ">align=" right " — пробіли все вимикають</legend>
  <label><input type="checkbox"> п'яте</label>
</fieldset>

<fieldset class="bad">
  <legend align="top">align="top" — чуже слово, ігнорується мовчки</legend>
  <label><input type="checkbox"> шосте</label>
</fieldset>

<fieldset class="bad">
  <legend class="cherez-text-align">text-align: right — заголовок НЕ рухається</legend>
  <label><input type="checkbox"> сьоме</label>
</fieldset>

<fieldset class="good">
  <legend class="cherez-margin">margin-inline-start: auto — оце рухає</legend>
  <label><input type="checkbox"> восьме</label>
</fieldset>

<fieldset class="good">
  <legend class="poseredyni">margin-inline: auto — посередині</legend>
  <label><input type="checkbox"> дев'яте</label>
</fieldset>

CSS

fieldset {
    max-width: 420px;
    margin: 0 0 14px;
    padding: 10px 12px;
    border: 1px solid #b9c6d8;
    border-radius: 6px;
}

legend {
    padding: 0 6px;
    background: #eef3fb;
    font-size: .9em;
}

label {
    font-size: .9em;
}

.bad {
    border: 2px dashed #d64545;
}

.bad legend {
    background: #fff4f4;
    color: #c0392b;
}

.good {
    border: 2px solid #3a9a4f;
}

.good legend {
    background: #f3fbf4;
    color: #1b5e20;
}

/* Не рухає легенду: вирівнює лише текст усередині неї. */
.cherez-text-align {
    width: 320px;
    text-align: right;
}

/* А оце рухає саму легенду вздовж рамки. */
.cherez-margin {
    margin-inline-start: auto;
    margin-inline-end: 0;
}

.poseredyni {
    margin-inline: auto;
}

HTML

<p>Вибери потрібне значення для <code>align</code>:

<select id="form">
   <option value="left" name="value">left</option>
  <option value="center" name="value">center</option>
   <option value="right" name="value">right</option>
</select>
  </p>
<nav id='text'>Текст розташовано за замовчуванням</nav>
<hr><br><br>
<form>
    <fieldset>
      <legend id="table">Форма для заповнення даних</legend>
  <label>Ім'я:</label><br>
  <input type="text" name="login"><br>
  <label>Email:</label><br>
  <input type="email" name="email"><br>
  <label>Ваше повідомлення:</label><br>
  <textarea name="messenger"></textarea>
  <br>
  <input type="submit" value="Увійти">
        </fieldset>
</form>

JS

var wrapper = document.getElementById('table');
var form = document.getElementById('form');
var text = document.getElementById('text');

var textArray = { 'left': 'Вирівнювання по лівій частині.',
  'center': 'Вирівнювання по центру.',
  'right': 'Вирівнювання по правій частині.' };

form.onchange = function () {
  for (var i = 0; i < form.options.length; i++) {if (window.CP.shouldStopExecution(0)) break;
    if (form.options[i].selected == true) {
      wrapper.align = form.options[i].value;
      text.innerHTML = textArray[form.options[i].value];
    }
  }window.CP.exitedLoop(0);
};
//# sourceURL=pen.js

<p>З використанням тегу 'legend'</p>
<form>
    <fieldset>
      <legend align="right">Форма для заповнення даних</legend>
  <label>Ім'я:</label><br>
  <input type="text" name="login"><br>
  <label>Email:</label><br>
  <input type="email" name="email"><br>
  <label>Ваше повідомлення:</label><br>
  <textarea name="messenger"></textarea>
  <br>
  <input type="submit" value="Увійти">
        </fieldset>
</form>
<br>
<form>
    <fieldset>
      <legend align="center">Форма для заповнення даних</legend>
  <label>Ім'я:</label><br>
  <input type="text" name="login"><br>
  <label>Email:</label><br>
  <input type="email" name="email"><br>
  <label>Ваше повідомлення:</label><br>
  <textarea name="messenger"></textarea>
  <br>
  <input type="submit" value="Увійти">
        </fieldset>
</form>