DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML入門知識 >> 9.4 單行文本框text
9.4 單行文本框text
編輯:HTML入門知識     

一、文本框text簡介

單行文本框比較常見,我們經常在用戶登錄模塊用到。

語法:

<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屬性

文本框text有以下幾個屬性可以設置:

文本框text屬性 文本框text屬性 說明 value 定義文本框的默認值,也就是文本框內的文字 size 定義文本框的長度,以字符為單位 maxlength 設置文本框中最多可以輸入的字符數

屬性的設置沒有先後順序。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個數字。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved