Раскрывающийся список HTML

HTML Программирование и разработка

По мере того, как мы расширяем наши знания HTML, одна из многих вещей, которые мы должны начать учитывать, — это то, как то, что мы создаём, повлияет на восприятие людей, которые используют нашу страницу. Одна из вещей, на которую нам нужно обратить внимание, это то, как организация веб-страницы изменит восприятие. Слишком загромождённая страница определённо повлияет на то, решат ли клиенты остаться на странице и выполнить то, что они намеревались сделать, находясь на сайте.

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

В этой статье мы узнаём, как использовать HTML, чтобы создать <select>раскрывающийся список, который будет использоваться как элемент формы. Если вы хотите увидеть, как может быть создано раскрывающееся меню панели навигации, ознакомьтесь с раскрывающимися списками CSS.

HTML

Базовая структура

Базовая структура раскрывающегося меню HTML — это <select> элемент, который называет и идентифицирует группировку, а также несколько <option>тегов, составляющих содержимое раскрывающегося меню.

Для начала создадим каркас этого раскрывающегося списка. Выпишите <select>элемент с идентификатором и названием «бейсбольные команды». Идентификатор нам поможет, если мы захотим изменить стиль. Атрибут name помогает нам, когда мы хотим использовать данные формы после того, как команда выбрана, и мы хотим отправить информацию на сервер.

Запустив код на этом этапе, вы увидите очень простой раскрывающийся список. Первый вариант указывает значение раскрывающегося списка. В этом случае они хотят, чтобы мы выбрали бейсбольную команду. Щёлкните раскрывающийся список, и вы увидите значения для всех команд в высшей лиге.

Когда вы выбираете значение, оно присваивает его выбранному индексу <select>. Это поможет любой логике, которая у вас есть, когда вы решаете, что делать с данными. Знание имени и значения выбранного индекса очень важно, если вы хотите что-то сделать с этими данными.

Вы узнаёте больше о том, что делать с данными формы, когда будете изучать серверную часть — не беспокойтесь о том, что происходит с JavaScript в нижней части документа. Только беспокоиться о том, что нужно сделать, чтобы получить выпадающее меню на странице — в <select>и на <option>элементы.

<!DOCTYPE html>
<html>
<body>

<h1>The select element</h1>

<p>The select element is used to create a drop-down list.</p>

<form onsubmit=handleSubmit(event)>
<label for=»baseball-teams»>Choose a baseball team:</label>
<select id=»baseball-teams» name=»baseball-teams»>
<option selected value=»»>Select Team</option>
<option value=»Arizona Diamondbacks»>Arizona Diamondbacks</option>
<option value=»Atlanta Braves»>Atlanta Braves</option>
<option value=»Baltimore Orioles»>Baltimore Orioles</option>
<option value=»Boston Red Sox»>Boston Red Sox</option>
<option value=»Chicago Cubs»>Chicago Cubs</option>
<option value=»Chicago White Sox»>Chicago White Sox</option>
<option value=»Cincinnati Reds»>Cincinnati Reds</option>
<option value=»Cleveland Indians»>Cleveland Indians</option>
<option value=»Colorado Rockies»>Colorado Rockies</option>
<option value=»Detroit Tigers»>Detroit Tigers</option>
<option value=»Houston Astros»>Houston Astros</option>
<option value=»Kansas City Royals»>Kansas City Royals</option>
<option value=»LA Angels»>Los Angeles Angels of Anaheim</option>
<option value=»LA Dodgers»>Los Angeles Dodgers</option>
<option value=»Miami Marlins»>Miami Marlins</option>
<option value=»Milwaukee Brewers»>Milwaukee Brewers</option>
<option value=»Minnesota Twins»>Minnesota Twins</option>
<option value=»NY Mets»>New York Mets</option>
<option value=»NY Yankees»>New York Yankees</option>
<option value=»Oakland Athletics»>Oakland Athletics</option>
<option value=»Philadelphia Phillies»>Philadelphia Phillies</option>
<option value=»Pittsburgh Pirates»>Pittsburgh Pirates</option>
<option value=»San Diego Padres»>San Diego Padres</option>
<option value=»San Francisco Giants»>San Francisco Giants</option>
<option value=»Seattle Mariners»>Seattle Mariners</option>
<option value=»STL»>St. Louis Cardinals</option>
<option value=»Tampa»>Tampa Bay Rays</option>
<option value=»TX»>Texas Rangers</option>
<option value=»Toronto» value=»LA Angels»>Toronto Blue Jays</option>
<option value=»Washington»>Washington Nationals</option>
</select>
<br><br>
<input type=»submit» value=»Submit»>
</form>

<p>Click the «Submit» button and the form’s data will be shown below.</p>
<h3></h3>
<script async defer>

const handleSubmit = (event) => {
event.preventDefault()
let select = document.getElementById(‘baseball-teams’);
let option = select.options[select.selectedIndex];
let result = document.querySelector(‘h3’);
result.textContent = option.text;
}
</script>
</body>
</html>

Заключение

В этой статье мы узнали, как создать раскрывающееся меню для форм. Используйте <select>и <option>элементы, чтобы дать своим пользователям возможность сделать выбор из нескольких вариантов. Как только вы освоите основы, посмотрите, что <optgroup>делает!

ЧИТАЙТЕ ТАКЖЕ:

Оцените статью
bestprogrammer.ru
Добавить комментарий