html搜尋框怎麼設定？ html搜尋框input標籤的使用方法實例
- 寻∝梦原創
- 2018-09-04 16:44:5662306瀏覽
本篇文章主要講述的是關於HTML 搜尋框的設置，還有html 搜尋框input標籤的一些使用方法實例，接下來就讓我們一起來閱讀這篇關於html 搜尋框的文章吧
首先我們來設定一個簡單的搜尋框：
<input type="text" class="aa"><input type="button" value="搜索" class="bb">
這是一個最簡單樣式的搜尋框，沒有很複雜的樣式。如果需要設計樣式可以依照class="aa"來寫樣式，.aa{}在括號中加入程式碼即可，當然這是框的樣式，按鈕的樣式.bb{}在括號中填入程式碼即可。在瀏覽器中顯示的效果如圖：
這就是一個簡單的搜尋框的程式碼。
現在說說input標籤的使用方法，先看個實例
#我們來看點更高深的搜尋框完整的程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>PHP中文网</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
#box{
width: 380px;
margin: 30px auto;
font-family: 'Microsoft YaHei';
font-size: 14px;
}
input{
width: 260px;
border: 1px solid #e2e2e2;
height: 30px;
float: left;
background-image: url(images/search.jpg);
background-repeat: no-repeat;
background-size: 25px;
background-position:5px center;
padding:0 0 0 40px;
}
#search{
width: 78px;
height: 32px;
float: right;
background: black;
color: white;
text-align: center;
line-height: 32px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="box">
<input type="text" name="search" placeholder="请输入关键字">
<div id="search">搜索</div>
</div>
</body>
</html>這個程式碼看效果圖：
這個效果就比第一個好看太多了，就是多了點程式碼，都是基礎的css樣式的知識，如果有不懂的可以在下方留言。
注意: 元素是空的,它只包含標籤屬性。
提示: 你可以使用
好了，以上就是關於我們這篇關於html input標籤的用法，有問題的可以在下面留言。
【小編推薦】
html空格程式碼怎麼寫？ html空格程式碼的表現方式總結
html下拉式選單怎麼做？ html下拉選單的程式碼實例介紹
以上是html搜尋框怎麼設定？ html搜尋框input標籤的使用方法實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn