Выбор HTML и ввод текста - PullRequest
Новая
       27

Выбор HTML и ввод текста

2 голосов
/ 23 марта 2010

Мы все видели бесчисленные экземпляры форм с выпадающим списком выбора, у которого один из параметров был «Другой», и при выборе этого параметра мы видим текстовое поле ввода (которое было скрыто все время) с просьбой напечататьв нашем входе.

Есть ли лучший способ реализовать это?Существуют ли плагины, которые позволят мне сделать это лучше?Или достаточно стандартных HTML-элементов (возможно, некоторые настройки для тега select)?

Ответы [ 3 ]

7 голосов
/ 27 января 2013

Вы можете использовать datalist .Пример: 

<input list="cookies" placeholder="Type of Cookie"/>

<datalist id="cookies">
    <option value="Chocolate Chip"/>
    <option value="Peanut Butter"/>
    <option value="Raisin Oatmeal"/>
</datalist>

Fiddle: http://jsfiddle.net/joshpauljohnson/Uv5Wk/

Это дает пользователю возможность выбрать из списка файлов cookie и, если тип файла cookie, который они ищут, не найден в списке, введите свои собственные.

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

1 голос
/ 23 марта 2010

Это довольно распространенный способ создания формы как на бумаге, так и в Интернете. Я не совсем уверен, что именно вы имеете в виду под лучшим способом сделать это ...

Если вас беспокоит, что скрытое поле не появляется, если у пользователя отключен JavaScript, я советую вам скрыть поле с помощью JavaScript или создать дубликат текстовой области «Если другой, пожалуйста, укажите» в блоке noscript 

<select><!-- implemented something like rahul showed  -->
<noscript>
   <label for="ifOtherInput">If other please specify</label>
   <input type="text" name="ifOtherInput" id="ifOtherInput">
</noscript>
<!-- This is initially hidden and shown by when the user selects the other option -->
<div id="divOther" class="dispnone">
    <!-- Here we know the user selected other so we can just have this label: -->
    <label for="ifOtherInputJs">Please specify</label> 
   <input type="text" name="ifOtherInputJs" id="ifOtherInputJs">
</div>

Бэкэнд должен обрабатывать то, что входные данные в блоке noscript могут отсутствовать. Или вы можете добавить версию ввода javascript на страницу ввода, используя javascript (так что оба не могут появиться одновременно, так что они могут иметь одинаковое имя.

1 голос
/ 23 марта 2010

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

...