前端，简单表单，图上

img


前端，简单做一个图上表单，不用不麻烦的，简单表单，和图上一样即可。

就input，type为checkbox radio ，color，date和select，textarea的组合，示例如下

<!doctype html>
<meta charset="utf-8" />
<style>
    body{background:#e4dede}
    tr td:first-of-type{text-align:right}
    tr td.center{text-align:center}
</style>
<table border="0" width="600" align="center" cellspacing="5">
    <tr><td colspan="2" class="center"><h1>用户注册</h1></td></tr>
    <tr>
        <td>用户名：</td>
        <td><input type="text" /></td>
    </tr>
    <tr>
        <td>密码：</td>
        <td><input type="password" /></td>
    </tr>
    <tr>
        <td>请选择您的性别：</td>
        <td><input type="radio" value="男" name="sex" />男　<input type="radio" name="sex" value="女" />女　</td>
    </tr>
    <tr>
        <td>请选择您的爱好：</td>
        <td>
            <input type="checkbox" value="计算机" name="hobby" />计算机
            <input type="checkbox" value="心理学" name="hobby" />心理学
            <input type="checkbox" value="管理学" name="hobby" />管理学
            <input type="checkbox" value="人际交往" name="hobby" />人际交往
            <input type="checkbox" value="历史" name="hobby" />历史
        </td>
    </tr>
    <tr>
        <td>邮箱：</td>
        <td><input type="email" /></td>
    </tr>
    <tr>
        <td>附加文件：</td>
        <td><input type="file" /></td>
    </tr>
    <tr>
        <td>您的家庭住址是：</td>
        <td>
            <select>
                <option>重庆</option>
                <option>北京</option>
                <option>上海</option>
                <!--更加多option-->
            </select>
        </td>
    </tr>
    <tr>
        <td>您的收货地址是：</td>
        <td>
            <select multiple size="4">
                <option>请选择收货地址</option>
                <option>永川</option>
                <option>江北</option>
                <option>万州</option>
                <option>奉节</option>
            </select>
        </td>
    </tr>
    <tr>
        <td>请留下建议或意见：</td>
        <td>
            <textarea rows="5" cols="40"></textarea>
        </td>
    </tr>
    <tr>
        <td>请选择您喜欢的颜色：</td>
        <td><input type="color" value="#ff0000" /></td>
    </tr>
    <tr>
        <td>注册时间：</td>
        <td><input type="datetime-local" /></td>
    </tr>
    <tr>
        <td colspan="2" class="center">
            <input type="submit" value="注册" />
            <input type="reset" value="重置" />
        </td>
    </tr>
</table>