2018.6.21 css的应用---注册表格

参与css样式表格的注册表单

填写用户注册信息
用户名: 登录用户名
密码: 登录密码,6个以上字母数字组合,不区分大小写
注册邮箱 录入后不可修改
性别 选择你的性别
出生年月 选择你的出生年月
兴趣标签 生活 娱乐 体育
财经 时尚 新闻
选择你感兴趣的标签
头像 选取你的头像文件
个人简介 请添加你的个人简介情况

hhh

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge" />
        <title>注册信息</title>
        
        <style>
            #info{
                font-size: 20px;
                color: red;
            }
            
            #sub{
                font-family: "微软雅黑";
                font-size: 25px;
                color: aqua;
            }
            
            #res{
                font: "arial black";
                font-synthesis: ;
                font-size: 20px;
            }
        </style>
        
    </head>

    <body>
        <form action="#" method="post">
            <table align="center" width="700px" height="300px" border="1" cellspacing="" cellpadding="">
                <tr id="info">
                    <th colspan="3">填写用户注册信息</th>
                </tr>
                <tr>
                    <td>用户名:</td>
                    <td width="6px"><input type="text" name="uname" placeholder="请输入名字" /></td>
                    <td>登录用户名</td>
                </tr>
                <tr>
                    <td>密码:</td>
                    <td><input type="password" name="pwd" id="pwd" placeholder="请输入密码" />
                        <td>登录密码,6个以上字母数字组合,不区分大小写</td>
                </tr>
                <tr>
                    <td>注册邮箱</td>
                    <td><input type="text" name="email" id="email" value="" /></td>
                    <td>录入后不可修改</td>
                </tr>
                <tr>
                    <td>性别</td>
                    <td><input type="radio" name="sex" id="sex" value="man" />男<input type="radio" name="sex" id="sex" value="woman" />女 </td>
                    <td>选择你的性别</td>
                </tr>
                <tr>
                    <td>出生年月</td>
                    <td>
                        <select name="year">
                            <option value="">2003</option>年
                            <option>2004</option>
                            <option>2005</option>
                            <option>2006</option>
                        </select>年
                        <select name="month">
                            <option value="">1</option>年
                            <option>2</option>
                            <option>3</option>
                            <option>4</option>
                        </select>月

                    </td>
                    <td>选择你的出生年月</td>
                </tr>
                <tr>
                    <td>兴趣标签</td>
                    <td align="center">
                        <input type="checkbox" name="" id="" value="" />生活
                        <input type="checkbox" name="" id="" value="" />娱乐
                        <input type="checkbox" name="" id="" value="" />体育
                        <br />
                        <input type="checkbox" name="" id="" value="" />财经
                        <input type="checkbox" name="" id="" value="" />时尚
                        <input type="checkbox" name="" id="" value="" />新闻
                    </td>
                    <td>选择你感兴趣的标签</td>
                </tr>
                <tr>
                    <td>头像</td>
                    <td><input type="file" name="head" id="" value="浏览" /></td>
                    <td>选取你的头像文件</td>
                </tr>
                <tr>
                    <td>个人简介</td>
                    <td>
                        <textarea name="jieshao " rows="3" cols="30"></textarea>
                    </td>
                    <td>请添加你的个人简介情况</td>
                </tr>
            </table>
            <br />
            <fieldset>
                <legend>hhh</legend>
                <input type="button" name="" id="" value="表格" />
            </fieldset>
            <p align="center">
            <input  type="reset" name="res" id="res" value="取消" />
            <input  type="submit" name="sub" id="sub" value="提交" />
            </p>
        </form>
    </body>
</html>

猜你喜欢

转载自www.cnblogs.com/qichunlin/p/9175078.html
今日推荐