表单表格嵌套布局

冷酷的煎蛋

已于 2025-03-27 21:16:18 修改

阅读量1k

点赞数 33

CC 4.0 BY-SA版权

文章标签： html 前端

于 2025-03-27 20:28:41 首次发布

本文链接：https://blog.csdn.net/2501_90771362/article/details/146568998

成果展示：

源代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单表格嵌套实验</title>
</head>
<body>
    <form action="">
        <h2 align="center" style="color: red;">用户注册</h2>
        <table width="400" border="1" bgcolor="pink" align="center">
            <tr>
                <td align="right">用户名</td>
                <td><input type="text" name="username" id="username"></td>
            </tr>
            <tr>
                <td align="right">密码</td>
                <td><input type="password" name="userword" id="userword"></td>
            </tr>
            <tr>
                <td align="right">确认密码</td>
                <td><input type="password" name="userword1" id="userword1"></td>
            </tr>
            <tr>
                <td align="right">性别</td>
                <td><input type="radio" name="sex" id="sex1">男
                    <input type="radio" name="sex" id="sex2">女
                </td>
            </tr>
            <tr>
                <td align="right">出生日期</td>
                <td><input type="date" name="brithdate" id="brithdate"></td>
            </tr>
            <tr>
                <td align="right">联系电话</td>
                <td><input type="tel" name="usertel" id="usertel"></td>
            </tr>
            <tr>
                <td align="right">电子邮件</td>
                <td><input type="email" name="userEmail" id="userEmail"></td>
            </tr>
            <tr>
                <td align="right">最高学历</td>
                <td><input type="radio" name="college" id="college">中专
                    <input type="radio" name="college" id="college1">大专
                    <input type="radio" name="college" id="college2">本科
                    <input type="radio" name="college" id="college3">研究生
                </td>
            </tr>
            <tr>
                <td align="right">爱好</td>
                <td><input type="checkbox" name="hobby" id="hobby">上网
                    <input type="checkbox" name="hobby1" id="hobby1">篮球
                    <input type="checkbox" name="hobby2" id="hobby2">听歌
                    <input type="checkbox" name="hobby3" id="hobby3">下棋
                </td>
            </tr>
            <tr align="center">
                <td colspan="2"><input type="submit" value="提交">
                    <input type="submit" value="重置">
                </td>
            </tr>
        </table>

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

一、Form表单（让网站具有交互性）

HTML表单是用于收集用户输入数据的工具，以下是对它的介绍：

1.基本概念：

表单在web网页中用来给用户填空信息，从而能采集用户信息，使网页具有交互的功能。所有用户输入内容的地方都用表单来写，如登陆注册，搜索框。

表单是由容器和控件组成的，一个表单一般应该包含填写信息的输入框，提交按钮等。这些输入框，按钮叫做控件，表单就是容器，它能容纳各种各样的控件。

2.表单的创建：

使用 <form> 标签来创建表单，例如：

html

<form action="process.php" method="post">

</form>

action 属性：指定了处理表单数据的服务器端脚本的URL。
method 属性：规定了发送表单数据的http方法，通常是 GET 或 POST 。