POST form HTML with Bootstrap Dropdown - html

Question

In the following code, I want to submit a form with a Bootstrap dropdown and submit the selected value as "username". I'm not sure where in the following code I should add 'name="username"'. When I add it in certain places, it does not get set properly.
<form action="/login" method="POST">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
<input type="submit" value="Login">
</div>
</form>
Below is an example of code that does exactly what I want it to. But for design purposes, I'd like the form to be in Bootstrap.
<form action="/login" method="POST">
<select class="form-control" name="username">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<input type="submit" value="Login">
</form>

Answer 1

Replace the links in the list (the ones that currently link to the top of the page) with radio buttons and labels.

Answer 2

We can add radio buttons for every list item, each giving them a unique value and name="username". Wrap the text of every list item into a label with a for tag that points to the id of the corresponding radio button.
After that, the only thing that is left to do is wrapping the dropdown label into a span with id='userlabel', and use this script to change the label of the dropdown menu to the selected list item. This will give the user an idea of which item is currently selected:
$("input[name='username']").change(function(e){
$("#usernamelabel").text($(this).val());
});
We can hide the radio buttons with
input[name='username']{
display: none;
}
The resulting html will look like this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<form action="/login" method="POST">
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span id="usernamelabel">Select username</span>
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><input type="radio" id="username1" name="username" value="username1"><label for="username1">Username1</label></li>
<li><input type="radio" id="username2" name="username" value="username2"><label for="username2">Username2</label></li>
<li><input type="radio" id="username3" name="username" value="username3"><label for="username3">Username3</label></li>
</ul>
<input type="submit" value="Login">
</div>
</form>
<style>
input[name='username']{
display: none;
}
</style>
<script>
$("input[name='username']").change(function(e){
$("#usernamelabel").text($(this).val());
});
</script>