html表单练习

于 2024-03-24 15:52:13 发布
阅读量166 收藏
点赞数 2
文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_76207585/article/details/136978536
版权

1.

<!doctype html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table {
            td {
                padding: 8px; /* 单元格内边距 */
                text-align: left; /* 文本对齐 */
                background-color: #eaeaea;
            }

            th {
                background-color: #cbcbcb;
            }
        }
    </style>
</head>
<body>
<form action="#" method="get">
    <table>
        <tr>
            <th colspan="2">用户注册</th>
        </tr>
        <tr>
            <td>用户名</td>
            <td><input type="text" name="username"></td>
        </tr>
        <tr>
            <td>密码</td>
            <td><input type="password" name="password"></td>
        </tr>
        <tr>
            <td>性别</td>
            <td>
                <input type="radio" name="gender" value="man">男
                <input type="radio" name="gender" value="woman">女
            </td>
        </tr>
        <tr>
            <td>爱好</td>
            <td>
                <input name="like" type="checkbox" value="write"> 写作
                <input name="like" type="checkbox" value="music"> 听音乐
                <input name="like" type="checkbox" value="sport"> 体育
            </td>
        </tr>
        <tr>
            <td>省份</td>
            <td>
                <select name="province">
                    <option value="shaanxi" selected>陕西省</option>
                    <option value="shanxi">山西</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>自我介绍</td>
            <td><textarea name="Intro" cols="23" rows="5"></textarea></td>
        </tr>
        <tr>
            <th colspan="2">
                <input type="submit">
                <input type="reset">
            </th>
        </tr>
    </table>
</form>

</body>
</html>

效果：

2.

<!doctype html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        td {
            padding: 5px;
            text-align: left;
        }

        #free {
            text-align: right;
        }

         .text {
             font-size: 12px;
             color: #9b9b9b;
         }

         .text2 {
             height: 30px;
         }

         #log {
             font-size: 25px;
             color: #ffffff;
             background: #2A91D8;
             text-align: center;
         }

         #title1 {
             font-size: 25px;
         }

        #title2 {
            font-size: 20px;
        }

        #input {
            width: 150px;
        }

    </style>
</head>
<body>
<form action="#" method="get">
    <table>
        <tr>
            <td rowspan="9"><img src="./img/1.jpg" alt="QQ" width="180"></td>
            <td width="200px" rowspan="9"></td>
            <td height="100px"></td>
            <td width="180px"></td>
        </tr>
        <tr>
            <td colspan="2" height="25px"><span id="title1"><b>欢迎注册QQ</b></span></td>
        </tr>
        <tr>
            <td><span id="title2"><b>每一天，乐在沟通。</b></span></td>
            <td id="free"><a href="#">免费靓号</a></td>
        </tr>
        <tr>
            <td colspan="2"><input type="text" name="username" placeholder="昵称" size="50px" class="text2"></td>
        </tr>
        <tr>
            <td colspan="2"><input type="text" name="password" placeholder="密码" size="50px" class="text2"></td>
        </tr>
        <tr>
            <td>
                <select name="tele" id="input" class="text2">
                    <option value="+86" selected>+86</option>
                    <option value="+1">+1</option>
                </select>
            </td>
            <td>
                <input type="number" name="telephone" placeholder="手机号码" class="text2">
            </td>
        </tr>
        <tr>
            <td class="text" colspan="2">可通过手机号找回密码</td>
        </tr>
        <tr>
            <td colspan="2"><input type="image" src="./img/2.jpg" width="350px"></td>
        </tr>
        <tr>
            <td colspan="2"><input type="checkbox" name="check" value="check"><span class="text">我已阅读并同意相关服务条款和隐私政策</span></td>
        </tr>
    </table>
</form>

</body>
</html>

效果：

3.

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>QQ登录</title>
    <style>
        th, td {
            border: 0px solid black; /* 1px边框，实线，黑色 */
            padding: 10px; /* 单元格内边距 */
            text-align: left; /* 文本对齐 */
        }

        .text {
            border: 0px solid black; /* 1px边框，实线，黑色 */
            padding: 8px; /* 单元格内边距 */
            text-align: center; /* 文本对齐 */
        }

        #head1 {
            background-color: #79c9ff;
            width: 600px;
        }

        #head2 {
            background-color: #79c9ff;
            width: 350px;
        }

        .link {
            font-size: 15px;
            color: #efefef;
        }

        .link2 {
            font-size: 15px;
            color: #505050;
        }

        #title {
            font-size: 25px;
        }

        #title2 {
            font-size: 20px;
        }

        .input {
            height: 35px;
        }

        #submit {
            width: 375px;
        }

        .text-right {
            font-size: 15px;
        }
    </style>
</head>
<body>
<form method="get" action="#">
    <table>
        <tr>
            <td id="head1" height="50px"></td>
            <td id="head2" style="text-align: right">
                <a href="#" class="link">QQ登录 |</a>
                <a href="#" class="link">授权管理 |</a>
                <a href="#" class="link">申请接入</a>
            </td>
        </tr>
        <tr>
            <td class="text"><b><span id="title">账号密码登录</span></b></td>
            <td rowspan="7">
                <table>
                    <tr><td style="height: 20px"></td></tr>
                    <tr>
                        <span class="text-right"><td><a href="#"><hr>腾讯网</a>将获得以下权限：<hr></td></span>
                    </tr>
                    <tr>
                        <span class="text-right"><td><input type="checkbox" name="check" value="all" checked>全选<hr></td></span>
                    </tr>
                    <tr>
                        <span class="text-right"><td><input type="checkbox" name="check" value="all" checked disabled>获得您的昵称、头像、性别及会员信息</td></span>
                    </tr>
                    <tr><td style="height: 40px"></td></tr>
                    <tr>
                        <span class="text-right"><td>授权后表名你已同意<a href="#">QQ登录服务协议</a></td></span>
                    </tr>
                    <tr><td style="height: 70px"></td></tr>
                </table>
            </td>
        </tr>
        <tr>
            <td class="text"><span id="title2">推荐使用<a href="#">快速安全登录</a>,防止盗号</span></td>
        </tr>
        <tr>
            <td class="text"><input type="text" name="username" placeholder="支持QQ号/邮箱/手机号登录" size="50px" class="input"></td>
        </tr>
        <tr>
            <td class="text"><input type="text" name="password" placeholder="密码" size="50px" class="input"></td>
        </tr>
        <tr>
            <td class="text"><input type="image" src="./img/3.jpg" id="submit"></td>
        </tr>
        <tr>
            <td style="height: 30px"></td>
        </tr>
        <tr>
            <td style="text-align: right">
                <a href="#" class="link2">忘了密码? |</a>
                <a href="#" class="link2">注册新账号 |</a>
                <a href="#" class="link2">意见反馈</a>
            </td>
        </tr>

    </table>
</form>
</body>
</html>

效果：

 

4.

 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>新浪网</title>
    <style>
        #index {
            background-color: #d9d9d9;
        }
        th, td {
            padding: 8px;
            text-align: left; 
        }

        .list {
            padding: 8px; 
            text-align: right;
            width: 150px;
        }

        .input {
            padding: 8px;
            text-align: left;
            width: 300px;
        }


        body {
            background-color: #f8f8f8;
        }

        .star {
            color: #ff3232;
        }

        .comment {
            font-size: 12px;
            color: #43b7ff;
            text-decoration: none;
        }

        .comment2 {
            font-size: 15px;
            color: #1a8fd7;
            text-decoration: none;
        }

        .login {
            color: #43b7ff;
            text-decoration: none;
        }
    </style>
</head>
<body>
<form action="#" method="get">
    <table>
        <tr>
            <td rowspan="2"><img src="./img/4.jpg" width="50px"></td>
            <td class="list"><span class="star">*</span>手机号码：</td>
            <td class="input"><input type="text" name="tele" size="40px" style="height: 30px"></td>
            <td style="width: 150px" rowspan="9"></td>
            <td style="width: 300px"></td>
        </tr>
        <tr>
            <td></td>
            <td>使用微博账号直接<a href="#">登录</a></td>
            <td>已有账号，<a href="#" class="login">直接登录 >></a></td>
        </tr>
        <tr>
            <td rowspan="7"></td>
            <td class="list"><span class="star">*</span>设置密码：</td>
            <td class="input"><input type="text" name="tele" size="40px" style="height: 30px"></td>
            <td style="width: 300px" rowspan="7"></td>
        </tr>
        <tr>
            <td class="list"><span class="star">*</span>兴趣标签：</td>
            <td>
                <input type="checkbox" value="1" name="check">新闻
                <input type="checkbox" value="2" name="check">娱乐
                <input type="checkbox" value="3" name="check">文化
                <input type="checkbox" value="4" name="check">体育
                <input type="checkbox" value="5" name="check">IT&nbsp;&nbsp;&nbsp;&nbsp;
                <input type="checkbox" value="6" name="check">财经
                <input type="checkbox" value="7" name="check">时尚
                <input type="checkbox" value="8" name="check">汽车
                <input type="checkbox" value="9" name="check">房产
                <input type="checkbox" value="0" name="check">生活
            </td>
        </tr>
        <tr>
            <td class="list"><span class="star">*</span>上发短信手机：</td>
            <td><button style="height: 35px">我要使用注册手机发送短信</button></td>
        </tr>
        <tr>
            <td rowspan="4"></td>
            <td style="height: 40px"></td>
        </tr>
        <tr>
            <td><a href="#" class="comment">《新浪网络服务使用协议》</a></td>
        </tr>
        <tr>
            <td><a href="#" class="comment">《新浪个人信息保护政策》</a></td>
        </tr>
        <tr>
            <td style="height: 150px"></td>
        </tr>
    </table>
</form>
<hr/>
<div>
    <a href="#" class="comment2">新浪简介&nbsp;&nbsp;</a>
    <a href="#" class="comment2">About Sina</a>
    <a href="#" class="comment2">广告服务&nbsp;&nbsp;</a>
    <a href="#" class="comment2">联系我们&nbsp;&nbsp;</a>
    <a href="#" class="comment2">招聘信息&nbsp;&nbsp;</a>
    <a href="#" class="comment2">网站律师&nbsp;&nbsp;</a>
    <a href="#" class="comment2">SINA English&nbsp;&nbsp;</a>
    <a href="#" class="comment2">注册&nbsp;&nbsp;</a>
    <a href="#" class="comment2">产品答疑</a>
</div>
<div>
    <span style="color: #6c6c6c">客户服务电话 400-052-0066 欢迎批评指正</span>
</div>
<div>
    <span style="color: #6c6c6c">新浪公司 <a href="#" class="comment2">版权所有</a></span>
</div>
</body>
</html>

效果：

_Sethos
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
html表格练习
qq_42312396的博客
01-20 531
代码，数据是随便写的 <table> <caption> 各项数据 </caption> <!-- 标题 --> <thead> <tr> <th scope="col" rowspan="2" colspan="2"></th> <th scope="col" rowspan="2">种类</th> <th sc
HTML表单练习
在线学习web前端开发教程
12-16 502
整理一下思路​： 首先练习了账号密码的输入，属性为text为文本框，属性为password的为暗文文本框输入​ 第二，单选框输入属性为radio，默认选择选项checked属性为checked，不同选项之间互斥为name属性的值必须相等​。多选框输入属性为checkbox。 第三，输入框为textarea标签，里面rows属性定义最多行，cols属性定义最多列​。 第四，属性值为date代表日历，...
form.html（表单练习）
07-22
表单练习，账号text，密码password，性别单选框radio，爱好多选框checkbox，地址下拉列表select，文本域textarea，提交按钮submit
html表单专项练习
墨城烟柳ベ旧人殇的博客
04-04 712
本人主要介绍用html完成表单的建立。
html表单+表格的练习
m0_57519583的博客
02-27 287
html表单+表格的小练习
html 表单练习综合案列（简单易上手）
only_long的博客
07-03 2522
我们要求掌握表单语法后完成下列案列操作附上源码仅供参考，不具实际意义上的完美
HTML 表格及练习
weixin_51559599的博客
10-17 949
表格是一种二维结构，横行纵列。由单元格组成。表格是一种非常“强” 的结构：每一行有相同的列数（单元格），每一列有相同的行数（单元格）同一列的单元格，宽度（以最大的为准）相同，同列等宽；同行等高基本结构
Questionnaire:练习HTML表单
03-14
在"Questionnaire:练习HTML表单"这个主题中，我们将深入探讨HTML表单的使用，它是网页交互性的重要组成部分，允许用户输入数据并与服务器进行通信。 HTML表单由一系列的表单元素组成，如`<form>`、`<input>`、`...
html表单小练习
10-16
html表单小练习，各种表单类型，本人自己做的小练习，对初学者有作用
JavaScript表单练习.zip
12-23
1． 掌握JavaScript脚本的调用和基本语法； 2． 掌握JavaScript常用内置对象的基本应用； 3． 掌握BOM和window消息对话框的使用； 4． 掌握HTML DOM动态网页设计技术。
table.html（html表格练习）
07-21
html5简单的项目支出表格作业，表内容为 项目负责人 联系电话 项目支出细化预算(单位：万元)项目类别 发展性专项 建设性专项 基本建设和大修理项目 合计 项目前期费用 征地费 建筑工程费 安装工程费 设备等购置费 原 材 料 其他费用 各种建筑物面积 起始年 终 止 年 项目属性 新增项目 上年延续项目 项目预算来源 项目当年预算 项目总预算 合计 1、财政拨款（补助） 会议培训项目
HTML5简单清新的登录表单
04-11
HTML5简单清新的登录表单,HTML5特效
html小练习.docx
08-27
HTML 小练习文档解读 本文档旨在指导初学者掌握 HTML 基础知识，并通过实践练习熟悉 HTML 编程。本文档共分为四页，涵盖 HTML 基础概念、表单设计、图片显示、样式设置等内容。 页 1：块级元素、内联元素和内联块...
初步认识HTML+表单标签练习
weixin_64449292的博客
07-25 596
适合初学者，内容比较基础。学好表单标签非常重要。
纯html的form表单实操练习
m0_64336780的博客
04-05 9177
纯html的form表单实操练习
表格练习HTML5
LaoXieyyds的博客
07-19 524
个人简历表格建立
HTML表格列表表单练习
2301_80121720的博客
12-13 427
【代码】HTML表格列表表单练习。
web（HTML之表单练习）
最新发布
weixin_68256171的博客
12-17 441
省份为下拉框，名称为 province，选项的键-值对为 Key:陕西省，value:shaanxi；自我介绍为多行文本框，名称为 intro，宽 25，高 5，默认值为“这个家伙什么也没留下”。用户名为文本框，名称为 UserName，长度为 15，最大字符数为 20。密码为密码框，名称为 UserPass，长度为 15，最大字符数为 20。性别为两个单选按钮，名称为 sex，值分别为男和女，男默认选中。重置按钮，名称为“reset”，标签为“重置”。提交按钮，名称为“send”，标签为“提交”。
html表单案例练习
09-28
以下是一个HTML表单案例练习： ```html <form action="/submit" method="post"> <label for="name">姓名：</label> <input type="text" id="name" name="name"> <label for="email...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值