Anonymous 发表于 2023-5-18 00:24:40

要毕业了,求一个美化的表单

主要是一来自己没什么时间
二来写出来的估计也不怎么可以
所以求一个
关键词毕业
信息自己看着办包含
php之类的后端到时候我自己写吧
意思很明确css+html+js组成的好看表单
要求符合毕业这一主题
谢谢

isdkz 发表于 2023-5-18 00:25:52

你可以尝试使用Bootstrap框架来美化你的表单,它可以快速地实现一个美观的表单。以下是一个简单的例子:

<!DOCTYPE html>
<html>
<head>
        <title>毕业表单</title>
        <!-- 引入Bootstrap -->
        <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.3.1/css/bootstrap.min.css">
        <!-- 引入自定义样式 -->
        <link rel="stylesheet" href="style.css">
</head>
<body>
        <div class="container">
                <h1>毕业表单</h1>
                <form>
                        <div class="form-group">
                                <label for="name">姓名</label>
                                <input type="text" class="form-control" id="name" placeholder="请输入姓名">
                        </div>
                        <div class="form-group">
                                <label for="email">邮箱</label>
                                <input type="email" class="form-control" id="email" placeholder="请输入邮箱">
                        </div>
                        <div class="form-group">
                                <label for="major">专业</label>
                                <input type="text" class="form-control" id="major" placeholder="请输入专业">
                        </div>
                        <div class="form-group">
                                <label for="graduation-date">毕业日期</label>
                                <input type="date" class="form-control" id="graduation-date">
                        </div>
                        <div class="form-group">
                                <label for="comment">留言</label>
                                <textarea class="form-control" id="comment" rows="3"></textarea>
                        </div>
                        <button type="submit" class="btn btn-primary">提交</button>
                </form>
        </div>
        <!-- 引入jQuery -->
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <!-- 引入Bootstrap的JS组件 -->
        <script src="https://cdn.bootcss.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>


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

害羞的新手 发表于 2023-5-18 11:22:33

可以去试一试低代码平台

Anonymous 发表于 2023-5-20 11:33:53

isdkz 发表于 2023-5-18 00:25
你可以尝试使用Bootstrap框架来美化你的表单,它可以快速地实现一个美观的表单。以下是一个简单的例子:



<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
      <title>毕业表单</title>
      <!-- 引入Bootstrap -->
      <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.3.1/css/bootstrap.min.css">
      <!-- 引入自定义样式 -->
      <link rel="stylesheet" href="style.css">
</head>
<form action="welcome.php" method="post">
            
<body>
      <div class="container">
                <h1>毕业表单</h1>
<div class="form-group">
                              <label for="major">照片</label>
                              <input type="file" name="tp">
                        </div>
                            <div class="form-group">
                              <label for="name">姓名</label>
                              <input type="text" class="form-control" name="name" placeholder="请输入你的名字">
                        </div>
                        <div class="form-group">
                              <label for="email">联系方式</label>
                              <input type="email" class="form-control" name="email" placeholder="请输入邮箱仅支持126与163邮箱" pattern="\w[-\w.+]*@(163.com|126.com)" required>
                        </div>
                        <div class="form-group">
                              <label for="major">联系电话</label>
                              <input type="text" class="form-control" name="dh" placeholder="请输入电话号码" pattern="(\(\d{3,4}\)|\d{3,4}-|\s)?\d{8}" required >
                        </div>
                        <div class="form-group">
                              <label for="major">留言</label>
                              <input type="text" class="form-control" name="ly" placeholder="感谢isdkz为提供css与html模板"required >
                        </div>

<input type="button" value="提交">
                     
</form>
   
      <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
   
      <script src="https://cdn.bootcss.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>
点击提交表单没反应,空着都没有反应,能改下吗

Anonymous 发表于 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端代码
<?php
if(!empty($_POST)){

        $fields = array('name', 'email', 'dh', 'ly');
        $user_id = $_POST;
//定义储存用户数据的文件路径
$file_path = "./$user_id.txt";


        }
        ?>


页: [1]
查看完整版本: 要毕业了,求一个美化的表单