Как вставить кнопку submit(для отправки формы) в input type="text"?

Тема в разделе "Верстка", создана пользователем Extalionez, 1 ноя 2012.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. Extalionez

    Extalionez Клоун

    Заблокирован
    Регистр.:
    21 авг 2008
    Сообщения:
    368
    Симпатии:
    185
    Странно, но я не смог найти как это сделать. В итоге должно получиться что-то типа как во вложении.
     

    Вложения:

  2. kadurinho

    kadurinho

    Регистр.:
    21 июн 2011
    Сообщения:
    601
    Симпатии:
    242
    Код:
    <input type="text" class="text">
    <input type ="submit" class="button" value=" ">
     
    .text{
    float:left;
    backgrund:url(путь_к_изображению_поля_инпут.jpg)
    width:200px; /*ширина изображения*/
    height:30px; /*высота изображения*/
    border:0;
    padding:0 10px 0 15px; /*отступы в поле инпут*/
    }
     
    .button{
    float:left;
    backgrund:url(путь_к_изображению_кнопки_поиска.jpg)
    width:50px; /*ширина изображения*/
    height:30px; /*высота изображения*/
    border:0;
    cursor:pointer;
    }
    
    писал на быструю руку, иногда бывают разные задачи, этот вариант точно рабочий)
    P.S. главное разрезать правильно изображение ля поиска)
     
    latteo нравится это.
  3. latteo

    latteo Эффективное использование PHP, MySQL

    Moderator
    Регистр.:
    28 фев 2008
    Сообщения:
    1.401
    Симпатии:
    1.182
    Интересный вопрос. Сходу два варианта:
    - кнопка подогнана вплотную к полю поиска, контур вокруг 2х элементов берётся;
    - картинка с лупой, задаётся как фон для поля input, отправка делается яваскриптом по клику на области, в конце инпута, но это очень извращенный вариант :)
     
  4. Extalionez

    Extalionez Клоун

    Заблокирован
    Регистр.:
    21 авг 2008
    Сообщения:
    368
    Симпатии:
    185
    Рабочий для чего? чтобы форму отправить? Я конечно ламер, но не настолько:)
    идеальный вариант:)
    подробней мона про то, как событие onclick на фон навесить?
     
  5. latteo

    latteo Эффективное использование PHP, MySQL

    Moderator
    Регистр.:
    28 фев 2008
    Сообщения:
    1.401
    Симпатии:
    1.182
    Вычислить координаты, где заканчивается инпут. Отнять ширину "кнопки". Итого есть координаты 4 углов прямоугольника. Навесить событие на на эту область (не уверен, что так можно) или создать прозрачный элемент над этой областью и на него повесить событие. Конкретных функций не подскажу....
    Понятное дело, что работать будет только у тех, кто включил Js в браузере. Остальные будут тихо проклинать за инпут без кнопки :-]

    kadurinho пока я набирал пост, выложил решение по первому пути, почти не требующие коррекции - я бы его использовал.
     
    Extalionez нравится это.
  6. kadurinho

    kadurinho

    Регистр.:
    21 июн 2011
    Сообщения:
    601
    Симпатии:
    242
    Я же не знаю какую ты систему используешь) Берем движок, выводим форму поиска, верстаем вышеуказанным предложением, радуемся.

    P.S. вариант вверху это только верстка, а не функционал поиска. Движок какой используется?
     
  7. Extalionez

    Extalionez Клоун

    Заблокирован
    Регистр.:
    21 авг 2008
    Сообщения:
    368
    Симпатии:
    185
    Мне нужно чтобы в форме ввода текста была лупа, по нажатию на которую отправялась форма, в которой она находится.
    Щас пытаюсь скрипт написать, но думал что это можно html'ом сделать.
    P.S.: Господи, прости и сохрани чтоб за флуд не забанили.
     
  8. latteo

    latteo Эффективное использование PHP, MySQL

    Moderator
    Регистр.:
    28 фев 2008
    Сообщения:
    1.401
    Симпатии:
    1.182
    Даже если на картинке оно выглядит как кнопка для сабмита в инпут поле, то это не значит, что вот так в лоб и надо реализовывать...

    Вот кстати 3й вариант: пусть сабмит-кнопка будет нависать над инпут полем закрывая её часть, а в инпут поле прописать свойства так, чтобы последние символы под кнопку не уходили.
     
    Extalionez нравится это.
  9. begemot3

    begemot3 Постоялец

    Регистр.:
    18 янв 2009
    Сообщения:
    52
    Симпатии:
    13
    нене
    <form id="for">
    <div class="wrap">
    <input type="text">
    <img src="" onClick="var forma=document.getElementById('for');forma.submit();">
    </div>
    типа того
    просто привязать на картинку событие клик и его обработчик
     
  10. AGENT131313

    AGENT131313 Забанен

    Регистр.:
    17 мар 2009
    Сообщения:
    279
    Симпатии:
    28
    Извините что влажу но мне кажется что проще чтобы сделать все таки из 2 частей.
    <div class="poisk">
    <input type="text" name="poisk"> сама форма
    <input type=image src="lypa.png" title="Поиск" style="width: 24px; height: 24px; border: 0"> сама лупа
    </div>