html综合案例

最新推荐文章于 2024-03-11 11:01:03 发布

哇～咔咔

最新推荐文章于 2024-03-11 11:01:03 发布

阅读量139

点赞数

分类专栏：前端开始文章标签： html 前端

本文链接：https://blog.csdn.net/m0_46548202/article/details/121264616

版权

前端开始专栏收录该内容

12 篇文章 0 订阅

订阅专栏

这篇博客介绍了一个使用HTML制作的栾云平个人信息表单案例，详细展示了如何创建包含输入字段、超链接等元素的静态网页。通过这个案例，读者可以学习到HTML在前端开发中的实际应用。

摘要由CSDN通过智能技术生成

一个关于栾云平的表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html综合案例</title>
</head>
<body>
    <h4>栾云平属性表</h4>
    <table width="600">
        <!--第一行-->
        <tr>
            <td>性别</td>
            <td>
                <input type="radio" name="sex" id="nan" checked="checked"> <label for="nan"><img src="man.jpg"> 男</label>
                <input type="radio" name="sex" id="nv"> <label for="nv"><img src="women.jpg"> 女</label>
            </td>
        </tr>
        <!--第二行-->
        <tr>
            <td>生日</td>
            <td>
                <select>
                    <option>--请选择年--</option>
                    <option>1980</option>
                    <option>1981</option>
                    <option>1982</option>
                    <option>1893</option>
                    <option>1984</option>
                    <option>1985</option>
                </select>
                <select>
                    <option>--请选择月--</option>
                    <option>01</option>
                    <option>02</option>
                    <option>03</option>
                    <option>04</option>
                    <option>05</option>
                    <option>06</option>
                    <option>07</option>
                    <option>08</option>
                    <option>09</option>
                    <option>10</option>
                    <option>11</option>
                    <option>12</option>
                </select>
                <select>
                    <option>--请选择日--</option>
                    <option>01</option>
                    <option>02</option>
                    <option>03</option>
                    <option>04</option>
                    <option>05</option>
                    <option>06</option>
                    <option>07</option>
                    <option>08</option>
                    <option>09</option>
                    <option>10</option>
                    <option>11</option>
                    <option>12</option>
                    <option>13</option>
                    <option>14</option>
                    <option>15</option>
                    <option>16</option>
                    <option>17</option>
                    <option>18</option>
                    <option>19</option>
                    <option>20</option>
                    <option>21</option>
                    <option>22</option>
                    <option>23</option>
                    <option>24</option>
                    <option>25</option>
                    <option>26</option>
                    <option>27</option>
                    <option>28</option>
                    <option>29</option>
                    <option>30</option>
                    <option>30</option>
                </select>
            </td>
        </tr>
        <!--第三行-->
        <tr>
            <td>所在地区</td>
            <td><input type="text" value="北京市XX区"></td>
        </tr>
        <!--第四行-->
        <tr>
            <td>婚姻状况</td>
            <td>
                <input type="radio" name="marry" id="wei" checked="checked"><label for="wei">未婚</label>
                <input type="radio" name="marry" id="yi"><label for="yi">已婚</label>
                <input type="radio" name="marry" id="lil"><label for="lil">离婚</label>
            </td>
        </tr>
        <!--第五行-->
        <tr>
            <td>学历</td>
            <td><input type="text" value="幼儿园"></td>
        </tr>
        <!--第六行-->
        <tr>
            <td>圈中好友</td>
            <td>
                <input type="checkbox" checked="checked"> 高峰
                <input type="checkbox"> 孟鹤堂
                <input type="checkbox"> 张九龄
                <input type="checkbox"> 高筱贝
                <input type="checkbox"> 王昊悦
            </td>
        </tr>
        <!--第七行-->
        <tr>
            <td>自我介绍</td>
            <td><textarea></textarea></td>
        </tr>
        <!--第八行-->
        <tr>
            <td></td>
            <td><input type="submit" value="提交表单"> </td>
        </tr>
        <!--第九行-->
        <tr>
            <td></td>
            <td>
                <input type="checkbox" checked="checked"> 确认表单为自己填写
            </td>
        </tr>
        <!--第八行-->
        <tr>
            <td></td>
            <td><a href="https://baike.baidu.com/item/%E6%A0%BE%E4%BA%91%E5%B9%B3/5902476?fr=aladdin" target="_blank">立即登录，查看结果</a></td>
        </tr>
        <!--第九行-->
        <tr>
            <td></td>
            <td>
                <h4>我承诺</h4>
    <ul>
        <li>喜欢栾云平</li>
        <li>并且尊重其搭档</li>
        <li>喜爱听相声</li>
    </ul>
            </td>
        </tr>
    </table>
</body>
</html>

结果如图：
在这里插入图片描述
填写如图：

超链接：

所需图片：

哇～咔咔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html综合案例

一个关于栾云平的表单<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t
复制链接

扫一扫

专栏目录