Атрибут value тега <option> — значення пункту списку

HTML

<p><b>З використанням атрибута "value"</b></p>
   <p>Хто написав драму-феєрію "Лісова пісня"?</p>
   <p id="text1"></p>
<form>
   <select name="questions">
    <option value="Варіант 1 - Шевченко">Тарас Шевченко</option>
    <option value="Варіант 2 - Українка">Леся Українка</option>
    <option value="Варіант 3 - Франко">Іван Франко</option>
    <option value="Варіант 4 - Квітка-Основ'яненко">Григорій Квітка-Основ'яненко</option>
   </select>
     <br><br>
  <input type="button" value="Надіслати" onClick="dataSelect(this.form)">
</form> 
<br>
    
    <p><b>Без використання атрибута "value"</b></p>
   <p>Хто написав драму-феєрію "Лісова пісня"?</p>
  <p id="text"></p>
<form>
   <select name="question">
    <option>Тарас Шевченко</option>
    <option>Леся Українка</option>
    <option>Іван Франко</option>
    <option>Григорій Квітка-Основ'яненко</option>
   </select>
   <br><br>
   <input type="button" value="Надіслати" onClick="Select(this.form)">
  </form>

JS

text1.innerHTML = "Ваша відповідь: ";
function dataSelect(f) {
  n = f.questions.selectedIndex;
  text1.innerHTML = "Ваша відповідь: " + f.questions.options[n].value;
}
text.innerHTML = "Ваша відповідь: ";
function Select(f) {
  n = f.question.selectedIndex;
  text.innerHTML = "Ваша відповідь: " + f.question.options[n].value;
}
//# sourceURL=pen.js

HTML

<form class="demo">
    <p><label for="city">Оберіть місто</label></p>

    <select id="city" name="city">
        <option value="">Оберіть місто</option>
        <option value="kyiv">Київ</option>
        <option id="nv">  Львів  </option>
        <option label="Одеса — лише label"></option>
        <option value=" Харків ">Харків</option>
    </select>

    <p class="verdict"></p>

    <ul class="legend">
        <li>1. <b>value=""</b> — заглушка: саме вона вмикає required.</li>
        <li>2. <b>value="kyiv"</b> — звичайний випадок: видно одне, їде інше.</li>
        <li>3. <b>без value</b> — поїде текст пункту, і саме нормалізований:
            пробіли по краях зникають.</li>
        <li>4. <b>лише label</b> — і текст, і значення порожні.</li>
        <li>5. <b>value=" Харків "</b> — пробіли в атрибуті НЕ обрізають.</li>
    </ul>
</form>

CSS

label {
    font-weight: 600;
}

select {
    padding: 6px;
    font: inherit;
    border: 2px solid #b9c6d8;
    border-radius: 4px;
}

.verdict {
    margin: 12px 0 0;
    padding: 8px 12px;
    border-left: 6px solid #c9ced6;
    background: #f6f9ff;
    font-weight: 600;
    min-height: 1.4em;
}

.verdict::before {
    content: "оберіть пункт — і тут з'явиться значення, яке піде на сервер";
    color: #5a6472;
    font-weight: 400;
}

.demo:has(option[value=""]:checked) .verdict::before {
    content: "порожній value — на сервер піде порожній рядок";
    color: #d64545;
    font-weight: 600;
}

.demo:has(option[value="kyiv"]:checked) .verdict::before {
    content: "value=kyiv — на сервер піде kyiv, а не «Київ»";
    color: #3a9a4f;
    font-weight: 600;
}

.demo:has(#nv:checked) .verdict::before {
    content: "value немає — поїде текст пункту, і саме «Львів», без пробілів по краях";
    color: #1b4f9c;
    font-weight: 600;
}

.demo:has(option[label]:checked) .verdict::before {
    content: "лише label — і текст, і значення порожні: поїде порожній рядок";
    color: #d64545;
    font-weight: 600;
}

.demo:has(option[value=" Харків "]:checked) .verdict::before {
    content: "value з пробілами — поїде « Харків » разом із пробілами";
    color: #1b4f9c;
    font-weight: 600;
}

.legend {
    max-width: 560px;
    margin: 14px 0 0;
    padding-left: 20px;
    color: #5a6472;
    font-size: .9em;
    line-height: 1.6;
}