2013-05-08 4 views
1

Является ли законным иметь 1 текстовое поле и 2 элемента метки, которые «связывают» с этим 1 текстовым полем?Хорошо или плохо для HTML-формы?

Давайте просто скажем, что текстовое поле является полем поиска. И 2 элемента Label представляют собой два разных типа вещей, которые вы можете искать. И нажатие на Label 1, например, сфокусировало бы текстовое поле и изменило бы скрытый атрибут базовой формы. Например:

<form method="" action=""> 
    <label for="search" id="books">Search Books</label> 
    <label for="search" id="games">Search Games</label> 
    <input type="search" name="search" id="search" placeholder="What are you looking for?" /> 
</form> 

<script type="javascript"> 
    // IF LABEL 1 (BOOKS) IS CLICKED, THEN SET HIDDEN FORM ELEMENT TO "BOOKS" 
    // IF LABEL 2 (GAMES) IS CLICKED, THEN SET HIDDEN FORM ELEMENT TO "GAMES". 
</script> 

Какие последствия для SEO? Я могу думать о нескольких, но я не уверен, что они действительные проблемы.

+2

Нет, вы будете арестованы за злоупотребление HTML с помощью HTML полиции. jk это нормально. – zzzzBov

+2

Я не верю, что есть какие-то негативные последствия для SEO. Насколько я знаю, сканеры не запускают проверки количества меток против входов. – chuckieDub

+0

Lol. Я не пойду в тюрьму, не так ли? ;-( –

ответ

6

В этом нет ничего плохого, но это плохой дизайн.

Я бы посоветовал использовать набор радио-кнопок или <select>, чтобы пользователь мог выбрать то, что они ищут.

+0

Я бы воспользовался кнопкой «Радио», но мне не нравится весь круг, он действительно винты с остальной частью интерфейса (не выглядит так хорошо) На самом деле, я думаю, что я проверю источник HTML Google, так как у них есть тот же _effect_ на их странице. Спасибо за ваш ответ. –

+0

Похоже, что они используют упорядоченный список (ol). Почему, Я думаю об этом! Я использую списки для всего: -/(преувеличение) –

+0

Спасибо @Kolink, я решил пойти с неупорядоченным списком. –

1

Если вы хотите проверить, если это «легальный» HTML/CSS задать W3C валидатор: http://validator.w3.org/check

+0

Отличная идея. Спасибо за напоминание. –

Смежные вопросы