HTML5表格之邮箱会员注册

最新推荐文章于 2023-11-20 22:45:49 发布

你好y

最新推荐文章于 2023-11-20 22:45:49 发布

阅读量620

点赞数

分类专栏：前端基础知识文章标签： html5

本文链接：https://blog.csdn.net/qq_43430343/article/details/105050784

版权

前端基础知识专栏收录该内容

15 篇文章 1 订阅

订阅专栏

实现代码如下：

<!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>
    <table border="2"  color="#ccc" cellspacing="5" cellpading="5" width="500px">
      <!-- 第一行 -->
        <tr>
            <td colspan="2" align="center">邮箱会员注册</td>
        </tr>
       <!-- 第二行 -->
        <tr>
            <td >
                用户名：
             </td>
             <td>
                <input type="text">
             </td>
        </tr>
         <!-- 第三行 -->
        <tr>
            <td>
                密码：
            </td>
            <td>
                <input type="password">
            </td>
        </tr>
        <!-- 第四行 -->
        <tr>
            <td>
                确定密码：
            </td>
            <td>
                <input type="password">
            </td>
        </tr>
          <!-- 第五行 -->
        <tr>
            <td>
                性别：
            </td>
            <td>
                <input type="radio" name="sex">男
                <input type="radio" name="sex" >女
            </td>
        </tr>
        <!-- 第6行 -->
        <tr>
            <td>Email:</td>
            <td><input type="text"></td>
        </tr>
        <!-- 第7行 -->
        <tr>
            <td>Phone:</td>
            <td><input type="text"></td>
        </tr>
        <!-- 第8行 -->
        <tr>
            <td>年龄：</td>
            <td><input type="text"></td>
        </tr>
        <!-- 第9行 -->
        <tr>
            <td>专业：</td>
            <td>
                <select>
                    <option>computer</option>
                    <option>english</option>
                    <option>Ai</option>
                    <option>web</option>
                </select>
            </td>
        </tr>
        <!-- 第10行 -->
        <tr>
            <td>爱好：</td>
            <td>
                <input type="checkbox">户外
                <input type="checkbox">音乐
                <input type="checkbox">购物
                <input type="checkbox">其他
            </td>
        </tr>
        <!-- 第11行 -->
        <tr>
            <td>所在地：</td>
            <td>
                <select>
                    <option>北京</option>
                    <option>上海</option>
                    <option>河南</option>
                    <option>河北</option>
                </select>
            </td>
        </tr>
        <!-- 第12行 -->
        <tr>
            <td>备注：</td>
            <td><textarea></textarea></td>
        </tr>
        <!-- 第13行 -->
        <tr>
            <td colspan="2" align="center">
                <input type="submit">
                <input type="reset">
            </td>
        </tr>
    </table>
</body>
</html>

效果图：
在这里插入图片描述
在以后写的时候呢，要注意表格的name不能少…不然单选就变成多选了…

你好y

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
HTML5表格之邮箱会员注册

实现代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc...
复制链接

扫一扫

专栏目录