【WEB基礎】HTML & CSS 基礎入門（8）表單

青衫煙雨客發表於2019-05-28
WebHTMLCSS

前面

前面我們已經熟悉了網頁上一些常見的元素，如在網頁上顯示一段文字、一張圖片、一個列表、一張表格等等。這些東西都是事先編輯好顯示在頁面上只提供給使用者看的，實際上，我們可以把這樣的頁面稱之為靜態頁面。有“靜”就有”動”，自然也就有了動態頁面，所謂動態頁面就是在頁面上能提供與使用者產生互動的元素，比如：我們想註冊成為某個網站的會員，就要填寫註冊資訊提交給網站後臺；我們在網上發表評論；我們在網上填寫一些調查問卷等等。

上圖的163郵箱註冊頁面就是一個表單，在表單中有文字框、下拉選單、按鈕等元素，我們可以通過這些元素完成資料的輸入。那麼，輸入的資料該如何收集呢？這個就不是HTML所討論的問題了，屬於後臺開發，如果您感興趣，我們得另開一欄。這裡我們先了解一下表單上的常見元素。

表單元素

?<form> 標籤：用於建立一個表單，表單裡面可以包含文字框、按鈕、下拉選單等元素。

?<input> 元素（輸入元素）：是表單裡面最常用的元素，它有多種不同的型別（比如：單行文字框、密碼框、單選按鈕、核取方塊等等），可以通過【type】屬性來設定。下表列出了常見的型別及說明。

示例程式碼：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form><!--定義一個表單，表單開始-->
        賬號：<input type="text"/><!--單行文字框-->
        <br /><!--換行-->
        密碼：<input type="password"/><!--密碼文字框-->
        <br /><!--換行-->
        <!--下面是單選按鈕，有兩個選項，二選一-->
        性別：<input type="radio" name="sex" value="male"/>男
              <input type="radio" name="sex" value="female"/>女
        <br /><!--換行-->
        <!--下面是核取方塊，可多選-->
        愛好：<input type="checkbox" name="interest" value="ah1" />游泳
              <input type="checkbox" name="interest" value="ah2" />籃球
              <input type="checkbox" name="interest" value="ah3" />跑步
        <br /><!--換行-->
        簡歷：<input type="file" /><!--上傳檔案-->
        <br /><!--換行-->
        <input type="submit" /><!--提交按鈕-->
    </form><!--表單結束-->
</body>
</html>

注意：單選按鈕【radio】和核取方塊【checkbox】裡的【name】屬性必須為同一值，表明這些選項歸屬於同一組。

?<select> 元素（下拉元素）：下拉選單能有效節約頁面的顯示空間，可在多個選項裡選取其中一個。下拉選單由兩個標籤組成：

      ?<select>標籤用於定義了一個下拉選單；

      ?<option>標籤定義了一個下拉選單裡的選項；

示例程式碼：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form>
        請選擇您的專業：
        <select><!--定義一個下拉選單-->
            <option>計算機應用技術</option><!--列表選項-->
            <option>計算機軟體與理論</option>
            <option>計算機體系結構</option>
            <option>軟體工程</option>
        </select>
    </form>
</body>
</html>

?<textarea> 元素（多行文字）：我們可以利用<textarea>元素建立一個文字塊輸入控制元件，用於輸入多行文字，可輸入的字數不受限制。可以通過【rows】和【cols】屬性來規定 textarea 的行數和列數（尺寸大小），也可以使用 CSS 的 height 和 width 屬性。

 示例程式碼：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #textarea2
        {/*設定ID為textarea2的多行文字框的寬、高尺寸*/
            width:200px;
            height:80px;
        }
    </style>
</head>
<body>
    <form>
        個人簡介：<br /><!--該多行文字框的大小為5行30列-->
        <textarea rows="5" cols="30">請介紹一下你自己</textarea>
        <br />
        學習心得：<br /><!--用CSS設定該多行文字框的大小-->
        <textarea id="textarea2">學習心得（不少於400字）</textarea>
    </form>
</body>
</html>

小結一下

小結一下：表單元素的標籤我們初步記住三個即可：

1、輸入元素<input>：這個裡面包括了很多不同型別的標籤，比如：單行文字框、密碼框、按鈕、單選按鈕、多選框等等，它們用【type】屬性加以區分。

2、下拉選單< select >：就是個下拉選單框，沒有其它類別。由兩部分組成：定義標籤< select >和選項標籤< option >，

3、多行文字< textarea >：就是多行文字框，也沒有其它類別。

其實如果我們學習後臺開發，比如利用微軟的VS平臺，在它的工具箱裡有所有的標籤控制元件，我們可以直接拉到編輯視窗直接使用。

-------------------------- END --------------------------

相關文章