how to have a custom select option

user_13192014 0
Viewed 429

I want to have a custom select option but I can't find anything on the internet I want to have a select option the client can choose this option

  1. number
  2. number
  3. number
  4. Html input

and submit button

how I can have something like this? enter image description here

css html javascript
4 Answers

You can just use radio buttons, give them a group so only one can be choosen and style them nicely.

I think you don't want to send your number input so you can assign it to a different form just like I did by giving our form form="this-form" and applied form="different-form" to number input, the form you assign it to doesn't have to exist.

For your last radio to send information written in number input I used some Javascript so everytime input changes the change is assigned to value of the last radio button.

let number = document.getElementById("number");
let radio = document.getElementById("radio-5");

number.addEventListener("input", () => {
    radio.value = number.value;
})

let form = document.querySelector("form");

form.addEventListener("submit", (event) => {
    let input = document.querySelector("input[name=group]:checked");
    event.preventDefault();
    console.log(input.value)
})
.container {
    border: 1px solid black;
    width: 200px;
    padding: 1em;
    border-radius: 20px;
    flex-direction: column;
}

.flex-container {
    display: flex;
    justify-content: space-between;
}

input[type=submit] {
    display: block;
    margin: 1em auto 0;
}

input[type=number] {

    margin: auto;
    max-width: 80px;

}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <script defer src="script.js"></script>
</head>
<body>
    <div class="container">
        <form form="this-form">
            <div class="flex-container">
                <label for="group">Number 1</label>
                <input type="radio" required value="Number 1" name="group">
            </div>
            <hr>
            <div class="flex-container">
                <label for="group">Number 2</label>
                <input type="radio" value="Number 2" name="group">
            </div>
            <hr>
            <div class="flex-container">
                <label for="group">Number 3</label>
                <input type="radio" value="Number 3" name="group">
            </div>
            <hr>
            <div class="flex-container">
                <label for="group">Number 4</label>
                <input type="radio" value="Number 4" name="group">
            </div>
            <hr>
            <div class="flex-container">
                <input id="number" form="different-form" type="number" >
                <label for="num">Num Here</label>
                <input  type="radio" id="radio-5" name="group" value="">
            </div>
            <input type="submit" id="submit" value="Submit">
        </form>
    </div>
</body>
</html>

I used preventeDefault here so the fiddle shows what is being sent each time, so you can ignore everything written in JS file after number.addEventListener.

user_139314710

you can using checkbox type input inside Html form

<!DOCTYPE html>
<html>
<body>

<h1>Show Checkboxes</h1>

<form action="/action_page.php">
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> I have a boat</label><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

user_188472280

You can also try like this :

const select = document.querySelector(".select");
const form = document.querySelector(".form");

select.addEventListener("click",()=>{
    if(form.classList.contains("hide")){
      form.classList.remove("hide");
    }else form.classList.add("hide");

})
.hide{
   display:none;
 }
 p{
   background:rgba(0,0,0,0.1);
   width:max-content;
   padding:10px 30px 10px 10px;
   cursor:pointer;
 }
<!DOCTYPE html>
<html>
<body>

<p class="select"  >Select Checkboxes</p>

<form action="/action_page.php" class="form hide">
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> I have a boat</label><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

user_151162070

I think you can try in this way

<form action="">
                <label for="gender"> Select Position</label>
                <select name="gender">
                    <option value="none" selected>Position</option>
                    <option value="first">First</option>
                    <option value="second">Second</option>
                    <option value="third">Third</option>
                    <option value="fourth">Fourth</option>
                    <option value="fifth">Fifth</option>
                </select>
            </form>

user_190247680
Related