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

時間 2019-11-18

標籤 WEB基礎 html css 基礎入門表單欄目 HTML 简体版

原文原文鏈接

前面

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

上圖的163郵箱註冊頁面就是一個表單，在表單中有文本框、下拉列表、按鈕等元素，咱們能夠經過這些元素完成數據的輸入。那麼，輸入的數據該如何收集呢？這個就不是HTML所討論的問題了，屬於後臺開發，若是您感興趣，咱們得另開一欄。這裏咱們先了解一下表單上的常見元素。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】屬性必須爲同一值，代表這些選項歸屬於同一組。ui

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

🅰<select>標籤用於定義了一個下拉列表；rest

🅱<option>標籤訂義了一個下拉列表裏的選項；code

示例代碼：orm

<!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>