Мне интересно, какой элемент html использовать для кнопок на веб-странице - мне бы хотелось стилизовать свои "кнопки", как твиттер. Например:
кнопка "больше" внизу списка твитов - это элемент <button> или элемент <div>? Я хотел бы знать, что использовать. Я думаю, что для <button> или <div> мы можем предоставить состояния опрокидывания и все это, чтобы он выглядел приятным?
Не используйте теги <div> для создания интерактивных элементов. Используйте элементы <a> или <button>. Это позволяет браузерам с отключенным JavaScript взаимодействовать с ними, как и ожидалось. Даже если для вашей функциональности требуется JavaScript и нет разумного поведения по умолчанию, вы можете назначить <a>, использовать его независимо - он передает семантику "clickable".
В общем, выберите тег, который наиболее точно описывает функцию его содержимого, а не внешний вид его содержимого, и избегайте ненужных тегов <div>, чтобы ваши документы не пострадали от divitis.
Кнопка "больше" в Twitter - это <a> с фоном-изображением, закругленными углами CSS3 и рамкой. Здесь полный CSS (elem is <a class="more round">):
.more {
outline: none;
display: block;
width: 100%;
padding: 6px 0;
text-align: center;
border: 1px solid #ddd;
border-bottom: 1px solid #aaa;
border-right: 1px solid #aaa;
background-color: #fff;
background-repeat: repeat-x;
background-position: left top;
font-size: 14px;
text-shadow: 1px 1px 1px #fff;
font-weight: bold;
height: 22px;
line-height: 1.5em;
margin-bottom: 6px;
background-image: url('/images/more.gif');
}
.more:hover {
border: 1px solid #bbb;
text-decoration: none;
background-position: left -78px;
}
.more:active {
color: #666;
background-position: left -38px;
}
.round {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
}<a href="#" class="more round">Sample Button</a>Если вы хотите использовать <div> вместо <button> для редактора WYSIWYG или что-то еще, не забудьте добавить стили ниже, потому что тег <button> не удаляет выделение, но div делает.
Или это удивит вас неожиданным поведением:)
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
Используйте тег a вместо button. Мое рассуждение связано с проблемами совместимости со старой версией IE (IE6 ненавидит тег button).
<button> vs. < input type = "button" / > . Что использовать?
В общем, вы хотите использовать <a> для навигации и <button> для некоторых действий, которые происходят на этом экране.
Лучшей причиной, по которой я могу думать, что тег <button> или <a> равен <anything-else>, заключается в том, что во время тестирования упрощается поиск подходящих элементов. Например, я использую Capybara и Rspec, а метод click_on работает намного надежнее, когда он ссылается на <button>, то же самое с метод click_link и <a>.
Другие причины, приведенные здесь, также хороши: семантика, экранные программы и т.д.
Прагматично, ваша аудитория решит, действительно ли каждый элемент вашей страницы действительно причудливый <div>, или если вы хотите хорошо играть с остальной частью веб-экосистемы. Это может просто зависеть от того, использует ли ваша аудитория X-браузер или нет.
Один из них: поскольку <button> может отправить форму или <a> перевести вас на другую страницу, вы должны быть уверены, что не допустите эти действия по умолчанию. В функции JavaScript, которая обрабатывает щелчок, вы должны указать, что он выполняет только действие, которое вы программируете.
function onClickEvent(e)
{
e.preventDefault();
// What you want to do instead
}
Я предлагаю <input id="Button1" type="button" value="button" /> с помощью стиля css, чтобы придать внешний вид, который вы ищете.