HTML案例（一）

最新推荐文章于 2024-06-02 15:45:53 发布

寒涵含

最新推荐文章于 2024-06-02 15:45:53 发布

阅读量139

点赞数 3

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/qq_73625238/article/details/136094038

版权

单身狗的福音

（1）性别，婚姻情况（表单-单选属性）

1.制作时，引入表格可以使页面工整

2.注意使用label让选项更加人性化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>未来可期</title>
</head>
<body>
    <h4>单身狗奇遇记，喜欢什么填什么</h4>
    <table width="600" border="0">
        <!-- 第一行，性别 -->
        <tr>
            <th>性别：</th> 
            <td><input type="radio" name="sex" value="男" checked for="man"><label id="man">男</label>
                <input type="radio" name="sex" value="女" for="weman"><label id="weman">女</label>
                <input type="radio" name="sex" value="都可以" for="all"><label id="all">都可以</label>
            </td>
        </tr>

 <!-- 第四行，婚姻情况 -->
        <tr>
            <th>婚姻情况：</th> 
            <td><input type="radio" name="marriage" value="未婚" checked for="wei"><label id="wei">未婚</label>
                <input type="radio" name="marriage" value="已婚" for="yi"><label id="yi">已婚（？？？为啥会有已婚）</label>
                <input type="radio" name="marriage" value="离婚" for="li"><label id="li">离婚</label>
            </td>
        </tr>

（2）生日（表单-下拉列表）

1.第一种情况用于联系熟练度，正常直接使用date元素就可以

2.使用表单元素时注意<form>，养成习惯

<!-- 第二行，生日 -->
        <tr>
            <th>生日：</th>
            <td>
                <form>
                    <select>
                        <option>请选择年份</option>
                        <option>2000</option>
                        <option>2001</option>
                        <option>2003</option>
                    </select>
                    <select>
                        <option>请选择月份</option>
                        <option>1月</option>
                        <option>2月</option>
                        <option>3月</option>
                    </select>
                    <select>
                        <option>请选择日期</option>
                        <option>1号</option>
                        <option>2号</option>
                        <option>3号</option>
                    </select>
                </form>
            </td>
        </tr>
        <!-- 可以使用这个方法来定义日期 -->
        <tr>
            <th>生日：</th>
            <td>
                <form>
                    <input type="date"> 
                </form>
            </td>
        </tr>

（3）所在地区，学历（表单-文本元素）

<!-- 第三行，所在地区 -->
        <tr>
            <th>所在地区：</th>
            <td>
                <form>
                    <input type="text" maxlength="20" name="所在地区" >
                </form>
            </td>
        </tr>

<!-- 第五行，学历 -->
        <tr>
            <th>学历：</th>
            <td>
                <form>
                    <input type="text" maxlength="20">
                </form>
            </td>
        </tr>

（4）类型（表单-多选元素）

<!-- 第六行，类型 -->
        <tr>
            <th>喜欢类型：</th>
            <td>
                <form>
                    <input type="checkbox" name="type" for="好看的"><label id="好看的">好看的</label>
                    <input type="checkbox" name="type" for="不好看的"><label id="不好看的">不好看的</label>
                    <input type="checkbox" name="type" for="可以看看的"><label id="可以看看的">可以看看的</label>
                    <input type="checkbox" name="type" for="耐看的"><label id="耐看的">耐看的</label>
                    <input type="checkbox" name="type" for="没耐心看的"><label id="没耐心看的">没耐心看的</label>
                </form>
            </td>
        </tr>

（5）自我介绍（表单-文本域）

<!-- 第七行，自我介绍 -->
        <tr>
            <th>自我介绍：</th>
            <td>
                <form>
                    <textarea row="5" cols="20">
                        自我介绍
                    </textarea>
                </form>
            </td>
        </tr>

（6）注册（表单-选项元素、超链接元素）

<!-- 注册 -->
        <tr>
            <th></th>
            <td>
                <form>
                    <input type="submit" value="免费注册">
                </form>
            </td>
        </tr>
        <tr>
            <th></th>
            <td>
                <form>
                    <input type="radio" >我同意注册条款和会员加入标准
                </form>
            </td>
        </tr>
        <tr>
            <th></th>
            <td>
                <a href="#">我是会员，立即登录</a>
            </td>
        </tr>

（7）承诺（列表-无序列表）

<!-- 承诺 -->
        <tr>
            <th></th>
            <td>
                <h4>我承诺，人家</h4>
                <ul>
                    <li>刚满十八岁~</li>
                    <li>刚满十八岁~~</li>
                    <li>刚满十八岁~~~</li>
                </ul>
            </td>
        </tr>