Атрибут disabled тега <textarea> — заблокувати поле вводу

HTML

<form>
    <p class="pole">
        <label for="a">Звичайне поле</label>
        <textarea id="a" name="a" rows="2">надсилається</textarea>
    </p>

    <p class="pole">
        <label for="b">disabled</label>
        <textarea id="b" name="b" rows="2" disabled>не надсилається</textarea>
    </p>

    <p class="pole">
        <label for="c">readonly</label>
        <textarea id="c" name="c" rows="2" readonly>надсилається, але не правиться</textarea>
    </p>

    <p class="pole">
        <label for="d">disabled="false"</label>
        <textarea id="d" name="d" rows="2" disabled="false">теж вимкнене</textarea>
    </p>

    <p class="pole">
        <label for="e">required + disabled</label>
        <textarea id="e" name="e" rows="2" required disabled></textarea>
    </p>

    <fieldset disabled>
        <legend>
            <label for="g">Поле в legend вимкненої групи</label>
            <textarea id="g" name="g" rows="2">лишається робочим</textarea>
        </legend>
        <p class="pole">
            <label for="h">Поле в тілі вимкненої групи</label>
            <textarea id="h" name="h" rows="2">вимкнене групою</textarea>
        </p>
    </fieldset>
</form>

CSS

form {
    max-width: 560px;
    padding: 4px 12px 12px;
    border: 1px solid #b9c6d8;
    border-radius: 6px;
    background: #f6f9ff;
}

.pole {
    margin: 12px 0 0;
}

label {
    display: block;
    margin-bottom: 4px;
    color: #5a6472;
    font: 600 13px/1.4 system-ui, sans-serif;
    text-transform: uppercase;
    letter-spacing: .03em;
}

textarea {
    display: block;
    width: 100%;
    padding: 6px 8px;
    border: 2px solid #b9c6d8;
    border-radius: 4px;
    font: inherit;
    resize: vertical;
}

fieldset {
    margin: 14px 0 0;
    padding: 0 10px 10px;
    border: 2px dashed #d64545;
    border-radius: 6px;
}

legend {
    padding: 0 6px;
    color: #c0392b;
    font-weight: 700;
}

/* стан читається з самої форми, без жодного скрипта */
textarea:enabled {
    border-color: #3a9a4f;
    background: #f3fbf4;
}

textarea:read-only {
    border-color: #e0a800;
    background: #fff6d8;
}

textarea:disabled {
    border-color: #d64545;
    background: #fff4f4;
}

.pole:has(textarea:enabled)::after {
    content: "робоче, у даних форми є";
    color: #1b5e20;
}

.pole:has(textarea:read-only)::after {
    content: "лише для читання: правити не можна, у даних форми Є";
    color: #8a6100;
}

.pole:has(textarea:disabled)::after {
    content: "вимкнене: у даних форми НЕМАЄ";
    color: #c0392b;
}

.pole::after,
legend::after {
    display: block;
    margin-top: 3px;
    font: 13px/1.5 system-ui, sans-serif;
}

legend:has(textarea:enabled)::after {
    content: "виняток: перший legend вимкненої групи не вимикається";
    color: #1b5e20;
}

HTML

<form>
   <p><b> Виберіть кого зареєструвати компанію чи користувача?</b></p>
  Користувач <input type = "radio" id="myButton" name = "sex"value =  "female" ><br>
  <p>Ваше повідомлення:</p>
  <textarea rows="6" cols="20" id="myTextBox"  disabled></textarea><br><br>
  <input type="submit" value="Надіслати" id="a2"  disabled><br><br>
   
  
  Компанія <input  type = "radio"  id="Button" name = "sex"value =  "male" ><br>
  <p>Ваше повідомлення:</p>
  <textarea rows="6" cols="20" id="myText"  disabled></textarea><br><br>
  <br>
  <input type="submit" value="Надіслати" id="a1"  disabled>
</form>

JS

document.getElementById('myButton').onclick = function () {
  document.getElementById('myTextBox').disabled = false;
  document.getElementById('myText').disabled = true;
  document.getElementById('a2').disabled = false;
  document.getElementById('a1').disabled = true;
};

document.getElementById('Button').onclick = function () {
  document.getElementById('myTextBox').disabled = true;
  document.getElementById('myText').disabled = false;
  document.getElementById('a1').disabled = false;
  document.getElementById('a2').disabled = true;
};
//# sourceURL=pen.js

<form>
   <p>Приклад використання атрибута disabled</p>
   <p><textarea rows="6" cols="20">Поле без використання атрибута disabled </textarea>
    <textarea rows="6" cols="20" disabled>Поле з використанням атрибута disabled</textarea></p>
  </form>