Как мне создать интерактивную панель поиска с html5, css3 и php, и результат создает и возвращает новую составленную страницу?
Мне нужен интерактивный заголовок поиска, встроенный в мою веб-страницу вверху, чуть ниже панели навигации. Это должно пойти что-то вроде этого:
рисованный эскиз концепции прототипа для интерактивной панели поиска
немного кода, который у меня есть ниже, я ВСЕГО новичка в кодировании ..
Это тот случай, когда я даже не знаю, что искать ?! И если это должен быть HTML или PHP или какая-то свертка.
Буду признателен за любую помощь,
Спасибо!
…….
Это то, что я нашел, но это не применимо для решения проблемы или на языке, который мне нужен:
Изменить ссылку HREF с формой PHP
Интерактивная библиотека Javascript для отображения гистограмм на временной шкале
как создать панель поиска в угловых 4?
как создать живую панель поиска?
Создание интерактивной многопольной поисковой панели в MS-ACCESS
Как мне создать интерактивный выбор?
<!DOCTYPE html>
<html>
<body>
<h1>BlueBubble.Tech</h1>
<?php
/* interactive search sentence below header*/
function SearchSentence() {
global $name, $clienttype, $product;
$name = "Phoenix";
$clienttype = " solopreneur";
$product = " a domain";
echo "<p>Hello $name, which problem can we help you with today? </p>";
echo "<p>I am a: $clienttype </p>";
echo "<p>looking for: $product </p>";
}
SearchSentence()
/*Name: <input type="text" name="name"><br>
E-mail: <input type="text" name="email"><br>
<input type="submit">
</form>
}
?>
*/
?>
</body>
</html>
Решение
Ваш вопрос очень широкий, но, возможно, это поможет вам начать.
При первом запуске index.php часть php в верхней части страницы не выполняется, а внизу отображается html-форма.
Когда вы нажимаете кнопку отправки формы (Перейти), данные формы снова отправляются на эту же страницу, и теперь выполняется часть php вверху.
Затем часть php читает значения, представленные формой, и вы можете использовать их, чтобы определить, какую страницу вы хотите отобразить.
Чтобы решить, какую страницу отображать, я использую if/else if заявление. В зависимости от представленных значений одна из HTML-страниц в include() затем отображается.
В этом примере я добавил только пункты для комбинаций newbie + domain и newbie + branding, так что вам придется добавить к этому гораздо больше.
Я старался сделать этот пример как можно более простым, надеюсь, он даст вам представление о том, как что-то подобное можно сделать. Может быть, вы могли бы начать с попытки понять, как работает этот код (гугл части, которые вы не понимаете, или что-то в этом роде), а затем построить оттуда. 🙂
index.php
<?php
// If the form below was submitted
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
// Collect the submitted information
$name = $_POST['name'];
$clienttype = $_POST['clienttype'];
$product = $_POST['product'];
echo "<p>Hello $name, which problem can we help you with today? </p>";
echo "<p>I am a: $clienttype </p>";
echo "<p>looking for: $product </p>";
// if newbie and domain were selected..
if ($clienttype == 'newbie' && $product == 'domain') {
// display the page for newbie + domain
include('newbie_domain.html');
// if newbie and branding were seleted..
} else if ($clienttype == 'newbie' && $product == 'branding') {
// display the page for newbie + branding
include('newbie_branding.html');
} // And so on for the other combinations
// Do not display the form again
exit();
}
?>
<!DOCTYPE html>
<body>
<h1>BlueBubble.Tech</h1>
<form method="post">
<label for="name">My name is</label>
<input type="text" name="name" id="name" required>
<label for="clienttype">I am a</label>
<select name="clienttype" id="clienttype" required>
<option value="newbie">newbie</option>
<option value="professional">professional</option>
<option value="solopreneur">solopreneur</option>
<option value="business">business</option>
</select>
<label for="product">looking for a</label>
<select name="product" id="product" required>
<option value="domain">domain</option>
<option value="branding">branding</option>
<option value="website">website</option>
<option value="app">app</option>
<option value="uxdesign">uxdesign</option>
</select>
<input type="submit" value="Go >">
</form>
</body>
</html>
newbie_domain.html
<!DOCTYPE html>
<body>
<h1>BlueBubble.Tech</h1>
<p>This is the page for newbie & domain!</p>
</body>
</html>
newbie_branding.html
<!DOCTYPE html>
<body>
<h1>BlueBubble.Tech</h1>
<p>This is the page for newbie & branding!</p>
</body>
</html>
Другие решения
Других решений пока нет …