本篇文章主要的為大家講述了HTMLinput標(biāo)簽如何制作一個(gè)登陸界面的介紹，有文本框、密碼框、單選框、多選框、提交和重置按鈕的使用說明，完全的解釋了HTML表單input標(biāo)簽的使用詳情了?，F(xiàn)在讓我們來看看這篇文章吧
web前端全棧資料粉絲福利（面試題、視頻、資料筆記、進(jìn)階路線）
一、首先我們來看看如何制作文本框：
<form action="url地址" method=“get/post” name="表單名稱">
<p>這是文本框</p>
用戶名：<input type="text" name="username">
這樣的一個(gè)基本的用戶名的文本框就出來了，我們來看看效果：
如上圖就是一個(gè)用戶名的輸入框，是不是很熟悉，很多網(wǎng)站都有這個(gè)的，不過他們添加了很多別的元素讓表單變的更漂亮了，這個(gè)以后我們會(huì)學(xué)到的。
二、現(xiàn)在我們?cè)賮碚f說如何制作密碼框：
我們知道密碼是個(gè)人隱私，每個(gè)人都不希望自己的密碼在自己輸入的時(shí)候被別人看見，所以基本上所有網(wǎng)站的密碼框內(nèi)輸入的密碼都是保密的，一輸入就是以星號(hào)或者以小圓點(diǎn)的方式顯示。
現(xiàn)在讓我們來看看這種input標(biāo)簽的密碼框是如何制作的吧。
<form action="url地址" method=“get/post” name="表單名稱">
<p>這是文本框</p>
用戶名：<input type="text" name="username"></br>
密 碼：<input type="password" name="password">
如上面代碼，我們應(yīng)該能猜到這是干什么的吧，先看看效果圖再說：
你看，如果沒有那三個(gè)空格符，密碼和用戶名就會(huì)不對(duì)齊，一般都是用層疊樣式表來對(duì)齊的，但是現(xiàn)在我們只講HTML，現(xiàn)在還不說css,所以現(xiàn)在我用了三個(gè)空格符來把密碼和用戶名對(duì)齊，這也是最簡單的辦法。
可能是因?yàn)樾【幱袕?qiáng)迫癥吧，不管怎么說，這樣的效果才是任何人都能看的，如果沒有對(duì)齊，就難看了很多。
三、密碼框看完了，現(xiàn)在我們來看看單選框如何的制作吧：
我們這里就以單選男女為例（當(dāng)然第三類的就不說了）
<form action="url地址" method=“get/post” name="表單名稱">
<p>這是文本框</p>
用戶名：<input type="text" name="username"></br>
密 碼：<input type="password" name="password">
<p>單選框</p>
單選：<input type="radio" name="sex" value="nan">男
<input type="radio" name="sex" value="nv">女
這個(gè)來看看效果吧
這就是單選框，也是常用的框架吧，男和女只能選一個(gè)，不能兩個(gè)都選的。
四、有了單選框，那接下來就說說多選框吧：
<form action="url地址" method=“get/post” name="表單名稱">
<p>這是文本框</p>
用戶名：<input type="text" name="username"></br>
密 碼：<input type="password" name="password">
<p>單選框</p>
單選：<input type="radio" name="sex" value="nan">男
<input type="radio" name="sex" value="nv">女
<p>多選框</p>
多選：<input type="checkbox" name="n">吃飯
<input type="checkbox" name="n">睡覺
<input type="checkbox" name="n">打豆豆
<input type="checkbox" name="n">喝水
效果如圖
這圖把上面的東西都選上了，多選框是都能選上，當(dāng)然還可以設(shè)置默認(rèn)選擇一個(gè)的，只需要加checked=“checked”這個(gè)屬性，在哪個(gè)多選框內(nèi)添加都能在網(wǎng)頁中一刷新就能顯示出來，這就是默認(rèn)選中的效果。
五、說了這么多，接下來就說說最后的提交按鈕和重置按鈕吧：
這兩個(gè)都是非常重要的按鈕，重置按鈕能把你網(wǎng)頁上選中或者填寫的東西一鍵恢復(fù)原樣。提交是把你所有填寫和選中的都提交給后臺(tái)。下面來看代碼：
<form action="url地址" method=“get/post” name="表單名稱">
<p>這是文本框</p>
用戶名：<input type="text" name="username"></br>
密 碼：<input type="password" name="password">
<p>單選框</p>
單選：<input type="radio" name="sex" value="nan">男
<input type="radio" name="sex" value="nv">女
<p>多選框</p>
多選：<input type="checkbox" name="n">吃飯
<input type="checkbox" name="n">睡覺
<input type="checkbox" name="n">打豆豆
<input type="checkbox" name="n">喝水
<p>重置按鈕</p>
重置：<input type="reset" name="">
<p>提交按鈕</p>
提交：<input type="submit" name="">
由于沒有后臺(tái)，所以就沒填寫后臺(tái)地址了。不過不影響效果
運(yùn)行出來可以自己看結(jié)果哦，需要更多資料的小伙伴可以關(guān)注我??！
