Hoe maak je een drop - down box maken

Bijvoorbeeld drop -down menu Expanded

drop-down boxen op websites kan de gebruiker kiezen uit een lijst met opties.De boxen kunnen worden gebruikt door de gebruiker verstrekte formulieren of snellere site navigatie.De voordelen van de drop-down box zijn de economische scherm gebruik en eenvoudige interface.De boxen ook helpen om te voorkomen dat gebruikers het invoeren van ongeldige gegevens.Leer hoe u een eenvoudige drop-down box in HTML te creëren.

wat je

  • Text Editor nodig, zoals Kladblok of WordPad

instructies

  1. Maak een HTML-document met behulp van een eenvoudige tekstverwerker, zoals Kladblok, of een HTML-editing software.Doe dit door het plaatsen van de & amp; lt; html & amp; gt;en & amp; lt; body & amp; gt;tag op de bovenkant van uw document.Deze tags bepalen wat er in hen als HTML.Zorg ervoor dat u deze tags sluiten door het invoegen van & amp; lt; / html & amp; gt;en & amp; lt; / body & amp; gt;aan het einde van het document.Opslaan met een .html extensie.

  2. Voeg de & amp; lt; selecteren & amp; gt;tag om een ​​drop-down menu te maken;vergeet niet om te sluiten met het eind tag: & amp; lt; / select & amp; gt ;.U kunt ook geven dit menu een naam, die intern wordt gebruikt, met behulp van de "naam" attribuut binnen de opening select tag.Bijvoorbeeld, zou dit formulier aangeduid intern "cheese."
    & amp; lt; html & amp; gt;
    & amp; lt; body & amp; gt;
    & amp; lt; select name = "kaas" & amp; gt;
    & amp; lt; / selecteren & amp; gt;
    & amp; lt; / body & amp; gt;
    & amp; lt; / html & amp; gt;

  3. Voeg een optie in het menu met de & amp; lt; optie & amp; gt;tag in de "selecteer" labels.Zorg ervoor dat deze tag te sluiten met behulp van & amp; lt; / option & amp; gt ;.Voeg zoveel opties om het menu als u wenst.Alle opties wordt zichtbaar zodra de gebruiker het drop-down menu uitbreidt.Gebruik het kenmerk "waarde" met elkaar een interne naam en "geselecteerd" om deze standaard te worden geselecteerd te geven.Afwerking het voorbeeld:
    & amp; lt; html & amp; gt;
    & amp; lt; body & amp; gt;
    & amp; lt; select name = "kaas" & amp; gt;
    & amp; lt; optie geselecteerd value = "cheddar" & amp; gt; Cheddar & amp; lt; / option & amp; gt;
    & amp; lt; optie value = "swiss" & amp; gt; Swiss & amp; lt; / option & amp; gt;
    & amp; lt; optie value = "provolone" & amp; gt; Provolone & amp; lt; / option & amp; gt;
    & amp; lt; optie value = "gouda" & amp; gt; Gouda & amp; lt; / option & amp; gt;
    & amp; lt; / selecteren & amp; gt;
    & amp; lt; / body & amp; gt;
    & amp; lt; / html & amp; gt;

Tips & amp;Waarschuwingen

  • Gebruik voor site-navigatie of als onderdeel van een formulier.
  • Met Javascript kan de gebruiker kiezen uit de drop-down box en vervolgens voor zorgen dat het iets, zoals navigeren naar een gekozen pagina te doen.
873
0
1
Html