<form action="/" method="get">
<input type="text" placeholder="搜索">
<button type="submit">搜索</button>
</form>

代碼中，我們使用了placeholder屬性來為搜索欄添加默認文本，它將在用戶未輸入任何內(nèi)容時顯示。此外，我們還創(chuàng)建了一個提交按鈕來觸發(fā)搜索操作。

接下來，我們可以添加CSS樣式，以使搜索欄更加漂亮和易于使用。

.form-wrapper {
display: flex;
align-items: center;
justify-content: center;
}
.form-wrapper input[type="text"] {
padding: 10px 16px;
border: none;
border-radius: 25px;
font-size: 16px;
outline: none;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.form-wrapper button[type="submit"] {
padding: 12px 36px;
background: #5cb85c;
border: none;
color: #fff;
font-size: 16px;
border-radius: 25px;
cursor: pointer;
transition: background-color 0.2s ease;
}
.form-wrapper button[type="submit"]:hover {
background: #449d44;
}

以上代碼將搜索欄樣式包裝在一個.form-wrapper元素中。我們使用flexbox布局來使搜索欄在頁面上居中，將輸入文本框與提交按鈕對齊并設(shè)置其樣式。

最后，我們需要將CSS樣式與HTML代碼組合使用。

<div class="form-wrapper">
<form action="/" method="get">
<input type="text" placeholder="搜索">
<button type="submit">搜索</button>
</form>
</div>

將以上HTML和CSS代碼插入到您的網(wǎng)頁中去，您將可以獲得一個漂亮的搜索欄，以吸引用戶的注意力，并提供舒適體驗。