HTML之表单

骑猪看日落 2024-05-05 06:52 8阅读 0赞

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

#### 文章目录 ####

*  前言
 *  一、概述
 *  二、表单form
 *  三、form中的input标签
 *  四、小结

--------------------

## 前言 ##

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

## 一、概述 ##

表单是什么，表格和单元格组成？我觉得这样理解有误。其实表单在互联网这个时代无处不在，很常见，我们来看图说话：  
![在这里插入图片描述][59a07d49685e4fe89bb1330b7222f7a4.jpeg_pic_center]  
![在这里插入图片描述][f93aefdc215c41cdb6069264fcbb475a.jpeg_pic_center]  
上述的图片是不是非常的熟悉，没错，聪明的你肯定想到了，这些就是表单，不过这上面的表单做了一些处理，原样看起来还是比较简陋的，至于为啥这么说，现在进行学习。

--------------------

## 二、表单form ##

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

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

## 三、form中的input标签 ##

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

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

以上就是比较常用的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>

效果图如下：

![在这里插入图片描述][8020d5c93b814cf39d3d64c6bf2f6897.jpeg_pic_center]  
需要注意的是单选框的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>
        
        <link rel="stylesheet" href="css/login.css">
    </head>
    <body>
        <div class="box">
            <div class="left"></div>
            <div class="right">
                <div class="login">
                    <h2>欢 迎 回 来</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样式，也就是为这个表单添加了样式，如果删除或注释掉效果图如下：

![在这里插入图片描述][a1f8c377538649898506c30496d89b52.jpeg_pic_center]

这就比较简陋了，那么加上装饰，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%;
    }

代码已经有了注释。这里需要注意的是背景图片：background: url("…/img/login\_bg.jpg") center no-repeat; 里的url，这个图片可以自己选择，主要是需要注意放的路径，具体的代码路径看最后，这里先把效果图扔出来瞧瞧吧：

![在这里插入图片描述][20e38bf7d3754b9d87c76d17f2f3ee2d.jpeg_pic_center]  
看着有点模样，目录结构如下：  
![在这里插入图片描述][654fbb87573c4f2d8b8a08657dd69183.jpeg_pic_center]

--------------------

## 四、小结 ##

以上就是本章的全部内容，本篇主要是简单的介绍了什么是表单，还有表单里面的input标签的常用类型，最后还做了一个登录小案例。

[59a07d49685e4fe89bb1330b7222f7a4.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/05/76e3bab17d48423e8e6c9c7a8a55ce7e.jpeg
[f93aefdc215c41cdb6069264fcbb475a.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/05/ed113677d2334363aba89cdc9a5ed34a.jpeg
[8020d5c93b814cf39d3d64c6bf2f6897.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/05/b469575623fc4456841bd05ce0373ede.jpeg
[a1f8c377538649898506c30496d89b52.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/05/2b889153963f4039982d35aae1155825.jpeg
[20e38bf7d3754b9d87c76d17f2f3ee2d.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/05/4c70b8e714e44f82a0ff58d8e2ecb210.jpeg
[654fbb87573c4f2d8b8a08657dd69183.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/05/05/02043bcc627e433eab94143e13091377.jpeg