Перейти к содержимому



Кнопка для отправки сообщения с сайта

#1 LadyRi
LadyRi
  • Неактивные
  • 15 сообщений
  • Репутация: 0
0

Обновлено 25 февраля 2013 - 13:48  Отправлено 19 февраля 2013 - 11:33

Стандартный способ отправки формы обратной связи с сайта:
<input type="submit" value="Отправить сообщение" />
но моя кнопка проблемная, состоит и div:
<div class="Button"><div class="oBut"><i><b>Отправить письмо</b></i></div></div>
как с помощью такой кнопки отправить данные на сервер?
простая не устраивает, некрасивая))

 

 

  • 0

#2 Symphony
Symphony
  • Неактивные
  • 636 сообщений
  • Репутация: 54

Отправлено 19 февраля 2013 - 11:38

дайте скрин вашей кнопки из дива
  • 0


#3 isvetlichniy
isvetlichniy
  • Неактивные
  • 622 сообщений
  • Репутация: 93

Отправлено 19 февраля 2013 - 15:07

а че тут думать то, повесь на твою новую кнопку событие onclick и с его помощью выполни функцию submit для формы

например

<form id="form1" action="" method="post">
<div class="Button" onclick="document.getElementById('form1').submit();"><div class="oBut"><i><b>Отправить письмо</b></i></div></div>
</form>

это самый простой вариант, без дополнительных библиотек типа jquery
  • 1

#4 k1on
k1on
  • Неактивные
  • 63 сообщений
  • Репутация: 7

Отправлено 19 февраля 2013 - 15:35

это самый простой вариант, без дополнительных библиотек типа jquery

ладно хоть еще для алертов jquery не подключают :)
  • 0

#5 matroskin8
matroskin8
  • Пользователь PRO
  • 767 сообщений
  • Репутация: 143

Отправлено 19 февраля 2013 - 15:47

но моя кнопка проблемная, состоит и div:

<div class="Button"><div class="oBut"><i><b>Отправить письмо</b></i></div></div>
как с помощью такой кнопки отправить данные на сервер?

Почему не повесить графическую кнопку, чтобы не выдумать костылей?:
<input type="image" src="картинка" />

  • 0


#6 isvetlichniy
isvetlichniy
  • Неактивные
  • 622 сообщений
  • Репутация: 93

Отправлено 19 февраля 2013 - 16:54

матроскин, все равно придется на нее вешать события onclick

я делаю проще.
беру обычный submit и просто стилизую его. нужна картинка вместо стандартной кнопки, добавляем background-image и все дела


  • 0

#7 matroskin8
matroskin8
  • Пользователь PRO
  • 767 сообщений
  • Репутация: 143

Отправлено 19 февраля 2013 - 17:35

матроскин, все равно придется на нее вешать события onclick

Почему?
if($_POST){
// обработчик
}

  • 0


#8 isvetlichniy
isvetlichniy
  • Неактивные
  • 622 сообщений
  • Репутация: 93

Отправлено 19 февраля 2013 - 18:14

Почему?

забудь, я ошибся.
<input type="image" src="картинка" /> тоже отправит данные на сервер

вопрос немножко в другом, может автору не нужна картинка
  • 0

#9 Symphony
Symphony
  • Неактивные
  • 636 сообщений
  • Репутация: 54

Отправлено 20 февраля 2013 - 13:42

думаю там и сиэсэсом можно было обойтись
  • 1


#10 sergos
sergos
  • Неактивные
  • 3 сообщений
  • Репутация: 0

Отправлено 21 февраля 2013 - 15:33

простая не устраивает, некрасивая))

если вы имеете такое понятие как стили и язык css, то из обычной кнопки можно сделать что захотите, и не надо париться)
для обычной кнопки пропишите идентификатор и в стилях задайте свойства идентификатору типа такого:
<input type="submit" name="button" id="button" value=" " />
в стилях пишите то что вам нужно, для примера написал:
#button{width:нужная ширина; height: нужная высота; background-image:url(путь картинки);background-color:transparent; border:hidden}
для того чтобы кнопка меняла вид при наведении прописывайте
#button:hover{ваши настройки стиля}
  • 0

#11 LadyRi
LadyRi
    Topic Starter
  • Неактивные
  • 15 сообщений
  • Репутация: 0

Отправлено 22 февраля 2013 - 19:26

всем спасибо, буду разбираться. вот скрин кнопки, которая требуется
Изображение
  • 0

#12 Mr.Developer
Mr.Developer
  • Неактивные
  • 73 сообщений
  • Репутация: 12

Отправлено 22 февраля 2013 - 22:46

Вам хватит и css-магии
Для примера посмотрите как реализованы кнопки в Twitter Bootstrap http://twitter.githu...ss.html#buttons
Причем обертку можно навесить и на обычный input
  • 0

#13 Symphony
Symphony
  • Неактивные
  • 636 сообщений
  • Репутация: 54

Отправлено 25 февраля 2013 - 13:48

LadyRi, Конечно, только css

.st {
display: inline-block;
margin: 0px;
padding: 4px;
padding-bottom: 5px;
padding-left: 12px;
padding-right: 12px;
background-color:#2da7f2;
background-image: linear-gradient(#38b2fd, #26a0eb);
background-repeat: repeat-x;
border:1px solid #3ab4ff;
border-bottom:none;
box-shadow:0px 1px 1px 0px #666,inset 0px 1px 0px 0px #73d3fc;
color: #fff;
cursor: pointer;
font-family: Arial;
font-size: 13px;
font-weight: bolder;
border-radius: 4px;
}

html:
<input class="st" type="submit" value="Отправить сообщение" />

  • 1


robot
robot
  • Пользователь PRO
  • 2 652 сообщений
  • Репутация: 85


Похожие темы
  Название темы Автор Статистика Последнее сообщение

Пользователь месяца
Megoydagi Megoydagi 1-й за Август
Очков активности: 30 4 темы, 8 сообщений, 1 балл репутации
Сайт: bank.net.ru
ТОП самых активных за этот месяц
  • Фотография Vmir
    #1

    Vmir
    Очков активности: 48 3 темы, 7 сообщений, 2 балла репутации

  • Фотография BLIK
    #2

    BLIK
    Очков активности: 40.5 Вне конкурса за определение пользователя месяца

  • Фотография Totti
    #3

    Totti
    Очков активности: 12 0 тем, 8 сообщений, 1 балл репутации

  • Фотография WGN
    #4

    WGN (worldgamenews.com)
    Очков активности: 12 1 тема, 5 сообщений, 1 балл репутации

  • Фотография SergiuS85
    #5

    SergiuS85
    Очков активности: 10.5 2 темы, 1 сообщение, 1 балл репутации

  • Фотография Sale_account
    #6

    Sale_account
    Очков активности: 10.5 2 темы, 1 сообщение, 1 балл репутации

  • Фотография Zevss
    #7

    Zevss (domles43.ru)
    Очков активности: 10.5 2 темы, 1 сообщение, 1 балл репутации

  • Фотография kuztoday
    #8

    kuztoday
    Очков активности: 10.5 1 тема, 4 сообщения, 1 балл репутации

  • Фотография Megoydagi
    #9

    Megoydagi (bank.net.ru)
    Очков активности: 9 Вне конкурса за определение пользователя месяца

  • Фотография mkreine
    #10

    mkreine (analiz-krovi.net)
    Очков активности: 9 1 тема, 3 сообщения, 1 балл репутации

  • Показать весь ТОП 10

Поддержите форум! =)
Топ 5 участников по репутации

Оформление форума – IPBSkins.ru