1. 程式人生 > >Python學習:HTML表單

Python學習:HTML表單

HTML表單用於從客戶端收集使用者在瀏覽器中的輸入,是HTML實現客戶端與伺服器互動的核心方法。
####一、文字輸入

分類 標籤
單行文字 <input type="text">
多行文字 <textarea>
密碼框 <input type="password">

####二、單項選擇

分類 標籤
單選按鈕 <input type="radio">
下拉列表 <select>/<option>

####三、多項選擇
標籤:<input type="checkbox">


####四、檔案上傳
標籤:<input type="file">
####五、邊框
標籤:<fieldset>
####六、整合練習
使用者註冊介面

<head>
    <meta charset="UTF-8">
    <title>使用者註冊</title>
</head>
<body>
    <from name="input" action="url_from_action">
        <fieldset>
            <legend>使用者註冊</legend>
            <!----------此處放置所有的輸入控制元件----------->
            <table>
            <!----------文字輸入----------->
                <tr>
                    <td>使用者名稱:</td>
                    <td><input type = "text" name = "name"></td>
                    <td>密碼:</td>
                    <td><input type = "password" name = "pass"></td>
                </tr>
                <tr>
                    <td colspan = "2">備註:</td>
                </tr>
                <tr>
                    <td colspan = "4"><textarea name = "comment" rows = "5" cols = "60"></textarea></td>
                </tr>
                <!----------單選按鈕----------->
                <tr>
                    <td>性別:</td>
                    <td>男性<input type="radio" checked ="checked" name ="Sex" value="male" /></td>
                    <td>女性<input type="radio" name="Sex" value="female" /></td>
                </tr>
                <!----------下拉選單----------->
                <tr>
                    <td>學歷:</td>
                    <td colspan="2">
                        <select name="grade">
                            <option value="middle_school">高中及以下</option>
                            <option value="high_school">專科</option>
                            <option value="bachlor" selected="selected">本科</option>
                            <option value="master">研究生及以上</option>
                        </select>
                    </td>
                </tr>
                <!----------多項選擇----------->
                <tr>
                    <td rowspan="2">興趣愛好:</td>
                    <td>運動:<input type="checkbox" name="sport"></td>
                    <td>電影:<input type="checkbox" name="movie"></td>
                    <td>音樂:<input type="checkbox" name="music"></td>
                </tr>
                <tr>
                    <td>程式設計:<input type="checkbox" name="programming"></td>
                    <td>下廚:<input type="checkbox" name="cooking"></td>
                    <td>旅遊:<input type="checkbox" name="tour"></td>
                </tr>
                <!----------檔案上傳----------->
                <tr>
                    <td>頭像上傳:</td>
                    <td><input type="file" name="pic" accept=".png,.jpg,.gif"></td>
                </tr>
            </table>
            <input type="submit" value="提交">
        </fieldset>
    </from>
</body>

執行效果圖如下:
使用者註冊介面.PNG