單行文本框比較常見,我們經常在用戶登錄模塊用到。
語法:
<input type="text"/>
舉例:
在線測試<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <form name="form1" method="post" action="index.html"> 姓名:<input type="text"/> </form> </body> </html>
在浏覽器預覽效果如下:
文本框text有以下幾個屬性可以設置:
屬性的設置沒有先後順序。input還有一個name屬性,在XHTML中,我們已經摒棄這個屬性了。因為只需要掌握以上3個就行了。
語法:
<input type="text" value="默認文字" size="文本框長度" maxlength="最多輸入字符數"/>
舉例:
在線測試<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <form name="form1" method="post" action="index.html"> 姓名:<input type="text" value="" size="15" maxlength=""/><br/> 年齡:<input type="text" value="18" size="3" maxlength="3"/> </form> </body> </html>
在浏覽器預覽效果如下:
對於以上代碼,對於“年齡”那一個文本框,設置默認值為18,最多可輸入3個字符(沒有誰那麼牛逼,歲數是四位數的吧=-=!)。大家在“在線代碼測試工具”裡面試著輸入,會發現浏覽器只限定你最多輸入3個數字。