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

阅读模式 · 发表于 2023-5-18 00:24:40

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

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

x

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

最佳答案

月排行榜 / 总排行榜

isdkz

2023-5-18 00:25:52

你可以尝试使用Bootstrap框架来美化你的表单，它可以快速地实现一个美观的表单。以下是一个简单的例子：
<!DOCTYPE html><html><head> <title>毕业表单</title>  <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>  <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>
你可以在style.css文件中添加自定义的样式来更好地符合毕业主题。

跳转到最佳答案楼层

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

你可以尝试使用Bootstrap框架来美化你的表单，它可以快速地实现一个美观的表单。以下是一个简单的例子：
<!DOCTYPE html><html><head> <title>毕业表单</title>  <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>  <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>
你可以在style.css文件中添加自定义的样式来更好地符合毕业主题。

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

可以去试一试低代码平台

匿名鱼油 *发表于 2023-5-20 11:33:53* · 发表于 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>

点击提交表单没反应，空着都没有反应，能改下吗

匿名鱼油 *发表于 2023-5-20 11:36:03* · 发表于 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";

}
?>

账号		自动登录	找回密码
密码			立即注册