Как иметь пользовательский вариант выбора

Я хочу иметь пользовательский вариант выбора, но я ничего не могу найти в Интернете. Я хочу иметь опцию выбора, которую клиент может выбрать.

количество
количество
количество
HTML-ввод

и кнопка отправки

как я могу иметь что-то подобное? Как иметь пользовательский вариант выбора

Не могли бы вы предоставить более подробную информацию об аспектах ui/ux необходимого контроля?

— 08.05.2022 07:08

Вы можете попробовать использовать переключатели, также есть возможность поиграть с <выбрать несколько> и попытаться стилизовать их по своему усмотрению.

— 08.05.2022 07:10

последний - это вход, который принимает только числа

— 08.05.2022 07:39

javascript html css

08.05.2022 07:04

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

вы можете использовать ввод типа флажка внутри формы Html

<!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>

08.05.2022 07:08

Я думаю, вы можете попробовать таким образом

<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>

08.05.2022 07:32

Вы также можете попробовать так:

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>

Если это правильное решение. Примите решение, это поможет другим быстрее найти правильное решение.

— 08.05.2022 08:02

08.05.2022 07:36

Ответ принят как подходящий

Вы можете просто использовать переключатели, дать им группу, чтобы можно было выбрать только одну, и красиво их стилизовать.

Я думаю, вы не хотите отправлять свой ввод числа, чтобы вы могли назначить его другой форме, как это сделал я, предоставив нашу форму form = "this-form" и применив form = "different-form" к вводу числа, форма, которой вы его назначаете, не должна существовать.

Чтобы ваше последнее радио отправляло информацию, записанную при вводе числа, я использовал некоторый Javascript, поэтому каждый раз, когда ввод изменяется, изменение присваивается значению последнего переключателя.

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.info(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>

Я использовал здесь preventeDefault, поэтому скрипт каждый раз показывает, что отправляется, поэтому вы можете игнорировать все, что написано в файле JS после number.addEventListener.

08.05.2022 08:19

Другие вопросы по теме

Как повернуть элемент внутри div, и div изменит свою высоту и ширину в зависимости от повернутого элемента?

Как выровнять элементы в <div> с помощью CSS в приложении React?

Почему <input type="text" и flex не работают вместе?

Почему цвет фона для переключателя после проверки не изменится?

Как я могу заставить атрибут ID работать внутри диапазона в Visual Studio

Как я могу заставить эти div расти, чтобы заполнить размер своего контейнера?

Как проверить, действителен ли введенный код капчи в php?

Соотношение сторон SVG сохраняется, когда ширина больше высоты, несмотря на предупредительную настройку

Адаптивный html и css код на любых устройствах

Сохраняйте отступ абзаца даже после окончания изображения

Как иметь пользовательский вариант выбора

Ответы 4

Другие вопросы по теме

Похожие вопросы