HTML之表单

Guarding and trust

已于 2023-06-25 21:35:42 修改

阅读量857

点赞数

分类专栏：前端文章标签： html html5 前端 1024程序员节

于 2022-10-24 23:05:53 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_54679968/article/details/127176270

版权

前端专栏收录该内容

4 篇文章

订阅专栏

本文介绍了HTML中的表单form和input标签，详细讲解了input的常用类型，如text、password、radio、checkbox等，并通过一个登录案例展示了如何使用这些标签创建表单，同时强调了CSS在美化表单方面的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

不为失败找理由，只为成功找方法。所有的不甘，因为还心存梦想，所以在你放弃之前，好好拼一把，只怕心老，不怕路长。

前言

今天为1024程序员节，但是学习的脚步不能停下来，撸起袖子加油干。

一、概述

表单是什么，表格和单元格组成？我觉得这样理解有误。其实表单在互联网这个时代无处不在，很常见，我们来看图说话：
在这里插入图片描述

上述的图片是不是非常的熟悉，没错，聪明的你肯定想到了，这些就是表单，不过这上面的表单做了一些处理，原样看起来还是比较简陋的，至于为啥这么说，现在进行学习。

二、表单form

&bnsp; &bnsp;表单也称form，这是个关键词，或者说是关键的标签，我们知道HTML是由标签组成的，那么表单也叫form标签。格式如下：

<form action="提交表单的路径"></form>

代码比较简单，一行就可以了，action这个属性比较关键了，是提交给服务器的路径url。现在已经知道form标签的结构了，接下来才是重点，from标签里面有很多input标签元素，而一开始展示的图片效果不是from标签的功劳，而是input标签（元素）的功劳，接下来我们一一来讲解常用的input标签的类型。

三、form中的input标签

input标签里有一个type属性，这个是来分辨各input标签的类型的，不同的类型可以实现不同的效果，接下来我们来看一下我们常用的type属性值：

类型	描述
text	显示文本框，可看见
password	显示密码框，不可见
radio	显示单选框
checkbox	显示复选框
button	显示按钮
date	显示时间
tel	手机号校验
submit	提交按钮
hidden	隐藏域

以上就是比较常用的input标签类型，如果把以上的类型掌握了，可以应付大多数情况。演示代码如下：

<!-- ...省略代码 -->
<form action="#">
        文本框：<input type="text"/></br>
        密码框：<input type="password"></br>
        按钮：<input type="button" value="按钮"></br>
        单选框：<input type="radio" name="b">男<input type="radio" name="b">女</br>
        多选框：<input type="checkbox" name="a">JavaScript
                <input type="checkbox" name="a">HTML
                <input type="checkbox" name="a">CSS</br>
        文件上传：<input type="file"></br>
        提交按钮：<input type="submit" value="提交"></br>
        隐藏域：<input type="hidden"></br>
        重置按钮：<input type="reset" value="重置"></br>
    </form>
<!-- ...省略代码 -->

效果图如下：

在这里插入图片描述
需要注意的是单选框的name属性值要一致，不然会变成复选框，而复选框的name也要一致，虽然不会影响功能，但是到后期做项目的时候与后端交互是需要一致的。

学到这里，是不是有些疑惑了，这么简陋的，怎么可能和图片展示的那么美观的呢。其实那是因为做了装饰，也就是写了CSS样式，接下来写一个登录案例来练练手吧。

<!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>
    <!-- 引入css样式 -->
    <link rel="stylesheet" href="css/login.css">
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right">
            <div class="login">
                <h2>欢&nbsp;迎&nbsp;回&nbsp;来</h2>
                <p>请先登录</p>
                <form action="#" method="get">
                    <table>
                        <tr>
                            <td>
                                <label for="user">用户名</label>
                            </td>
                        </tr>
                        <tr>
                            <td class="in">
                                <input type="text" name="userName" id="user"/>
                            </td>
                        </tr>

                        <tr>
                            <td>
                                <label for="pwd">密码</label>
                            </td>
                        </tr>
                        <tr>
                            <td class="in">
                                <input type="password" name="pwd" id="pwd"/>
                            </td>
                        </tr>

                        <tr>
                            <td class="but">
                                <input type="submit" value="登录" />
                            </td>
                        </tr>
                        <tr>
                            <td class="a">
                                <a href="#">忘记密码？</a>
                                <a href="register.html">立即注册-></a>
                            </td>
                        </tr>
                    </table>
                </form>
            </div>
        </div>
    </div>
</body>
</html>

上述代码为HTML，这里使用了表格布局，表单中嵌套表格，其中有一行是引入了CSS样式，也就是为这个表单添加了样式，如果删除或注释掉效果图如下：

在这里插入图片描述

这就比较简陋了，那么加上装饰，CSS代码如下所示：

/* 通配符 */
*{
    box-sizing: border-box;
    margin: 0;
}

/* 全局设置 */
html,body{
    width: 100%;
    height: 100%;
}
/* 大盒子 */
.box{
    width: 100%;
    height: 100%;
    display: flex;
    /* border: solid 1px saddlebrown; */
    background: url("../img/login_bg.jpg") center no-repeat;
    background-size: cover;
}

/* 左边，暂无设置 */
.box .left{
    width: 40%;
    flex: 1;
    /* border: solid 1px salmon; */
    height: 100%;
}

/* 右边登录 */
.box .right{
    width: 40%;
    flex: 1;
    /* border: solid 1px rgb(114, 152, 250); */
    height: 100%;
}

/* 登录盒子 */
.login{
    margin: auto auto;
    width: 50%;
    margin-top: 25%;
    /* border: 2px silver solid; */
    padding: 3%;
    background-color: rgba(173, 223, 250, 0.3);
    box-shadow: 0px 0px 10px rgb(135, 227, 239);
    font-size: 1.1rem;
}
/* 标题设置 */
.login h2,p{
    text-align: center;
    margin: 0 0 6px 0;
}
.login p{
    font-size: 0.9rem;
    color: rgb(179 247 246);
}

/* 表单设置 */
.login .in input{
    font-size: 1.1rem;
    outline: none;
    border-width: 0 0 2px 0;
    width: 300px;
    background-color: transparent;
    margin-bottom: 15px;
}

/* 登录按钮 */
.login .but{
    text-align: center;
}
.login .but input{
    padding: 5px 15px;
    font-size: 1.1rem;
    border-radius: 8px;
    border: 0;
    cursor: pointer;
    margin-bottom: 15px;
    width: 100%;
    background-color: rgb(146 234 245);
}
.but input:hover{
    color: saddlebrown;
}

/* 底部提示 */
.a{
    display: flex;
}
.a a{
    flex: 1;
    text-decoration: none;
}
.a a:last-child{
    padding-left: 35%;
}