html-综合案例之注册页面

需求分析

页面展示

分析

页面布局分为上下两大部分，上面用标题标签，下面用表格标签，行标签和单元格标签。
代码：
上面部分：

<h3>青春不常在，抓紧谈恋爱！</h3>

下面部分:（以此类推）总共十一行

<table width="500px">
<!--第一行-->
        <tr>//行
            <td></td>//单元格
            <td></td>
        </tr>
 <!--第二行-->
        <tr>
            <td></td>
            <td></td>
        </tr>
 <!--第三行-->
        <tr>
            <td></td>
            <td></td>
        </tr>
</table>

tip:
1.在单选按钮中，使用< lable >标签，可以增强用户体验。

具体代码实现

第一行

右边是表单元素中的单选按钮

<table width="500px">
<!--第一行-->
        <tr>
            <td>性别:</td>
            <td>
<input type="radio" name="sex" id="nan"><label for="nan"><img src="./img/nan.jpg" width="30px" height="30px">男</label>
<input type="radio" name="sex" id="nv"><label for="nv"><img src="./img/nv.jpg" width="30px" height="30px">女</label>
            </td>
        </tr>
</table>

tip:
1.在单选按钮中，使用< lable >标签，可以增强用户体验。
2.< lable >中添加for属性，< input >中添加id属性，将两个标签形成联系。

第二行

右边为下拉列表：

<tr>
    <td>生日：</td>
    <td>
<select>
    <option>--请选择年份--</option>
    <option>2001</option>
    <option>2002</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>
    </td>
</tr>

第三行

右边为文本框(value设置默认值)

<tr>
    <td>地区：</td>
    <td>
        <input type="text" value="贵州安顺">
    </td>
</tr>

第四行

右边是单选按钮：

<tr>
<td>婚姻状况：</td>
<td>
    <input type="radio" checked="checked">未婚
    <input type="radio">已婚
    <input type="radio">离婚

</td>
</tr>

tip:
1.设置默认选中选项，在< input >标签中设置属性checked=“checked”。

第五行

右边为文本框：

<!--第三行-->
<tr>
    <td>学历：</td>
    <td>
        <input type="text" value="本科">
    </td>
</tr>

第六行

右边为多选框：

<tr>
    <td>喜欢的类型：</td>
    <td>
        <input type="checkbox" name="love">小奶狗
        <input type="checkbox" name="love">小狼狗
        <input type="checkbox" name="love">大叔
        <input type="checkbox" name="love">弟弟
    </td>
</tr>

第七行

右边为文本域：

<tr>
    <td>个人简介：</td>
    <td>
        <textarea>个人简介</textarea>
    </td>
</tr>

第八行

右边为按钮：

<tr>
    <td></td>
    <td>
        <input type="button" value="免费注册">
    </td>
</tr>

第九行

右边为复选框：

<tr>
    <td></td>
    <td>
        <input type="checkbox" checked="checked">我同意注册条款和会员加入标准
    </td>
</tr>

第十行

右边为链接

<tr>
    <td></td>
    <td>
        <a href="#">我是会员，立即登录</a>
    </td>
</tr>

第十一行

右边为一个无序列表：

<tr>
    <td></td>
    <td>
        <h3>我承诺：</h3>
        <lu>
            <li>年满十八，单身</li>
            <li>抱着认真严肃的态度</li>
            <li>真诚寻找另一半</li>

        </lu>
    </td>
</tr>

2022年9月17日