javascript - 選択メニューで選択した値がサーバーに送信されない

Question

(バックエンド開発者はここでフロントエンド開発を行おうとしています)

いくつかのテキスト フィールド入力と選択メニューを備えた単純な HTML フォームがあります。フォームが送信されると、テキスト フィールドの値が Web サーバーにヒットしているのがわかりますが、選択メニューの値がサーバーにヒットしていません。選択メニューのコードは次のとおりです。

<div class="mdc-select mdc-select--outlined mdc-select--with-leading-icon role-list">
  <i class="material-icons mdc-select__icon" tabindex="0" role="button">work_outline</i>
  <div class="mdc-select__anchor role-width-class">
    <i class="mdc-select__dropdown-icon"></i>
    <div id="role" class="mdc-select__selected-text" aria-labelledby="roles-select-label"></div>
    <div class="mdc-notched-outline">
      <div class="mdc-notched-outline__leading"></div>
      <div class="mdc-notched-outline__notch">
        <label id="roles-select-label" class="mdc-floating-label">Role</label>
      </div>
      <div class="mdc-notched-outline__trailing"></div>
    </div>
  </div>

  <div class="mdc-select__menu mdc-menu mdc-menu-surface role">
    <ul class="mdc-list">
      <li class="mdc-list-item" data-value="0">
        Painter
      </li>
      <li class="mdc-list-item" data-value="1">
        Electrician
      </li>
      <li class="mdc-list-item" data-value="2">
        Decorator
      </li>
    </ul>
  </div>
</div>

選択メニューは、こちらで説明されているマテリアル デザイン コンポーネントです。

このコンポーネントに関連付けた Javascript は次のとおりです。

mdc.select.MDCSelect.attachTo(document.querySelector('.role-list'));

const role = new mdc.select.MDCSelect(document.querySelector('.role-list'));

role.listen('change', () => {
    alert(`Selected option at index ${role.selectedIndex} with value "${role.value}"`);
});

私がすぐに持っているいくつかの質問：

1. <li>代わりに使用する必要があり<option>ます-上記のコードは、Web サイトに示されている例に従います。
2. name属性が必要ですか？