设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 编程语言专区 › Web开发 › 要毕业了，求一个美化的表单
返回列表 发新帖
查看: 1193|回复: 4

[已解决]要毕业了，求一个美化的表单

[复制链接]
匿名鱼油
匿名鱼油  发表于 2023-5-18 00:24:40 |阅读模式

马上注册，结交更多好友，享用更多功能^_^

您需要 登录 才可以下载或查看，没有账号？立即注册

x
主要是一来自己没什么时间
二来写出来的估计也不怎么可以
所以求一个
关键词毕业
信息自己看着办包含
php之类的后端到时候我自己写吧
意思很明确css+html+js组成的好看表单
要求符合毕业这一主题
谢谢
最佳答案
月排行榜 / 总排行榜
isdkz
2023-5-18 00:25:52
你可以尝试使用Bootstrap框架来美化你的表单，它可以快速地实现一个美观的表单。以下是一个简单的例子：
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <title>毕业表单</title>
  5.         <!-- 引入Bootstrap -->
  6.         <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.3.1/css/bootstrap.min.css">
  7.         <!-- 引入自定义样式 -->
  8.         <link rel="stylesheet" href="style.css">
  9. </head>
  10. <body>
  11.         <div class="container">
  12.                 <h1>毕业表单</h1>
  13.                 <form>
  14.                         <div class="form-group">
  15.                                 <label for="name">姓名</label>
  16.                                 <input type="text" class="form-control" id="name" placeholder="请输入姓名">
  17.                         </div>
  18.                         <div class="form-group">
  19.                                 <label for="email">邮箱</label>
  20.                                 <input type="email" class="form-control" id="email" placeholder="请输入邮箱">
  21.                         </div>
  22.                         <div class="form-group">
  23.                                 <label for="major">专业</label>
  24.                                 <input type="text" class="form-control" id="major" placeholder="请输入专业">
  25.                         </div>
  26.                         <div class="form-group">
  27.                                 <label for="graduation-date">毕业日期</label>
  28.                                 <input type="date" class="form-control" id="graduation-date">
  29.                         </div>
  30.                         <div class="form-group">
  31.                                 <label for="comment">留言</label>
  32.                                 <textarea class="form-control" id="comment" rows="3"></textarea>
  33.                         </div>
  34.                         <button type="submit" class="btn btn-primary">提交</button>
  35.                 </form>
  36.         </div>
  37.         <!-- 引入jQuery -->
  38.         <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  39.         <!-- 引入Bootstrap的JS组件 -->
  40.         <script src="https://cdn.bootcss.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  41. </body>
  42. </html>
复制代码

你可以在style.css文件中添加自定义的样式来更好地符合毕业主题。
回复

使用道具 举报

isdkz
发表于 2023-5-18 00:25:52 | 显示全部楼层    本楼为最佳答案   
你可以尝试使用Bootstrap框架来美化你的表单，它可以快速地实现一个美观的表单。以下是一个简单的例子：
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.         <title>毕业表单</title>
  5.         <!-- 引入Bootstrap -->
  6.         <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.3.1/css/bootstrap.min.css">
  7.         <!-- 引入自定义样式 -->
  8.         <link rel="stylesheet" href="style.css">
  9. </head>
  10. <body>
  11.         <div class="container">
  12.                 <h1>毕业表单</h1>
  13.                 <form>
  14.                         <div class="form-group">
  15.                                 <label for="name">姓名</label>
  16.                                 <input type="text" class="form-control" id="name" placeholder="请输入姓名">
  17.                         </div>
  18.                         <div class="form-group">
  19.                                 <label for="email">邮箱</label>
  20.                                 <input type="email" class="form-control" id="email" placeholder="请输入邮箱">
  21.                         </div>
  22.                         <div class="form-group">
  23.                                 <label for="major">专业</label>
  24.                                 <input type="text" class="form-control" id="major" placeholder="请输入专业">
  25.                         </div>
  26.                         <div class="form-group">
  27.                                 <label for="graduation-date">毕业日期</label>
  28.                                 <input type="date" class="form-control" id="graduation-date">
  29.                         </div>
  30.                         <div class="form-group">
  31.                                 <label for="comment">留言</label>
  32.                                 <textarea class="form-control" id="comment" rows="3"></textarea>
  33.                         </div>
  34.                         <button type="submit" class="btn btn-primary">提交</button>
  35.                 </form>
  36.         </div>
  37.         <!-- 引入jQuery -->
  38.         <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  39.         <!-- 引入Bootstrap的JS组件 -->
  40.         <script src="https://cdn.bootcss.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  41. </body>
  42. </html>
复制代码

你可以在style.css文件中添加自定义的样式来更好地符合毕业主题。
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

害羞的新手
发表于 2023-5-18 11:22:33 | 显示全部楼层
可以去试一试低代码平台
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

匿名鱼油
匿名鱼油  发表于 2023-5-20 11:33:53
isdkz 发表于 2023-5-18 00:25
你可以尝试使用Bootstrap框架来美化你的表单，它可以快速地实现一个美观的表单。以下是一个简单的例子：
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.    <meta charset="utf-8">
  5.         <title>毕业表单</title>
  6.         <!-- 引入Bootstrap -->
  7.         <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.3.1/css/bootstrap.min.css">
  8.         <!-- 引入自定义样式 -->
  9.         <link rel="stylesheet" href="style.css">
  10. </head>
  11. <form action="welcome.php" method="post">
  12.               
  13. <body>
  14.         <div class="container">
  15.                 <h1>毕业表单</h1>
  16. <div class="form-group">
  17.                                 <label for="major">照片</label>
  18.                                 <input type="file" name="tp"  >
  19.                         </div>
  20.                             <div class="form-group">
  21.                                 <label for="name">姓名</label>
  22.                                 <input type="text" class="form-control" name="name" placeholder="请输入你的名字">
  23.                         </div>
  24.                         <div class="form-group">
  25.                                 <label for="email">联系方式</label>
  26.                                 <input type="email" class="form-control" name="email" placeholder="请输入邮箱仅支持126与163邮箱" pattern="\w[-\w.+]*@(163.com|126.com)" required>
  27.                         </div>
  28.                         <div class="form-group">
  29.                                 <label for="major">联系电话</label>
  30.                                 <input type="text" class="form-control" name="dh" placeholder="请输入电话号码" pattern="(\(\d{3,4}\)|\d{3,4}-|\s)?\d{8}" required >
  31.                         </div>
  32.                         <div class="form-group">
  33.                                 <label for="major">留言</label>
  34.                                 <input type="text" class="form-control" name="ly" placeholder="感谢isdkz为提供css与html模板"  required >
  35.                         </div>

  37. <input type="button" value="提交">
  38.                      
  39. </form>
  40.    
  41.         <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  42.    
  43.         <script src="https://cdn.bootcss.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
  44. </body>
  45. </html>
复制代码

点击提交表单没反应，空着都没有反应，能改下吗
回复 支持 反对

使用道具 举报

匿名鱼油
匿名鱼油  发表于 2023-5-20 11:36:03
本帖最后由 匿名 于 2023-5-20 11:37 编辑
isdkz 发表于 2023-5-18 00:25
你可以尝试使用Bootstrap框架来美化你的表单，它可以快速地实现一个美观的表单。以下是一个简单的例子：


http://rwccu.scxc.ink/cs/1.html
ｐｈｐ端代码
<?php
if(!empty($_POST)){
  
        $fields = array('name', 'email', 'dh', 'ly');
        $user_id = $_POST[name];
//定义储存用户数据的文件路径
$file_path = "./$user_id.txt";


        }
        ?>


回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2025-5-4 23:22

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表