整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
節課，我們學習表單的 單行文本框控件：文本框和密碼框。
文本框和密碼框在互聯網的世界隨處可見，例如：QQ登錄頁面、微信小程序訪客預約界面、12306購票系統的注冊頁面，以及流調信息的填寫頁面，都使用到了文本框或密碼框。
文本框，就是讓用戶輸入文本的一個控件區域，該區域輸入內容的時候，文本不會折行顯示，只會橫向排列，如果輸入的文本超出了輸入框默認的寬度，可以通過鼠標拖拽或鍵盤的右箭頭按鈕敲擊，來查看輸入的全部信息。
使用HTML如何實現這個單行文本框呢？
我們可以通過在 form 標簽里，嵌入 input 標簽來實現。input 就是輸入的意思。
它是一個單標簽：語法是：尖角號 input。光有這個標簽還不夠，需要給它定義一個重要的屬性 type，也就是輸入控件的類型。
單行文本框的 type 值為 text，也就是文本，其實這也是 type 屬性的默認值。
密碼框的 type 值為 password，意為口令。密碼輸入框也是單行的文本輸入框，不過在用戶輸入的時候，內容是被屏蔽的，只顯示小黑點或者小星號，這樣可以防止別人窺探你的密碼。
通過文本框和密碼框兩個控件的定義，我們可以得出一個小結論：表單中的 input 輸入控件，數據采集的方式是由 type 屬性的值決定的。
我們來模擬實現一個簡單的登錄框。用戶名是普通的文本輸入框，密碼是密碼輸入框。
打開編輯器，新建一個 input_text_password.html 文件，自動補全基礎代碼，在body標簽內部編寫一個 form 表單標簽，在 form 標簽里面添加文本請輸入用戶名： (冒號讀出來) ，緊接著添加一個 input 標簽。保存。
用瀏覽器打開頁面，一個單行的文本輸 入框就做好了，可以輸入點內容測試一下。
你可能會問，沒有定義 type 屬性，怎么能有輸入框呢？剛才我們講了：input 控件的 type 屬性默認值就是單行普通文本框。
返回編輯器，給 input 標簽定義 type 屬性，取值為 text。保存。
回到瀏覽器，刷新，效果和剛才的一樣。
返回編輯器，在輸入框結尾的位置添加 br 標簽。 回車換行。再輸入文本請輸入密碼：，緊接著再添加一個 input 標簽，type 屬性的值為 password。保存。
回到瀏覽器，刷新，輸入一些內容，效果實現了。
表單中使用頻率最高的兩個控件，輸入框和密碼框就講解完了，快來一起試試吧！
文章配套視頻鏈接「鏈接」
單標簽
常見的語句：
form：表單標簽格式
作用：用來收集用戶輸入信息如：登入、注冊、搜索商品等
action：開始網址
method：get和post等等
text （明文）：用戶名格式
password ：（密文）密碼
radio ：單選框 性別格式 性別是單選,單選類型是radio,注意name要加上sex
checkbox：復選框
textarea：文本框
file：上傳文件
select：下拉選擇框
button：按鈕
reset：重置
submit：提交
詳解：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表單標簽</title>
</head>
<body>
<form action="https://hao.360.com/" method="post">
<p>賬號:<input type="text" /></p>
<p>密碼：<input type="password" /></p>
<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>學歷
<select name="">
<option value="">請選擇學歷</option>
<option value="">小學</option>
<option value="">初中</option>
<option value="">高中</option>
<option value="">大學</option>
</select>
</p>
<p>自我介紹：<br />
<textarea name="" rows="10" cols="30"></textarea>
</p>
<input type="reset" value="重置"/>
<input type="submit" value="提交"/>
<input type="button" value="按鈕"/>
</form>
</body>
</html>
圖1
圖2
圖3
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
