零基礎(chǔ)教你學(xué)前端-28，文字框與密碼框

節(jié)課，我們學(xué)習(xí)表單的單行文本框控件：文本框和密碼框。

文本框和密碼框在互聯(lián)網(wǎng)的世界隨處可見，例如：QQ登錄頁面、微信小程序訪客預(yù)約界面、12306購票系統(tǒng)的注冊頁面，以及流調(diào)信息的填寫頁面，都使用到了文本框或密碼框。

文本框，就是讓用戶輸入文本的一個控件區(qū)域，該區(qū)域輸入內(nèi)容的時候，文本不會折行顯示，只會橫向排列，如果輸入的文本超出了輸入框默認(rèn)的寬度，可以通過鼠標(biāo)拖拽或鍵盤的右箭頭按鈕敲擊，來查看輸入的全部信息。

使用HTML如何實現(xiàn)這個單行文本框呢？

我們可以通過在 form 標(biāo)簽里，嵌入 input 標(biāo)簽來實現(xiàn)。input 就是輸入的意思。

它是一個單標(biāo)簽：語法是：尖角號 input。光有這個標(biāo)簽還不夠，需要給它定義一個重要的屬性 type，也就是輸入控件的類型。

單行文本框的 type 值為 text，也就是文本，其實這也是 type 屬性的默認(rèn)值。

密碼框的 type 值為 password，意為口令。密碼輸入框也是單行的文本輸入框，不過在用戶輸入的時候，內(nèi)容是被屏蔽的，只顯示小黑點或者小星號，這樣可以防止別人窺探你的密碼。

通過文本框和密碼框兩個控件的定義，我們可以得出一個小結(jié)論：表單中的 input 輸入控件，數(shù)據(jù)采集的方式是由 type 屬性的值決定的。

我們來模擬實現(xiàn)一個簡單的登錄框。用戶名是普通的文本輸入框，密碼是密碼輸入框。

打開編輯器，新建一個 input_text_password.html 文件，自動補(bǔ)全基礎(chǔ)代碼，在body標(biāo)簽內(nèi)部編寫一個 form 表單標(biāo)簽，在 form 標(biāo)簽里面添加文本請輸入用戶名： (冒號讀出來) ，緊接著添加一個 input 標(biāo)簽。保存。

用瀏覽器打開頁面，一個單行的文本輸入框就做好了，可以輸入點內(nèi)容測試一下。

你可能會問，沒有定義 type 屬性，怎么能有輸入框呢？剛才我們講了：input 控件的 type 屬性默認(rèn)值就是單行普通文本框。

返回編輯器，給 input 標(biāo)簽定義 type 屬性，取值為 text。保存。

回到瀏覽器，刷新，效果和剛才的一樣。

返回編輯器，在輸入框結(jié)尾的位置添加 br 標(biāo)簽。回車換行。再輸入文本請輸入密碼：，緊接著再添加一個 input 標(biāo)簽，type 屬性的值為 password。保存。

回到瀏覽器，刷新，輸入一些內(nèi)容，效果實現(xiàn)了。

表單中使用頻率最高的兩個控件，輸入框和密碼框就講解完了，快來一起試試吧！

文章配套視頻鏈接「鏈接」

單標(biāo)簽

常見的語句：

form：表單標(biāo)簽格式

作用：用來收集用戶輸入信息如：登入、注冊、搜索商品等
action：開始網(wǎng)址
method：get和post等等
text （明文）：用戶名格式
password ：（密文）密碼
radio ：單選框性別格式性別是單選,單選類型是radio,注意name要加上sex
checkbox：復(fù)選框
textarea：文本框
file：上傳文件
select：下拉選擇框
button：按鈕
reset：重置
submit：提交

詳解：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<p>

<input type="radio" name="sex" id="" />男

<input type="radio" name="sex" id="" />女

</p>

<p>

<input type="checkbox" name="" id="" value="" />linux

<input type="checkbox" name="" id="" value="" />mysql

<input type="checkbox" name="" id="" value="" />html

<input type="checkbox" name="" id="" value="" />python

</p>

<p>學(xué)歷

</select>

</p>

</p>

</form>

</body>

</html>

家好，今天給大家介紹一款，JavaScript+css實現(xiàn)的登錄注冊頁面web前端html源碼（圖1），布局合理。送給大家哦，獲取方式在本文末尾。

圖1

文本框獲取焦點動畫特效（圖2）

圖2

源碼完整，需要的朋友可以下載學(xué)習(xí)（圖3）

圖3

本源碼編碼：10201，需要的朋友，訪問下面鏈接后，搜索10201，即可獲取。

「鏈接」

在線咨詢

上一篇：js獲取每個月最大天數(shù)，實現(xiàn)日歷必要條件
下一篇：武漢HTML5培訓(xùn)費用是多少錢？貴不貴呢？

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

零基礎(chǔ)教你學(xué)前端-28，文字框與密碼框

家好，今天給大家介紹一款，JavaScript+css實現(xiàn)的登錄注冊頁面web前端html源碼（圖1），布局合理。送給大家哦，獲取方式在本文末尾。

文本框獲取焦點動畫特效（圖2）

源碼完整，需要的朋友可以下載學(xué)習(xí)（圖3）

本源碼編碼：10201，需要的朋友，訪問下面鏈接后，搜索10201，即可獲取。

「鏈接」

您的項目需求