HTML基础：表单与表格的练习

shangan_3

已于 2024-05-29 17:10:03 修改

阅读量71

点赞数 2

分类专栏： web前端基础练习文章标签：前端 javascript 开发语言

于 2024-05-21 19:08:17 首次发布

本文链接：https://blog.csdn.net/shangan_3/article/details/139100159

版权

web前端基础练习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<h4>青春不常在，抓紧谈恋爱</h4>
<table width="500px">
    <tr>
        <td >性别</td>        
        <td><input type="radio" name="q" checked><img src="./man.jpg" >男
        <input type="radio" name="q"><img src="./women.jpg" >女</td>
    </tr>
    <tr>
        <td>生日</td>
        <td><input type="date"></td>
    </tr>
    <tr>
        <td >所在地区</td>
        <td><input type="text" value="请输入所在地区"></td>
    </tr>
    <tr>
        <td>婚姻状况</td>
        <td><input type="radio" name="w">未婚
            <input type="radio" name="w">已婚
               <input type="radio" name="w">离婚
        </td>
    </tr>
    <tr>
        <td>学&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;历</td>
        <td><select >
            <option value="">请选择学历</option>
            <option value="学历">本科</option>
            <option value="">专科</option>
        </select></td>
    </tr>
    <tr>
        <td>喜欢的类型</td>
        <td>
            <input type="checkbox">妩媚的
            <input type="checkbox">可爱的
            <input type="checkbox">小鲜肉
            <input type="checkbox">老腊肉
        </td>
    </tr>
    <tr>
        <td>自我介绍</td>
        <td><textarea rows="3" cols="20"></textarea></td>
    </tr>
    <tr >
        <td></td>
        <td ><input type="submit" value="免费注册"></td></tr>
        <tr>
            <td></td>
        <td><input type="checkbox">我同意注册条款和会员加入标准</td>
        </tr>
        <tr>
            <td></td>
            <td> <a href="#">我是会员，立即登录</a></td>
        </tr>
        <tr>
            <td></td>
            <h2>我承诺</h2>
        </tr>
        <tr>
            <td></td>
            <td colspan="3">
                <ul>
                    <li>年满18岁、单身</li>
                    <li>抱着严肃的态度</li>
                    <li>真诚寻找另一半</li>
                </ul>
            </td>
        </tr>
</table>
        
</body>
</html>

输出效果为