Вернуться   Дизайнерский форум » ВЕБ-ПРОГРАММИРОВАНИЕ » HTML, CSS, JavaScript

Создание формы поиска

Обсуждение темы Создание формы поиска в разделе HTML, CSS, JavaScript, часть категории ВЕБ-ПРОГРАММИРОВАНИЕ; Здравствуйте! Основной вопрос: Хочу создать форму поиска, похожую на форму поиска в вэб-браузерах в правом верхнем углу, т. е. чтобы кнопка поиска в ...


Закрытая тема
 
Опции темы
Старый 11.08.2010, 11:34   #1
Здравствуйте!
Основной вопрос:
Хочу создать форму поиска, похожую на форму поиска в вэб-браузерах в правом верхнем углу, т. е. чтобы кнопка поиска в виде иконки находилась в правом углу текстового поля

<form...>
<input type='text'>
<input type='image' src='search.png'>
</form>

CSS может много чего, но я знаю только, как поместить иконку в текстовое поле

input { background: url(search.png) 100% 0 no-repeat}

Но как из иконки сделать кнопку, я не знаю.
Дополнительный вопрос:
На вэб-страничке находится несколько форм и javascript-обработчик onMouseOver, передающий фокус елементу формы при наведении на нее курсором:

<form name='one'>
<input type='text' name='text_1' onMouseOvet='set_focus(this)'>
</form>

<form name='two'>
<input type='text' name='text_2' onMouseOvet='set_focus(this)'>
</form>

<form name='three'>
<input type='text' name='text_3' onMouseOvet='set_focus(this)'>
</form>

<script language'javascript'>
function set_focus( obj ) {
if ( obj.name=='text_1' ) {
document.one[obj.name].focus();
}
if ( obj.name=='text_2' ) {
document.two[obj.name].focus();
}
if ( obj.name=='text_3' ) {
document.three[obj.name].focus();
}
}
</script>

При добавлении новой формы мне придется переписать обработчик, а как мне вернуть имя формы, чтобы вставлять ее автоматически, не проверяя значение поля?
 
Старый 11.08.2010, 11:34
Ссылки
Старый 11.08.2010, 13:12   #2
По первой части вопроса:
Фоновую картинку нежелательно использовать в качестве кнопки, лучше IMG или INPUT типа IMG.
По второй части:
Обработчик, собственно, не нужен - можно записать обработку в самом INPUT'е.
<input name="text_1" id="text_1" type="text" value="" onmouseover="document.getElementById('text_1').foc us()" />

Для наглядности выложил пример:
http://dobry-dom.ru/test.html
 
Старый 11.08.2010, 14:26   #3
Спасибо.
По первой части вопроса уточним: Как кнопку запихнуть в текстовое поле?
По второй части вопроса: Дело в том, что кроме передачи фокуса мы должны еще очищать поле value элемента.
По-моему, id элемента нам поможет, мы ведь можем обратиться к полю элемента:

function set_focus (obj_id) {
document.obj.id.focus();
}

<input type='text' id='my_id' onmouseover='set_focus(document.getelementbyid(thi s))'>
 
Старый 11.08.2010, 14:57   #4
Чтобы поле получало фокус и очищалось, нужно так модифицировать INPUT:
<input name="text_1" id="text_1" type="text" value="" onmouseover="document.getElementById(text_1).focus (); document.getElementById(text_1).value = '';" />

Кнопку не нужно запихивать в тектовое поле, - просто имитируем ее размещение там. Или, как в примере, создаем DIV с бордером, или используем фоновую картинку для DIV'а в виде тектового поля.
Соответственно в данном DIV'е помещаем INPUT типа TEXT и INPUT типа IMAGE.
 
Старый 11.08.2010, 15:32   #5
Спасибо за помощь - очень помогли.
Алексей. Днепр.
 
Старый 11.08.2010, 15:32
Закрытая тема


Опции темы


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Создание сложной поисковой формы (фильтр) pivason HTML, CSS, JavaScript 0 16.03.2015 14:55
Создание формы для доступа к оптовым прайсам vitaly-go HTML, CSS, JavaScript 2 27.09.2010 16:04
форма поиска Dims HTML, CSS, JavaScript 6 21.02.2008 15:05
создание формы для ввода данных sny_san ASP, Perl, PHP и MySQL 2 22.11.2006 15:14
Проблема поиска Rem@x HTML, CSS, JavaScript 5 06.04.2004 22:41


Текущее время: 00:34. Часовой пояс GMT +4.

Реклама на форуме Условия размещения рекламы
Биржа ссылок Заработай на сайте!
Тарифный план «Lite»
Место: 1000 Мб
Трафик: неограниченный
Панель управления
Заказать ТП «Lite»
Тарифный план «Normal»
Место: 2000 Мб
Трафик: неограниченный
Поддержка скриптов
Заказать ТП «Normal»
Тарифный план «Profy»
Место: 7000 Мб
Трафик: неограниченный
Поддержка скриптов
Заказать ТП «Profy»
Тарифный план «Места хватит!»
Место: 25 ГБ
Трафик: неограниченный
Поддержка SSI, ssh
Заказать ТП «Места хватит!»
Дизайнерский форум