HTML表單概念、語法及創建表單，案例

本文轉載自查看原文 2020-01-30 17:06 194 HTML

form 標簽

Input標簽的type屬性值

單行文本域 <input type="text" />

圖像域（圖像提交按鈕）

下拉菜單和列表標簽

select 標簽屬性

form 標簽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1 align="center">注冊信息</h1>
    <hr color="#336699" />
    <form action="action.php" method="post" name="reg" enctype="multipart/form-data">
        <table width="600px" bgcolor="#f2f2f2" align="center">
            <tr>
                <td align="right">姓名：</td>
                <td><input type="text" name="username" size="25" maxlength="6" placeholder="請輸入姓名" /></td>
            </tr>
            <tr>
                <td align="right">郵箱：</td>
                <td><input type="text" name="email" value="@163.com" /></td>
            </tr>
            <tr>
                <td align="right">密碼：</td>
                <td><input type="password" name="password" size="25" maxlength="6" placeholder="請輸入密碼" /></td>
            </tr>
            <tr>
                <td align="right">確認密碼：</td>
                <td><input type="password" name="repassword" size="25" maxlength="6" placeholder="請再次輸入密碼" /></td>
            </tr>
            <tr>
                <td align="right">上傳照片：</td>
                <td><input type="file" nanem="file" /></td>
            </tr>
            <tr>
                <td align="right">性別：</td>
                <td>
                    男<input type="radio" name="gender" value="0">&nbsp;
                    女<input type="radio" name="gender" value="1">&nbsp;
                    保密<input type="radio" name="gender" value="2" checked>
                </td>
            </tr>
            <tr>
                <td align="right">愛好：</td>
                <td>
                    讀書<input type="checkbox" name="hobby" value="0">&nbsp;
                    跳舞<input type="checkbox" name="hobby" value="1">&nbsp;
                    唱歌<input type="checkbox" name="hobby" value="2">&nbsp;
                </td>
            </tr>
            <tr>
                <td align="right">城市：</td>
                <td>
                    <!-- 下拉菜單 -->
                    <select name="city" id="city">
                        <option value="null">請選擇</option>
                        <option value="0">北京</option>
                        <option value="1">上海</option>
                        <option value="2" selected>廣州</option>
                        <option value="3">深圳</option>
                    </select>
                    <!-- 列表展示 -->
                    <select name="city2" id="city2" size="3" multiple>
                        <option value="0">北京</option>
                        <option value="1">上海</option>
                        <option value="2">廣州</option>
                        <option value="3">深圳</option>
                    </select>
                    <!-- 分組下拉菜單 -->
                    <select name="city3" id="city3">
                        <option value="null">--請選擇--</option>
                        <optgroup label="g1">
                            <option value="0">北京</option>
                            <option value="1">上海</option>
                        </optgroup>
                        <optgroup label="g2">
                            <option value="2">廣州</option>
                            <option value="3">深圳</option>
                        </optgroup>
                    </select>
                </td>
            </tr>
            <tr>
                <td align="right">簡介：</td>
                <td>
                    <textarea name="about" id="about" cols="50" rows="6" placeholder="請輸入個人簡介"></textarea>
                </td>
            </tr>
            <tr>
                <td align="center" colspan="2">
                    <input type="button" value="來點我" name="button">
                    <input type="submit" name="submit">
                    <input type="reset" name="submit">
                    <input type="image" name="imageBtn" src="button.png" width="70px">
                </td>
            </tr>
            <tr>
                <td>
                    <input type="hidden" name="hidden" value="注冊信息補充" />
                </td>
                <td></td>
            </tr>
        </table>
    </form>
</body>
</html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 HTML之基本語法（表單） HTML表格概念、語法、操作、案例 HTML5表單驗證（4個實用的表單美化案例）什么是PHP表單和表單的創建 HTML 表單 HTML表單 HTML5中表單的創建 jQuery表單驗證案例 HTML——form表單 html之form表單