当前位置: 首页 > article >正文

[JavaWeb]搜索表单区域

一.注意事项

设置外边距:margin:(参数可省去部分)上 下 左 右 

二.源代码

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <title>Tlias智能学习辅助系统</title>

    <style>

        /* 导航栏样式 */

        .navbar {

            background-color: #b5b3b3; /* 灰色背景 */

           

            display: flex; /* flex弹性布局 */

            justify-content: space-between; /* 左右对齐 */

            padding: 10px; /* 内边距 */

            align-items: center; /* 垂直居中 */

        }

        .navbar h1 {

            margin: 0; /* 移除默认的上下外边距 */

            font-weight: bold; /* 加粗 */

            color: white;

            /* 设置字体为楷体 */

            font-family: "楷体";

        }

        .navbar a {

            color: white; /* 链接颜色为白色 */

            text-decoration: none; /* 移除下划线 */

        }

        /* 搜索表单样式 */

        .search-form {

            display: flex;

            flex-wrap: nowrap;

            align-items: center;

            gap: 10px; /* 控件之间的间距 */

            margin: 20px 0;

        }

        .search-form input[type="text"], .search-form select {

            padding: 5px; /* 输入框内边距 */

            width: 300px; /* 宽度 */

        }

        .search-form button {

            padding: 5px 15px; /* 按钮内边距 */

        }

    </style>

</head>

<body>

    <!-- 顶部导航栏 -->

    <div class="navbar">

        <h1>Tlias智能学习辅助系统</h1>

        <a href="#">退出登录</a>

    </div>

    <!-- 搜索表单区域 -->

    <!-- form表单标签:

            action: 表单提交的地址 - url

            method: 表单提交的方式 - get(默认) / post

                get: 提交时, 表单数据会在url后提交到服务端; 比如: /search?name=Tom&gender=2&position=3 ;

                     get方式提交数据长度有限制, 不能提交大量数据; get方式不安全;

                post: 提交时, 表单数据会在请求体(消息体)中提交到服务端; 比如: /search -- name=Cat&gender=1&position=2

                     post方式提交数据长度无限制; post方式安全;

    -->

    <form class="search-form" action="/search" method="post">

        <label for="name">姓名:</label>

        <input type="text" id="name" name="name" placeholder="请输入姓名">

        <label for="gender">性别:</label>

        <select id="gender" name="gender">

            <option value=""></option>

            <option value="1">男</option>

            <option value="2">女</option>

        </select>

        <label for="position">职位:</label>

        <select id="position" name="position">

            <option value=""></option>

            <option value="1">班主任</option>

            <option value="2">讲师</option>

            <option value="3">学工主管</option>

            <option value="4">教研主管</option>

            <option value="5">咨询师</option>

        </select>

        <button type="submit">查询</button>

        <button type="reset">清空</button>

    </form>

</body>

</html>

三.结果展示

原文地址:https://blog.csdn.net/qq_74776071/article/details/145401018
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.kler.cn/a/526306.html

相关文章:

  • Windows11暂停自动更新
  • (二)PosrgreSQL: Python3 连接Pgvector出错排查
  • 巴塞尔问题详解:计算所有正整数平方的倒数之和
  • DeepSeek R1本地部署详细指南
  • Java 性能优化与新特性
  • [OO ALV] OO ALV 基础显示
  • allegro修改封闭图形线宽
  • 独立成分分析 (ICA):用于信号分离或降维
  • wordpress外贸独立站常用询盘软件
  • Rust语言进阶之enumerate用法实例(九十六)
  • 第33篇:Python开发进阶:自然语言处理与文本分析
  • Java继承中的静态方法隐藏与实例变量隐藏:深入解析与最佳实践
  • 年化19.3%策略集|ctpbee_api替换成openctp整合backtrader实盘方案(代码+数据)
  • 大厂面试题备份20250129
  • dify实现原理分析-rag-检索(Retrieval)服务的实现
  • 信号处理以及队列
  • 一文讲解Java中的异常处理机制
  • 变量和简单数据类型(字符串)
  • doris:导入时实现数据转换
  • Java 分布式与微服务架构:现代企业应用开发的新范式