首先我們來設定一個簡單的搜尋方塊：
<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>topic.alibabacloud.com</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樣式的知識，如果有不懂的可以在下方留言。
注意: <input> 元素是空的,它只包含標籤屬性。
提示: 你可以使用 <label> 元素來定義 <input> 元素的標註。
好了，以上就是關於我們這篇關於html input標籤的用法，有問題的可以在下方留言。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
