Чистый и доступный Другой вариант (флажок и текстовое поле)

Question

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

Как вы обычно справляетесь с этой настройкой? Какую разметку вы используете? Что вам требуется при подтверждении? Вы используете сценарий Java для чего-либо? Например:

• Как сделать форму доступной? Используете ли вы и как вы используете тег метки, например.
• Связываете ли вы флажок и текстовое поле каким-либо образом с некоторым javascript? Например, вы активируете текстовое поле, когда флажок установлен? Вы ставите или снимаете флажок автоматически, если текстовое поле заполнено или очищено?
• Допускаете ли вы проверку с сообщениями об ошибках, если флажок установлен, но текстовое поле не заполнено, или если текстовое поле заполнено, но флажок не установлен? Или вы просто считаете, что он не заполнен и не проверен?

Очень неуверен, как лучше всего решить эту проблему, поэтому любые советы и примеры приветствуются c ",)

Answer 1

Я обычно заключаю свои радио-кнопки в ярлык, подобный этому:

<label><input type=radio value=xyz name=stjames>Saint James</label>

Таким образом, пользователь может нажать на текст, чтобы вызвать кнопку.

Решая, как себя вести, я обычно говорю себе: «Как вы думаете, что пользователь ожидал, когда он это сделал ...», и это часто дает мне ответ. Итак, при нажатии или Фокусе текстового поля включите радио, которое идет с ним. Это не будет работать, если вы отключили текстовое поле!

( ) US    ( ) UK       (*) Other [________________]

Если вариант «Другой» является опасным (удаление данных), я бы отключил текстовое поле, пока пользователь явно не нажмет «Другой». Затем Радио запускает текстовое поле, а не наоборот. Вы хотите, чтобы в этом случае пользователю пришлось пройти еще один шаг. Это зависит от ситуации - подумайте, что будет происходить в каждом конкретном случае.

Я обычно стараюсь сделать невозможным или раздражающим для пользователя что-то «неправильное». Например, отключите кнопку ОК, если что-то не так. Или выберите другое радио, когда пользователь вводит текст. Если в текстовом поле есть текст, а переключатели настроены на что-то другое, я обычно просто игнорирую текст. Но если это серьезная / опасная ситуация, вы хотите убедиться, что пользователь принял решение; если вы удаляете текст, когда пользователь выбирает другое радио, это может его разозлить, но может быть уместно, если он будет осторожен.

Answer 2

Обычно, когда у меня есть динамические формы, я вставляю ввод динамически. То есть, в случае с jQuery я буду использовать .append('<input...') или какую-либо другую подобную функцию для фактической вставки элементов и идентифицировать ее (или классифицировать ее, в зависимости), чтобы ее можно было легко * * пользователь решает, что он хочет использовать другую опцию. Проверка выполняется либо с помощью onClick на кнопке ввода. Если я почувствую себя наглым, я пойду по маршруту AJAX и вообще пропущу <form>.

Я бы определенно допустил ошибку проверки. Они хотят «Другой», и вы хотите знать, что такое «Другой». Если вам все равно, что такое Другое, не беспокойтесь о поле ввода.

Редактировать: Может выглядеть примерно так.

$('input[type="radio"]').click( function() {

    if($(this).next().attr('name') != 'other' && $(this).attr('name') == 'other_input') {
        $(this).after('<textarea name="other"></textarea>');
    } else {
        $('textarea[name="other"]').remove();
    }
}

click будет реагировать на любое нажатие радиоприемника, а if будет следить за тем, чтобы на нажатие реагировал только "другой" переключатель и что он будет реагировать, только если после него уже текстовая область (так что вы не получите многократного распространения текстовой области).

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

Надеюсь, что вы начали.