表格综合练习

复制代码
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <style>

    .container{
        width: 40%;
        margin: 20px auto;
    }
    .common{
        width:230px;
        height: 30px;
    }
    span{
        display:inline-block;
        width: 150px;

        text-align: right;
    }
    div{
        margin-bottom: 10px;
    }
    </style>
</head>
<body>

    <form class="container">
    <!-- ********* Begin ********* -->
     <div>
        <span>用户名：</span> 
            <input type="text" class="common"/> 
    </div>
     <div>
        <span>昵称：</span> 
            <input type="text" class="common"/> 
    </div>
    <div>
        <span>性别：</span>
        <label for="male" name="sex">
            <input type="radio" id="male"/>男
        </label>
        <label for="female" name="sex">
            <input type="radio" id="female"/>女
        </label>
        <label for="other" name="sex">
            <input type="radio" id="other" disabled="disabled"/>保密
        </label>
    </div>
    <div>
        <span>教育程度：</span>
        <select class="common"/>
            
            <option>高中</option>
            <option>中专</option>
            <option>大专</option>
            <option selected="selected">本科</option>
            <option>硕士</option>
            <option>博士</option>
            <option>其他</option>
        </select>
    </div>
    <div>
        <span>婚姻状况：</span>
        <label for="single" name="state">
            <input type="radio" checked="checked" id="single"/>未婚
        </label>
        <label for="married" name="state">
            <input type="radio" id="married"/>已婚
        </label>
        <label for="secret" name="state">
            <input type="radio" id="secret"/>保密
        </label>
    </div>
    <div>
        <span>兴趣爱好：</span>
        <label for="football" name="hobby">
            <input type="checkbox" id="football"/>踢足球
        </label>
        <label for="basketball" name="hobby">
            <input type="checkbox" id="basketball"/>打篮球
        </label>
        <label for="film" name="hobby">
            <input type="checkbox" id="film" checked="checked"/>看电影
        </label>
    </div>
    <div>
        <span>描述自己的特点： </span> 
        <textarea maxlength="20" class="common"></textarea>
    </div>
    <div >
    <span></span>
    <input type="submit" value="提交" class="common"/>
    </div>
<!-- ********* End ********* -->
</form>
</body>
</html>
复制代码

 

posted @   小耿想努力呀  阅读(30)  评论(0)  编辑  收藏  举报
相关博文：
· 综合案例-注册页面
· html链接
· HTML表单标签
· 05form表单
· 表格、表单标签
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 开源Multi-agent AI智能体框架aevatar.ai，欢迎大家贡献代码
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· AI技术革命，工作效率10个最佳AI工具
点击右上角即可分享
微信分享提示