Отправить форму, используя метку метки - PullRequest
Новая
       23

Отправить форму, используя метку метки

4 голосов
/ 23 ноября 2010

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

Как я знаю, нет способа вставить HTML-код прямо во входное значение sumbit.И если я перенесу отправку ввода в элемент div (например, чтобы добавить несколько границ), не вся область будет кликабельной.

Будет ли щелчок по метке вызывать отправку формы во всехбраузеры ? 

<form method="test.rb">
 <input type="text" name="test" id="test" />
 <label for="button">
  <input type="submit" name="button" id="button" value="Send!" />
 </label>
</form>

Ответы [ 4 ]

7 голосов
/ 23 ноября 2010

Согласно W3C на ассоциированных ярлыках :

Элемент label не используется для следующих целей, поскольку метки для этих элементов предоставляются через атрибут value (для кнопок Submit и Reset), атрибут alt (для кнопок изображения) или сам контент элемента (button). *

Спасибо @Jeremiah Isaacson за указание на это.

Старый ответ

Да, это будет работать. Я не могу проверить поведение во всех браузерах, но вот что W3C спецификация должна сказать :

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

Итак, я полагаю, щелкнув ЭТИКЕТКУ, вы, по сути, щелкаете по кнопке отправки.

Спасибо @ stevelove за указание на возможность этого.

3 голосов
/ 23 ноября 2010

Если проблема заключается в размещении HTML-кода внутри вашей кнопки, вы должны использовать <button>, что позволит вам сделать именно это.

<button type="submit" name="button" id="button"><img src="button.png" />Send!</button>

Но, чтобы ответить на ваш вопрос о <label>: Нет, это не сработает. Очевидно, это сработает, и, подумав, я не вижу причин, почему это не сработает.

0 голосов
/ 07 сентября 2017

Вы можете добавить любой html-элемент в метку, и с помощью этого кода вся метка будет работать как кнопка отправки. 

 <form method="" name="myForm">
        <input type="text" name="" placeholder="">
        <label for="" class="" onclick="myForm.submit() "></label>
        </form>
0 голосов
/ 23 ноября 2010

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

Очень легко стилизовать вводы без использования JavaScript или изображений.

использование css - стиля для всех кнопок отправки - input[type=submit] или использование класса input.submit-btn, примененного к определенным элементам

Вы можете стилизовать цвет, границу, фон, отступы, положение, вес шрифта, градиенты, тени ... все эффекты, используя css ...

вуаля сексуальная кнопка - 

   input[type=submit] {
        padding:4px;
        color: #fff;
        margin-top: 10px;
        background-color: #e96000;
        border: none;
        background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ff6900), to(#e96000));
        background:  -moz-linear-gradient(25% 75% 90deg, #e96000, #ff6900);
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        border-radius: 4px;
    }
...