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

[Extalionez]

Странно, но я не смог найти как это сделать. В итоге должно получиться что-то типа как во вложении.

 

[HeadHunter]

<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]

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

 

[Extalionez]

этот вариант точно рабочий)

Рабочий для чего? чтобы форму отправить? Я конечно ламер, но не настолько

- картинка с лупой, задаётся как фон для поля input, отправка делается яваскриптом по клику на области, в конце инпута, но это очень извращенный вариант

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

 

[latteo]

Рабочий для чего? чтобы форму отправить? Я конечно ламер, но не настолько

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

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

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

 

[HeadHunter]

Рабочий для чего? чтобы форму отправить? Я конечно ламер, но не настолько

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

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

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

 

[Extalionez]

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

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

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

 

[latteo]

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

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

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

 

[begemot3]

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

 

[AGENT131313]

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