站長(zhǎng)資訊網(wǎng)
之前的文章《手把手教你給html文本添加有序列表與無(wú)序列表（代碼詳解）》中，給大家介紹了怎么使用html給文本添加有序列表與無(wú)序列表。下面本篇文章給大家介紹html網(wǎng)頁(yè)中如何實(shí)現(xiàn)輸入框效果，我們一起看怎么做。
<input> 標(biāo)簽指定：搜集用戶信息并且輸入字段很多種形式，比如：文本字段、復(fù)選框、單選按鈕、等等。
添加輸入框的方法
<input type="">這個(gè)type是告訴它是個(gè)什么類型，比如txt文本類型，就是這個(gè)默認(rèn)的一個(gè)類型，給大家通過(guò)代碼示例看看是什么樣呢？
代碼示例
<body> <input type="text"> </body>
代碼效果
代碼結(jié)束出來(lái)，相信大家這個(gè)都也挺眼熟的，這就是一個(gè)輸入框，咱前面可以再加上一行字用<p>來(lái)試一試。
代碼示例
<body> <p>用戶名：</p> <input type="text"> </body>
代碼效果
能看到用戶名，但是用戶名后邊就會(huì)有什么，添加密碼，我們?yōu)榱诉@個(gè)稍微看的舒坦一點(diǎn)，用<div>把它弄成一行。
代碼示例
<body> <div> 用戶名： <input type="text"> </div> </body>
代碼效果
結(jié)束出來(lái)就差不多是這么一個(gè)狀態(tài)然后這里邊是不是還有密碼
代碼示例
<body> <div> 用戶名： <input type="text"> </div> <div> 密碼： <input type="text"> </div> </body>
代碼效果
有一點(diǎn)不合適了，因?yàn)榇蠹夷芸吹竭@密碼，正常來(lái)說(shuō)密碼是看不見(jiàn)。使用password實(shí)現(xiàn)密碼效果。
代碼示例
密碼： <input type="password">
代碼效果
密碼就是差不多這么一個(gè)狀態(tài)，這個(gè)網(wǎng)頁(yè)中比較常見(jiàn)的一種東西。接下來(lái)復(fù)選框怎么實(shí)現(xiàn)呢？可以使用checkbox來(lái)實(shí)現(xiàn)
代碼示例
<div> 1選項(xiàng) <input type="checkbox"> 2選項(xiàng) <input type="checkbox"> 3選項(xiàng) <input type="checkbox"> </div>
代碼效果
這是復(fù)選框，接下來(lái)咱們稍微說(shuō)一下單選框，這個(gè)網(wǎng)上比較見(jiàn)常用的，它都是用咱們這個(gè)，input是可以做到，使用radio來(lái)實(shí)現(xiàn)單選框。
代碼示例
單選： <input type="radio">
代碼效果
除了這個(gè)radio，color也是一個(gè)比較在的一個(gè)東西。
代碼示例
<div> <input type="color"> </div>
代碼效果
大家能看到就是這個(gè)東西，有點(diǎn)意思，它能直接改變顏色。
ok，完成！
推薦學(xué)習(xí)：Html視頻教程
