Input s rozevíracím seznamem -jeden z nejběžnějších prvků webových formulářů. Umožňuje uživatelům vybrat jednu nebo více hodnot z předdefinovaného seznamu. Když uživatel klikne na vstupní pole, otevře se rozevírací seznam s dostupnými možnostmi.
V tomto článku se podíváme na to, jak vytvořit input s rozevíracím seznamem pomocí HTML a CSS a jak přidat funkce pomocí JavaScriptu.
Vytvoření input s rozevíracím seznamem je docela snadný úkol. Nejprve musíte vytvořit prvek input s atributem type= "text". Poté je třeba přidat položku select, která bude obsahovat možnosti nebo možnosti výběru. Každá možnost je nastavena pomocí značky option a má svou hodnotu, která bude použita při odesílání formuláře. Například:
Po vytvoření formuláře můžete začít s úlohou stylů pro input a seznamem možností pomocí CSS. Můžete například změnit šířku a výšku vstupního pole a nastavit barvu a obrázek na pozadí. Tlačítko pro zveřejnění seznamu lze také stylizovat podle vašeho vkusu. K tomu se obvykle používá pseudoelement ::after nebo:: before a vlastnosti obsahu a background-image.
Nakonec lze k přidání funkčnosti použít JavaScript. Je například možné, aby se při výběru možnosti ze seznamu vyplnilo textové pole této možnosti. Chcete-li to provést, musíte přiřadit obslužnou rutinu události ke změně v seznamu. V této obslužné rutině obdržíme hodnotu vybrané možnosti a nastavíme ji na hodnotu textového pole. Příklad kódu:
const select = document.querySelector('select'); const input = document.querySelector('input[type="text"]'); select.addEventListener('change', (event) => < input.value = event.target.value; >);
Nyní, když uživatel vybere možnost ze seznamu, její hodnota se automaticky zobrazí v textovém poli. Vytvořili jsme tedy plně funkční input s rozevíracím seznamem, který lze použít ve svých webových aplikacích.
Vytvořte vstupní pole
K vytvoření vstupního pole s rozevíracím seznamem budeme potřebovat značku . Tato značka nám umožňuje vytvořit textové pole pro vlastní vstup.
K přidání rozevíracího seznamu budeme muset použít atribut list. V tomto atributu uvedeme id položky, která je zdrojem dat pro seznam.
K vytvoření seznamu dat budeme potřebovat značku . V rámci této značky používáme značky k přidání každé položky seznamu.
Výsledkem je textové pole, do kterého může uživatel zadávat data, a když kliknete na šipku uvnitř pole, zobrazí se rozevírací seznam s možnostmi výběru.
Nastavte atribut "list"
Chcete-li vytvořit rozevírací seznam v položce, musíte použít atribut "list". Atribut "list" umožňuje zadat ID položky