html(五)注册页面案例

一   注册案例

①  代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
</head>
<body>
<h3>无悔</h3>
<!--table是为了保持整洁-->
<table border="1">
    <caption align="top">一念清静,烈焰成池</caption>
<!--    第一行-->
    <tr>
        <td>性别:</td>
        <td>
<!--            label的for属性与id进行关联-->
            <input type="radio" name="sex" id="man">
<label for="man"><img src="images/man.jpg"> 男</label>
            <input type="radio" name="sex" id="women">
<label for="women"><img src="images/women.jpg"> 女</label>
        </td>
    </tr>
<!--    第二行-->
    <tr>
        <td>生日:</td>
        <td>
            <select>
<!--                第一个作为默认值-->
                <option>--请选择年份--</option>
                <option>1991</option>
                <option>1992</option>
                <option>1993</option>
            </select>
            <select>
                <option>--请选择月份--</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
                <option>6</option>
                <option>7</option>
                <option>8</option>
                <option>9</option>
                <option>10</option>
                <option>11</option>
                <option>12</option>
            </select>
            <select>
                <option>--请选择日--</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>16</option>
                <option>17</option>
                <option>18</option>
            </select>
        </td>
    </tr>
<!--        第三行-->
<tr>
    <td>所在地区</td>
    <td><input type="text" value="河南"></td>
</tr>
<!--    第四行-->
    <tr>
        <td>婚姻状况:</td>
        <td>
            <input type="radio" name="marry" checked="checked">未婚 
<input type="radio" name="marry"> 已婚 
<input type="radio" name="marry"> 离异
        </td>
    </tr>
<!--    第五行-->
    <tr>
        <td>学历:</td>
        <td><input type="text" value="研究生"></td>
    </tr>
<!--    第六行-->
    <tr>
        <td>喜欢的类型:</td>
        <td>
            <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="submit" 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>
            <h5>我承诺</h5>
            <ul>
                <li>年满18岁、单身</li>
                <li>抱着严肃的态度</li>
                <li>真诚寻找另一半</li>
            </ul>
        </td>
    </tr>
</table>
</body>
</html>

②  效果展示

③  所用技术点

 html的权威查询文档

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在达内的HTML课程中,我们学习了如何使用HTML表格实现注册案例。 首先,我们需要创建一个HTML表单,其中包含用户需要输入的注册信息。我们可以使用表格来布局这些输入字段,以使其更整齐和可读。 在表格的开头,我们可以使用``标签创建一个表格,并使用``标签创建表头行。 在表头行中,我们可以使用``标签创建每一列的标题。例如,我们可以创建一个列标题为“用户名”的表头单元格,以指示用户需要在此处输入用户名。 接下来,在表格的主体部分,我们可以使用``标签创建每一行的数据行。对于每个数据行,我们需要创建与表头对应的单元格,并在其中放置用户输入的数据。 例如,我们可以创建一个用户名输入字段所在的单元格,并在其中放置一个``标签,让用户可以在此处输入用户名。 类似地,我们可以继续创建其他输入字段(例如密码、电子邮件等)所在的单元格。并且,我们还可以在某些单元格中添加其他元素,如按钮(用于提交注册信息)或链接(用于跳转到其他页面)。 最后,我们可以使用``标签创建表格的尾行,以便在其中添加任何其他的备注或说明。 通过使用HTML表格,我们可以使注册信息的输入界面更加直观和整齐。并且,我们还可以使用CSS样式来进一步美化和定制我们的注册表格。 总之,使用达内的HTML教程中所学习的知识,我们可以轻松地使用HTML表格实现注册案例

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值