HTML5搜索條是網頁技術的一種應用,它可以幫助用戶在一定范圍內快速地搜索內容。下面是一個簡單的HTML5搜索條代碼示例:
<form> <input type="search" placeholder="Search..."> <input type="submit" value="Search"> </form>
上面這段代碼用到了 <form>,<input> 和 <submit> 標簽。其中,<form> 標簽用來創建一個搜索表單,<input> 標簽中的 type 屬性為 "search" ,表示這是一個搜索條輸入框,它還設置了 placeholder 屬性來顯示搜索條的提示語。<input> 標簽中的 type 屬性為 "submit" ,表示這是一個提交按鈕,被點擊后會提交搜索表單。
除此之外,還可以通過CSS樣式來美化搜索條,如下:
input[type="search"] { padding: 10px; border: 2px solid #ccc; border-radius: 20px; outline: none; } input[type="submit"] { padding: 10px 20px; background-color: #4CAF50; color: white; border-radius: 20px; border: none; cursor: pointer; }
上面這段CSS代碼為搜索條和提交按鈕設置了一些樣式,如邊框、圓角、背景顏色等,使其更美觀易用。
綜上所述,HTML5搜索條代碼的實現相對簡單,可以通過CSS樣式使其更加美觀。使用HTML5搜索條可以方便用戶在網站中快速搜索所需內容。
上一篇html5攝像頭拍照代碼
下一篇svg和css畫圖