HTML表單格式化示例程序

效果展示:
這裏寫圖片描述

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Stict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang = "zh-CN"> 
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>HTML表單格式化示例程序</title>
</head>

<body>
    <div align="center">
        <form>
            <table border="1" bordercolor="#0000FF" cellpadding="10" cellspacing="0" width="600">
                <tr>
                    <th colspan="2">註冊表單</th>
                </tr>   

                <tr>
                    <td align="center">用戶名稱:</td>

                    <td>
                        <input type="text" name="user" />
                    </td>
                </tr>

                <tr>
                    <td align="center">輸入密碼:</td>

                    <td>
                        <input type="text" name="pwd" />
                    </td>
                </tr>

                <tr>
                    <td align="center">確認密碼:</td>

                    <td>
                        <input type="text" name="repwd" />
                    </td>
                </tr>

                <tr>
                    <td align="center">選擇性別:</td>

                    <td>
                        <input type="radio" name="sex" value="man" /><input type="radio" name="sex" value="woman" /></td>
                </tr>

                <tr>
                    <td align="center">選擇技術:</td>

                    <td>
                        <input type="checkbox" name="tech" value="java" />java
                        <input type="checkbox" name="tech" value="javascript" />javascript
                        <input type="checkbox" name="tech" value="jQuery" />jQuery
                    </td>   
                </tr>

                <tr>
                    <td align="center">選擇國家:</td>

                    <td>
                        <select name="country">
                            <option value="None">請選擇國家</option>
                            <option value="China">中國</option>
                            <option value="USA">美國</option>
                            <option value="Canada">加拿大</option>
                        </select>
                    </td>
                </tr>

                <tr>
                    <th colspan="2">
                        <div align="center">
                            <input type="submit" value="提交數據" />
                            <input type="reset" value="清空數據" />
                        </div>
                    </th>
                </tr>

            </table>
        </form>
    </div>
</body>
</html>

運行方法:代碼直接粘貼到一個html文件中,即可執行,顯示出效果。

原創:http://blog.csdn.net/u013383042/article/details/52434591

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章