2016-07-15 5 views
-7

Мой HTML и CSS находятся здесь. У меня есть этот код с популярного сайта w3schools.com. Что мне нужно писать где?Почему мое поле поиска ничего не ищет?

<html> 

<head> 
<style> 
input[type=text] { 
width: 130px; 
box-sizing: border-box; 
border: 2px solid #ccc; 
border-radius: 4px; 
font-size: 16px; 
background-color: white; 
background-image: url('searchicon.png'); 
background-position: 10px 10px; 
background-repeat: no-repeat; 
padding: 12px 20px 12px 40px; 
-webkit-transition: width 0.4s ease-in-out; 
transition: width 0.4s ease-in-out; 
} 

input[type=text]:focus { 
width: 100%; 
} 
</style> 
</head> 
<body> 

<p>Animated search form:</p> 

<form> 
<input type="text" name="search" placeholder="Search.."> 
</form> 

</body> 
</html> 

Благодаря

+0

Ваш ''

тег должен знать, что искать, используя '' method' и action' атрибут. – Lee

+0

[Атрибут заполнителя HTML5 не заменяет элемент метки] (http://www.456bereastreet.com/archive/201204/the_html5_placeholder_attribute_is_not_a_substitute_for_the_label_element/) – Quentin

+1

@Lee - это форма поиска, поэтому запрос GET прекрасен, поэтому нет необходимости в атрибуте метода, поскольку GET является значением по умолчанию. – Quentin

ответ

3

guide you appear to have followed называется «Как создать анимированную форму поиска», к сожалению, это руководство, которое полностью о странице «Animated» и не имеет ничего общего с поиском ,

Целью формы является не поиск. Он предназначен для сбора данных от пользователя и отправки его на серверную программу.

Вам необходимо написать (или найти) программу на стороне сервера, которая будет выполнять поиск для вас.

Начните с выбора языка программирования, который поддерживает ваш сервер для кода на стороне сервера.

+0

, пожалуйста, напишите мне код –

+0

@SumairAli - Нет, это масштабная задача. – Quentin

-1

Это просто страница дизайна html. Вам нужно написать код для поиска. Вроде onchange Событие, что вы код делаете.

Создайте функцию javascript и вызовите эту функцию на onchange событие.

+0

Я использую блоггер, можете ли вы написать код js для меня, пожалуйста –

0

Как вы говорите в комментариях, вы используете блоггер. Используйте эту форму в блогере. Он работает

<form action='/search' class='search-form' method='get' role='search'> 
    <input class='form-control' name='q' placeholder='search' type='text'/> 
</form>