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

Extalionez

Клоун
Заблокирован
Регистрация
21 Авг 2008
Сообщения
368
Реакции
191
  • Автор темы
  • Заблокирован
  • #1
Странно, но я не смог найти как это сделать. В итоге должно получиться что-то типа как во вложении.
 

Вложения

  • Безымянный.png
    Безымянный.png
    1,5 KB · Просмотры: 41
Код:
<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. главное разрезать правильно изображение ля поиска)
 
Интересный вопрос. Сходу два варианта:
- кнопка подогнана вплотную к полю поиска, контур вокруг 2х элементов берётся;
- картинка с лупой, задаётся как фон для поля input, отправка делается яваскриптом по клику на области, в конце инпута, но это очень извращенный вариант :)
 
  • Автор темы
  • Заблокирован
  • #4
этот вариант точно рабочий)
Рабочий для чего? чтобы форму отправить? Я конечно ламер, но не настолько:)
- картинка с лупой, задаётся как фон для поля input, отправка делается яваскриптом по клику на области, в конце инпута, но это очень извращенный вариант
идеальный вариант:)
подробней мона про то, как событие onclick на фон навесить?
 
Рабочий для чего? чтобы форму отправить? Я конечно ламер, но не настолько:)

идеальный вариант:)
подробней мона про то, как событие onclick на фон навесить?

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

kadurinho пока я набирал пост, выложил решение по первому пути, почти не требующие коррекции - я бы его использовал.
 
Рабочий для чего? чтобы форму отправить? Я конечно ламер, но не настолько:)

идеальный вариант:)
подробней мона про то, как событие onclick на фон навесить?
Я же не знаю какую ты систему используешь) Берем движок, выводим форму поиска, верстаем вышеуказанным предложением, радуемся.

P.S. вариант вверху это только верстка, а не функционал поиска. Движок какой используется?
 
  • Автор темы
  • Заблокирован
  • #7
Я же не знаю какую ты систему используешь) Берем движок, выводим форму поиска, верстаем вышеуказанным предложением, радуемся.

P.S. вариант вверху это только верстка, а не функционал поиска. Движок какой используется?
Мне нужно чтобы в форме ввода текста была лупа, по нажатию на которую отправялась форма, в которой она находится.
Щас пытаюсь скрипт написать, но думал что это можно html'ом сделать.
P.S.: Господи, прости и сохрани чтоб за флуд не забанили.
 
Мне нужно чтобы в форме ввода текста была лупа, по нажатию на которую отправялась форма, в которой она находится.
Щас пытаюсь скрипт написать, но думал что это можно html'ом сделать.
P.S.: Господи, прости и сохрани чтоб за флуд не забанили.

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

Вот кстати 3й вариант: пусть сабмит-кнопка будет нависать над инпут полем закрывая её часть, а в инпут поле прописать свойства так, чтобы последние символы под кнопку не уходили.
 
нене
<form id="for">
<div class="wrap">
<input type="text">
<img src="" onClick="var forma=document.getElementById('for');forma.submit();">
</div>
типа того
просто привязать на картинку событие клик и его обработчик
 
Извините что влажу но мне кажется что проще чтобы сделать все таки из 2 частей.
<div class="poisk">
<input type="text" name="poisk"> сама форма
<input type=image src="lypa.png" title="Поиск" style="width: 24px; height: 24px; border: 0"> сама лупа
</div>
 
Назад
Сверху