html表单练习

于 2024-03-24 15:52:13 发布
阅读量189 收藏
点赞数 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
关注
web前端入门到实战：HTML表单练习
软件开发-前端开发-IT
09-27 973
整理一下思路​： 首先练习了账号密码的输入，属性为text为文本框，属性为password的为暗文文本框输入​ 第二，单选框输入属性为radio，默认选择选项checked属性为checked，不同选项之间互斥为name属性的值必须相等​。多选框输入属性为checkbox。 第三，输入框为textarea标签，里面rows属性定义最多行，cols属性定义最多列​。 第四，属性值为date代表日历，...
HTML表单练习
在线学习web前端开发教程
12-16 536
整理一下思路​： 首先练习了账号密码的输入，属性为text为文本框，属性为password的为暗文文本框输入​ 第二，单选框输入属性为radio，默认选择选项checked属性为checked，不同选项之间互斥为name属性的值必须相等​。多选框输入属性为checkbox。 第三，输入框为textarea标签，里面rows属性定义最多行，cols属性定义最多列​。 第四，属性值为date代表日历，...
HTML表单简单练习
weixin_33863087的博客
03-16 452
代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>表单</title> </head> <body bgcolor="deepskyblue"&...
【HTML】表单练习
点滴记忆
03-12 293
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form method="get" action="https://www.ba...
html表单的练习
lyn789的博客
08-24 860
一个表单的练习， 这是在网页显示中的展示。 form.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22
html 表单练习综合案列（简单易上手）
only_long的博客
07-03 2633
我们要求掌握表单语法后完成下列案列操作附上源码仅供参考，不具实际意义上的完美
form.html（表单练习）
07-22
表单练习，账号text，密码password，性别单选框radio，爱好多选框checkbox，地址下拉列表select，文本域textarea，提交按钮submit
表单练习HTML5
LaoXieyyds的博客
07-21 862
HTML5表单练习，基础部分
Html的表单和二级导航菜单的练习题
qq_46291038的博客
08-06 479
一、使用表格和表单实现如下图所示页面 要求： 1.按照效果图所示使用正确的表单元素 2.性别实现单选，兴趣爱好实现多选 3.Email要求实现邮箱格式的检测 4.提交和重置按钮需进行美化，同时所在的表格行有单元格的合并 效果图 源代码： <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-T...
HTML：表单练习
weixin_47924016的博客
05-03 238
<body> <h2 align="center">表单练习</h2> <form name="form1" method="post" action=""> <table width="400" align="center" cellpadding="0" cellspacing="2" border=""> <tr> <td width="143" height="25">姓名：</td&gt
HTML 表单练习
weixin_46146313的博客
01-21 217
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U...
web（HTML之表单练习）
最新发布
weixin_68256171的博客
12-17 583
省份为下拉框，名称为 province，选项的键-值对为 Key:陕西省，value:shaanxi；自我介绍为多行文本框，名称为 intro，宽 25，高 5，默认值为“这个家伙什么也没留下”。用户名为文本框，名称为 UserName，长度为 15，最大字符数为 20。密码为密码框，名称为 UserPass，长度为 15，最大字符数为 20。性别为两个单选按钮，名称为 sex，值分别为男和女，男默认选中。重置按钮，名称为“reset”，标签为“重置”。提交按钮，名称为“send”，标签为“提交”。
基于html的表单练习
2301_80188692的博客
11-18 55
<input type="checkbox"name="打篮球">篮球</label><br>爱好<label> <input type="checkbox"name="唱">唱</label><label><input type="checkbox"name="跳">跳
HTML表单应用练习
u011184841的博客
05-13 984
表单应用 效果图     1、表单的属性 action=...指跳转到哪里 method=”GET” OR “POST”指表单提交数据的方式 有GET和POST两种 2、文本域、密码域、单选框、多选框、下拉框、提交、复位   文本框 Maxlength指能输入最大字符位数   密码域    复选框  Checked表示默认选择什么选项 单选框   Chec
HTML-表单综合练习
小石头
02-19 652
表单综合练习
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、付费专栏及课程。

余额充值