HTML表单

最新推荐文章于 2024-04-24 14:37:39 发布

恋恋去心

最新推荐文章于 2024-04-24 14:37:39 发布

阅读量1k

点赞数 18

文章标签： html

本文链接：https://blog.csdn.net/weixin_50509134/article/details/117463853

版权

HTML表单是用来接受用户信息的一种方式，例如用户的登录注册，求职的个人简历等等。

表单是一个区域，也允许用户在表单中输入内容，根据输入内容的类型不同，我们也可以给表单设置类型。如下图：

我们可以用表单和表格的知识制作一个简单的个人简历页面。

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
    <style>
        td{
            width:120px;
            text-align:center;
        }
        input{ 
             border: none;
             overflow: hidden;
             height: 100%;
             width: 95%;} 
    </style>
</head>
<body>
    <form action="action_page.php" method="POST">
    <table border="1">
        <caption><h2>个人简历</h2></caption>
        <tr>
            <td width=100px>姓名</td>
            <td><input type="text"></td>
            <td width=100px>性别</td>
            <td><input type="text"></td>
            <td width=100px>出生年月</td>
            <td><input type="date"></td>
            <td rowspan="4"><input type="file" name="field-id" accept="file-type"></td>
        </tr>
        <tr>
            <td>民族</td>
            <td><input type="text" ></td>
            <td>政治面貌</td>
            <td><input type="text"></td>
            <td>身高</td>
            <td><input></td>
        </tr>
        <tr>
            <td>学制</td>
            <td><input type="text"></td>
            <td>学历</td>
            <td><input type="text"></td>
            <td>户籍</td>
            <td><input></td>
        </tr>
        <tr>
            <td>专业</td>
            <td><input type="text"></td>
            <td colspan="2">毕业学校</td>
            <td colspan="2"></td>
        </tr>
        <tr>
            <td colspan="7"><b>技能、特长或爱好</b></td>
        </tr>
        <tr>
            <td>外语等级</td>
            <td colspan="2"><input type="text"></td>
            <td>计算机</td>
            <td colspan="3"><input type="text"></td>
        </tr>
        <tr>
            <td colspan="7"><b>个人履历</b></td>
        </tr>
        <tr>
            <td>时间</td>
            <td colspan="2">单位</td>
            <td colspan="4">经历</td>
        </tr>
        <tr>
            <td><input type="text"></td>
            <td colspan="2"><input type="text"></td>
            <td colspan="4"><input type="text"></td>
        </tr>
        <tr>
            <td><input type="text"></td>
            <td colspan="2"><input type="text"></td>
            <td colspan="4"><input type="text"></td>
        </tr>
        <tr>
            <td><input type="text"></td>
            <td colspan="2"><input type="text"></td>
            <td colspan="4"><input type="text"></td>
        </tr>
        <tr>
            <td colspan="7"><b>联系方式</b></td>
        </tr>
        <tr>
            <td>通信地址</td>
            <td colspan="2"><input type="text"></td>
            <td>联系电话</td>
            <td colspan="3"><input type="number"></td>
        </tr>
        <tr>
            <td>E-mail</td>
            <td colspan="2"><input type="email"></td>
            <td>邮编</td>
            <td colspan="3"><input type="number"></td>
        </tr>
        <tr>
            <td colspan="7"><b>自我评价</b></td>
        </tr>
        <tr>
            <td colspan="7"><textarea style="height:120px;width: 900px;"></textarea></td>
        </tr>
        <tr>
            <td colspan="7"><input type="submit" value="Submit" width="50px"></td>
        </tr>
    </table>
    </form>
</body>
</html>

运行之后的结果如图：