❶ 如何在自己網站上添加一個搜索框
這個要寫程序了，不是添加那個HTML控制項就行的，還有搜索的內容是什麼都是由程序執行的，你說的那個框框只是程序接收過去的值而已，你根據自己的條件搜索通過框框里搜索過來的東西，比如你框框輸入「中國」，你自己寫的程序就是搜索所有文章裡麵包含中國兩個字的文章，反正就著，你的框框只是一個樣子，真正執行的是程序接收這個值後根據自己的需求做的一個搜索程序，如果你不懂程序，這方面我就不能說得太詳細了，想學的話就從ASP或PHP開始吧，入門都是挺簡單的WEB語言。
另外你說的那個中國，北京，小地方這個東西其實也一樣。。不知道你搜索的是什麼內容，。。只能回答到這。
❷ html 製作簡單的搜索功能
1.打開Hbuilder編輯器，創建一個輸入框和一個按鈕，水平放置。
(2)在web前端如何添加搜索框擴展閱讀：
1. 語言概述
WWW上的超媒體文檔稱為頁面。作為組織或個人在萬維網上的起點的頁面稱為主頁，而主頁通常包含指向其他相關頁面或其他節點的指針(超鏈接)。從邏輯上講作為一個整體處理的一系列頁面的有機集合稱為一個網站(網站或Web)。
Web頁面，也稱為Web頁面，在這里沒有區別。
2. 規范和標准
HTML是一種規范，一種標准，它使用標記符號來標記要顯示的web頁面的各個部分。web文件本身是一個文本文件，通過在文本文件中添加標記，您可以告訴瀏覽器如何顯示內容(例如，如何處理文本、如何安排圖片、如何顯示圖片等)。
瀏覽器依次讀取網頁文件，然後根據標記解釋並顯示其標記的內容。錯誤的標記不會被指出，也不會停止其解釋的執行。編譯器只能通過顯示效果來分析錯誤的原因和部分原因。但是，需要注意的是，不同的瀏覽器可能對相同的標記有不同的解釋，並且可能具有不同的顯示效果。
3.標記語言
HTML被稱為超文本標記語言，因為文本包含所謂的「超鏈接」點—URL指針，使瀏覽器能夠通過激活(單擊)新網頁來輕松檢索它們。這是為什麼HTML被廣泛使用的最重要的原因之一。
因此，Web頁面的本質是HTML，通過結合其他Web技術(如腳本語言、CGI、組件等)可以創建功能強大的Web頁面。因此，HTML是Web編程的基礎，這意味著萬維網是基於超文本的。
❸ web前端開發，求這個搜索框文字如何顯示在框框內啊如圖！！
設置padding值，距離上面和做面控制一下就可以了，比如：padding-top:10px；padding-left:20px;實際上縱向居中可以用：line-height:你的input的高度；
❹ 如何在html添加一個搜索框和一個按鈕點擊按鈕，就搜索到框里的內容
<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>Title</title>
</head>
<body>
<formaction="/register/"method="post">
{%csrf_token%}
//文本框
<p>搜索:<inputtype="text"name="question"></p>
//提交按鈕
<inputtype="submit">
</form>
</body>
</html>
最後在後端獲取數據就可以
req=request.POST.get("question")
❺ html中的搜索框怎麼做
我自己簡單做了一個，因為上傳圖片麻煩，所以圖中的圖片我直接用文字代替，弄個背景就ok，代碼如下：
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""
<html>
<head>
<metahttp-equiv="content-type"content="text/html;charset=utf-8">
<metaname="author"content="blog.anchen8.net">
<title>無標題1</title>
<style>
*{
margin:0;
padding:0;
}
.search{
margin:30px;
width:210px;
height:35px;
border:1pxsolidsilver;
}
.search_key{
width:150px;
height:25px;
border:none;
margin-top:5px;
margin-left:5px;
}
.submit{
background:none;
margin-top:5px;
width:40px;
height:25px;
border:none;
/*這個添加背景圖即可*/
}
</style>
</head>
<body>
<formaction=""method="post">
<divclass="search">
<inputtype="text"class="search_key"value="站內搜索"/>
<inputtype="submit"class="submit"value="搜索">
</div>
</form>
</body>
</html>
效果如下：
❻ dedecms搜索功能怎麼設置，詳細點的教程
你可以直接修改織夢自帶的那個default裡面的search頁面，另外在你的前端代碼寫搜索的地方加上引用： <form action="/plus/search.php" method="post" class="search-form">
<input name="keyword" class="input-keyword" value="搜索您感覺興趣的…" onblur="if(this.value=='') this.value='搜索您感覺興趣的…';" onfocus="if(this.value=='搜索您感覺興趣的…') this.value='';" type="text">
<input name="submit" class="search-btn" value="" type="submit">
</form>
❼ 在web前端怎樣將聯動查詢依次添加到文本框
我們可以用一個div盒子將文本框和按鈕包在一個盒子裡面:如：按鈕然後給他們樣式：div{width:200px;height:30px;float:left}input{width:135px;height:30px;float:left}button{width:60px;height:30px;}這樣文本框和按鈕就在一行內了，如果想好看一點可以給div一個邊框樣式，input和button不要給邊框，看起來就好看多了
❽ 怎麼樣實現前端實現動態添加input框 並做模糊搜索功能
1
<input type="text" autocomplete="on">
input 的autocomplete屬性默認是on，但某些瀏覽器還是需要你手動寫上默認值才有效，其含義代表是否讓瀏覽器自動記錄之前輸入的值，off：則關閉記錄。該功能十分垃圾，交互讓人詬病不已，每次必須提交刷新後才能記住存入歷史，不推薦，垃圾。
原生基礎上增強交互
我並不是說去改變autocomplete="on"的原生功能，而是通過另一種方式實現我們想要的效果，首先我們要准備一個輸入時候出現下面那個下拉框可選性，那麼這個東西其實原生是有的，並不需要我們去自己寫，如下：
1
2
3
4
5
<input type="text" class="form-control" id="phone_number" value="1876487748" placeholder="請輸入手機號碼/imei/accid" list="cars">
<datalist id="cars">
<option value="17314459887"></option>
<option value="1876487748"></option>
</datalist>
動態緩存
上面已經做好了模型，但並不能實現動態記憶，而是寫死的兩個，很顯然，我們需要用到本地緩存，將我們每次提交查詢的值push到當前datalist的數據中去
1
2
3
4
5
6
7
8
9
10
11
// 提交之前先判斷需不需要存儲，如果當前數據中已經存在的，那麼不去重復添加
var dataInput = $('#phone_number').val();
var locData = JSON.parse(localStorage.getItem('dataList'));
if (!locData || !locData.includes(dataInput)) {
if (!locData) {
localStorage.setItem('dataList', JSON.stringify([dataInput]));
} else {
localStorage.setItem('dataList', JSON.stringify(locData.concat([dataInput])));
}
}
scope.addDataList();
1
2
3
4
5
6
7
8
9
10
11
12
13
// 通過jq將數據插入到datalist中
addDataList: function() {
var opt = '';
var locData = JSON.parse(localStorage.getItem('dataList'));
if (locData.length > 15) {
locData = locData.slice(locData.length - 15, locData.length);
}
console.log('locData', locData);
for (var i = 0, len = locData.length; i < len; i++) {
opt += '<option value="' + locData[i] + '">';
}
$('#cars').html(opt);
}
❾ html製作一個搜索框，代碼是什麼
1、打開Hbuilder編輯器，創建一個input框和button按鈕，將它們橫排擺放在一起：
❿ 網站設計中搜索框的設計技巧有哪些
設計精美的網站當然很吸引人，但如果你的網站設計精美，內容上乘，就是不明白網站為何沒達到運營預期目標，問題可能就出在搜素框這一元素的運用之上。本文指出了設計者必須避免的錯誤，並分享了一些搜索框設計技巧，希望在優化網站性能方面有所幫助。
在瀏覽整個網站中，搜索框通常是通向用戶使用的最後一道關卡。如果你的網站內容很多，包含了詳盡的特色，功能，設計元素，產品和服務等等，那麼搜索框就成為了網站不可或缺的一部分。網站的成長往往需要時間。當然，從整個網站設計和開發過程來看，設計肯定要簡潔，有文章和評論，以及非正式的網站通知，特色內容和服務等等。不過，隨著網站層次不斷提升和更新，與網站相關的內容的只是起到了裝飾作用。因此，搜索框對網站的性能優化起到了至關重要的作用。
優質的職能和運作對網站開發確實很重要，但與此同時，我們也不可忽視網站的前端性能。你的網站也許在特色內容，功能以及內容質量等方面都很出眾，但是，如果網站前端性能令人不滿意，並且沒有以用戶為中心，那麼網站其它方面做得再好，也起不到任何作用。
錯誤觀念：搜索框不需要設計
在整個網站設計中，搜索框的外觀要顯眼，方便用戶快速找到。網站站長普遍認為搜索框只是一個輸入和提交內容的按鈕而已，因此他們根本不需要花時間設計。
但是由於錯誤觀念泛濫，站長們也錯失了一些潛在的機會。由於設計上的缺失以及亮點不突出，用戶通常會被搜索框的位置弄得焦頭爛額，他們通常會點擊「返回」按鈕（離開網頁）。因此，設計平庸，辨識度不高的搜索框就是導致這一切的元兇，如果想要網站獲得可觀的流量，但是網站轉化率卻低得離譜，這是不行的。
如果用戶對你的網站感到失望，搜索框則有助於留住用戶。在大量的網站中，真正帶給用戶絕佳體驗的少之又少，用戶有時還沒深入了解整個網站，可能就不斷點擊後退，離開網頁了。如果用戶能進行搜索，他們只需在搜索框中輸入自己想找的內容，上述問題也就迎刃而解了。
在如今這個快速成功的社會，時間就是金錢。搜索框不僅能幫助用戶節約時間，還可帶給用戶高度愉悅和簡潔的瀏覽體驗。
搜索框設計技巧
在為網站設計搜索框時，你可重點考慮以下建議：
1. 搜索框要顯眼
搜索框要清晰可見，千萬不可放在難以注意到的位置。即使你的網站主題是純白色，為搜索框設置黑色的邊框，選用紅色等亮色作為字體顏色，這都可能會解決搜索框不明顯的問題。
2. 搜索框要有搜索框的樣
你可以嘗試在搜索框設計中融入創意，但是不要把它弄得不倫不類。這也是搜索框必須是框狀的原因。訪問網站的用戶不會仔細瀏覽完整個網站的內容，他們只會關注自己感興趣的內容，而且許多學習條件是受制於他們的行為，在用搜索框進行搜索時，實際上用圓角矩形的搜索框就可以了。
3. 搜索框的位置
搜索框的位置對網站優化和性能提升十分重要。一般的經驗表明搜索框的最佳位置應在網站頂部的左上角或右上角，因為用戶希望節約時間和精力，直接搜索到他們所需的內容。但是受廣告等內容的影響，迫使設計者將搜索框放在頁面底部。這並沒真正解決搜索框在網站中的實用性問題，必須避免。
另外，在每個網頁中都放入搜索框是一個明智的主意，即使用戶在網站中迷失，他們也能夠方便地找到需要的內容。
4. 為提交按鈕取一個有創意的名字
搜索框的名字要取得有創意，不要簡單地放上單調的「go」，「find」或「search」在旁邊。不管給它起什麼名字，只要不為難用戶去猜意思就好。
5. 為用戶提供分類搜索
用戶可自由搜索各種分類。同樣的思路，你也可以顯示分類，用戶在輸入區域進行搜索。在JavaScript的幫助下，用戶只需將滑鼠懸停在搜索框上，即可顯示類型或進行用戶自定義搜索，從用戶的角度講，這是一個很棒的選擇。
設計者必須避免的錯誤
我們在試用其它網站的搜索時發現他們在搜索框的顯示上犯了不少錯。這些都是些很常見的錯誤，如果你希望通過搜索框優化網站性能，那麼就必須得避免這些問題。
1. 隱藏搜索框
我們反復強調搜索框的明確顯示的必要性。不要把搜索框放在網站底部，放在網站的右上角效果會更好，如果網站設計得很混亂，用戶在沒有瀏覽到接近網站的底部時就已經離開網頁了。
2. 切忌輸入區域過短
為用戶提供所需范圍准確的輸入查詢。搜索框輸入區域太短只會讓用戶對搜索框感到失望，因為，他們不會在整個區域輸入想查詢的內容。再者，這也非常不方便用戶閱讀和回應。
3. 切忌提交按鈕過短
受網站設計限制，提交按鈕不應過長，但是太短又會讓用戶感到失望，因為他們在滑鼠點擊的准確性上又會有偏差，從而浪費搜索時間，還會被轉入到到一些不同頁面上。
4. 切勿將搜索框與其它菜單混排在一起
如果把搜索框和與新聞和導航條混排在一起，這是相當讓人不爽的事。這樣用戶很難在郵件訂閱或文章搜索欄中區分出搜索框。因此，搜索框應與其它菜單分開排列。
5. 過度設計搜索框
不要因為搜索框要顯眼，在設計時就受到影響。雖然搜索框要清晰地展現出來，但也不要設計過度，以免影響到它的直觀性。
6. 沒必要提供高級搜索工具
高級搜索當然會有它的用處，但這會使本來簡單的搜索變得更加復雜。因此，沒必要提供高級搜索工具，除非你是為了迎合懂技術的用戶。如果你只是搞定一般用戶，盡量保持搜索選項簡單。
7. 一個搜索框有多個提交按鈕
這條建議非常有意思，我們很少看到有網站設置了多個搜索提交按鈕，比如同時有「go」和「find」。很明顯，這會擾亂按鈕的選擇。
8. 如果在網站設計中，你遵從了以上建議，我們相信一個高效的搜索框能夠起到優化網站性能的作用。