Должен ли я использовать <button>или <a>, отправив стилизованную веб-форму - PullRequest
Новая
       18

Должен ли я использовать <button>или <a>, отправив стилизованную веб-форму

7 голосов
/ 22 мая 2009

Для моей HTML-формы кажется, что я не могу создать кросс-браузер наведения и нажатые состояния для <button>.

Я действительно хочу этого, так как это создает хорошую обратную связь с пользователем (и отточенный внешний вид). С <a> это легко сделать, но нарушает правила доступности .

Что мне делать?

По запросу, пример: 

<form name="contact" action="index.php" method="post">
    <ul>
        <li>
            <label for="name" class="name">Name</label>
            <input type="text" name="name" id="name" size="30" />
        </li>
        <li>
            <button type="submit" class="submit">Send</button>
            <input type="hidden" name="submit" value="yes">
        </li>
    </ul>
</form>

button.submit
{
    background:#F99;
    font-size:3em;
}

button.submit:hover /* white button with colored text */
{
    background:#FFF;
    color:#F99;
}

Ответы [ 8 ]

13 голосов
/ 22 мая 2009

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

Например, начните с использования обычной кнопки в вашей форме. Это будет работать для всех, независимо от того, включен ли у них JavaScript. Затем используйте javascript, чтобы заменить эту кнопку тегом привязки (чтобы вы могли использовать: hover в вашем css), или просто используйте javascript для выполнения нужного эффекта наведения (если вы используете jQuery, вы можете привязать событие к кнопке Mouseover ).

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

3 голосов
/ 22 мая 2009

Internet Explorer 6 поддерживает только атрибуты: hover CSS для якорей.

Если вы поддерживаете IE6, вам нужно будет использовать какое-то решение javascript, например, предложенное @charles, в основном вам нужно динамически добавлять / удалять классы для элемента. Я обычно помещаю эти «исправления» в файл IE6.js с условными комментариями.

Использование jQuery необязательно, но оно действительно помогает сократить количество javascript, которое вы должны написать для достижения этих эффектов.

2 голосов
/ 22 мая 2009

Используя javascript, вы также можете заменить кнопку на a-tag, как предлагает Джон. Это использует jQuery, но вы можете сделать это с помощью обычного JavaScript или любой другой библиотеки: 

 var ahtml = "<div class='button'><a href=#>blabla</a></div>"; //whatever the HTML is for the styled a tag
 $('button.submit') //select button
    .hide()//Hide the button
    .after(ahtml) //insert the styled a html
    .next() //find the inserted html
       .click( function(e) { //add click behaviour to the inserted HTML
         $(this).prev().click(); //trigger click event of submit button
         return false; //stop both event bubbling and event triggering
       });

Таким образом, у вас есть кнопка для людей без JavaScript. А также есть приятный стиль тега для людей с JavaScript.

2 голосов
/ 22 мая 2009

Я не тестировал это подробно и еще не кроссплатформенно, но для Midori и FF3.x (в Ubuntu 8.04) теги button принимают стили для: hover,: focus и: active a метки).

Это работает, конечно: 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
    <head>

    <title></title>

    <style type="text/css">

    button {color: #f00; 
        background-color: #ccc;
        border: 0 none transparent;}
    button:hover {color: #0f0; }
    button:active {color: #00f; }

    </style>

</head>

<body>

    <div id="wrapper">

    <form method="post" action="" enctype="form/multipart">

        <fieldset>
            <label for="input1">Label 1:</label>
            <input id="input1" name="input1" type="text" />

            <label for="input2">Label 2:</label>
            <input id="input2" name="input2" type="text" />
        </fieldset>

        <fieldset>

            <button class="reset" type="reset">Reset</button>
            <button class="submit" type="submit">Submit</button>

        </fieldset>

    </for>

    </div>

</body

</html>

Демонстрация по адресу: http://www.davidrhysthomas.co.uk/so/buttons.html

Далее отредактировано для ответа на вопрос-правку:

Вы можете попробовать добавить третий элемент списка и присвоить им имена (я бы далее рекомендовал использовать наборы полей, а не списки, но давайте перейдем к тому, что у вас есть). 

<head>
<link rel="stylesheet" type="text/css" href="regularStylesheet.css" />

    <!--[if ie lte7]>
<link rel="stylesheet" type="text/css" href="ie-adaptations.css" />
    <![endif]-->

<form name="contact" action="index.php" method="post">
    <ul>
        <li>
            <label for="name" class="name">Name</label>
            <input type="text" name="name" id="name" size="30" />
        </li>
        <li class="submit-buttons">
            <button type="submit" class="submit">Send</button>
            <input type="hidden" name="submit" value="yes">
        </li>
        <li class="submit-links">
            <a href="where/ever/you/send.html">Send</a>
            <input type="hidden" name="submit" value="yes">
        </li>
    </ul>
</form>

Затем в обычном CSS добавьте: 

li.submit-buttons
{
    display: block;
}

li.submit-links
{
    display: none;
}

И наоборот, в IE-adaptations.css: 

li.submit-buttons
{
    display: none;
}

li.submit-links
{
    display: block;
}

Он не идеален ни в коем случае, но он не расстраивает устройства, использующие режим форм, и должен показывать кнопки; и должен только заставить IE 7 (и ниже) отображать ссылки. Так что ... надеюсь, не стоит слишком расстраивать доступность.

1 голос
/ 23 мая 2009

Вы определенно можете сделать это только с помощью CSS (и немного JS для бедных ie6).

Во-первых, заставить его работать в FF с: hover,: active, что угодно. затем добавьте несколько js, чтобы добавить классы к кнопкам при наведении, нажмите .... Добавьте эти классы в ваши объявления: hover,: active ... (button: hover, button.hover {color: red}) и поехали , Вам нужно будет сделать массаж для сафари и IE, но это абсолютно возможно.

Другая возможность - это некое подобие предыдущих предложений. Если я не ошибаюсь, JAWS будет читать элементы с видимостью: скрытый (не уверен насчет глаз окна). Вместо удаления кнопки с помощью js или установки ее отображения: нет, установка ее в невидимое значение должна работать в межпользовательском агенте. Тогда просто нам JS, чтобы связать ссылку, нажмите на форму отправки.

1 голос
/ 22 мая 2009

Я мог бы засунуть ногу себе в рот или что-то здесь, но я просто хотел указать на кое-что еще, чтобы рассмотреть. Однако вы решаете эту проблему, если ваша кнопка или якорь должны выполнить какое-либо действие (например, удалить запись или изменить свой банковский счет), тогда я настоятельно рекомендую вам выполнить обратную передачу (POST). Это то, что кнопка обычно делает в форме. Не выполняйте GET, как это обычно делает акор.

Это потому, что за GET слишком легко следуют случайные вещи, такие как поисковые системы, предварительные кэши браузера и другие вещи. Где как POST распознается как нечто, выполняющее действие и не выполняемое автоматически.

С другой стороны, если ваша "кнопка" просто выполняет какой-то запрос, то GET - это нормально.

И вы также можете сделать пост с якорем, особенно с javascript.

кто-то с таким свежим умом может, вероятно, заполнить кучу деталей, которые я затмил.

1 голос
/ 22 мая 2009

Как насчет решения jQuery, примерно так: 

$("input:button").mouseover(function(e) {
    $(this).addClass("hovered");
}).mouseout(function(e) {
    $(this).removeClass("hovered");
}).mousedown(function(e) {
    $(this).addClass("pressed");
}).mouseup(function(e) {
    $(this).removeClass("pressed");
});
1 голос
/ 22 мая 2009

Даже если вы можете найти решение (те, которые упоминал Мэтт Росс, могут быть одним из них) Вам лучше выбрать доступность, чем полированный внешний вид!

...