如何在Django中呈现html表单 [英] How to render html form in Django
问题描述
正如我试图在我的django应用程序中使用引导文件,我无法建立连接我的模型我能够在运行服务器时看到bootstrap主题,但是当我输入数据并单击提交按钮数据时存储在我的数据库中,它也不在管理面板中可见。
(当我使用简单的html文件而无需启动时,我可以将数据保存在数据库中,也在管理面板中显示)
** my models.py **
from django.db从django.contrib.auth.models导入模型
导入用户
class student(models.Model):
name = models.CharField(max_length = 50)
email = models.EmailField(max_length = 50)
phone = models.CharField(max_length = 25)
message = models.TextField(max_length = 500)
def __str __(self):
return self.email
** my views.py **
from django.shortcuts import render $ b $ .b从.models导入*
从。从django.http导入*
导入*
def contact(request):
if request.method =='POST':
form = details_forms(request.POST)
name = request.POST.get('name','')#name model
email = request.POST.get('email',' ')#email模型
phone = request.POST.get('phone','')#phone model
message = request.POST.get('message','')#message model
details_obj =学生(名称=姓名,电子邮件=电子邮件,电话=电话,留言=留言)
details_obj.save()
form = details_forms()
else:
form = details_forms()
return render(request,'contact.html',{'form':form})
** mycontact.html文件**
{%static static from staticfiles%} p>
<!DOCTYPE html>
< html lang =en>
< head>
< style>
body {
background:url('{%static'img / new4.jpg%}')无重复中心固定;
- webkit- background:cover;
- moz - background:cover;
- o - background:cover;
background-size:cover;
}
< / style>
< meta charset =utf-8>
< meta name =viewportcontent =width = device-width,initial-scale = 1,shrink-to-fit = no>
< meta name =descriptioncontent =>
< meta name =authorcontent =>
< title>个性Leading.com< / title>
<! - Bootstrap core CSS - >
< link href ={%static'vendor / bootstrap / css / bootstrap.min.css'%} =stylesheet>
<! - < link rel =stylesheettype =text / csshref ={%static'vendor / bootstrap / css / Custom'%}> - >
< link rel =stylesheettype =text / csshref ={%static'vendor / bootstrap / css / Custom.css'%}>
<! - 此模板的自定义字体 - >
< link href ={%static'vendor / font-awesome / css / font-awesome.min.css'%} =stylesheettype =text / css>
< link href ='https://fonts.googleapis.com/css?family = Lora:400,700,400italic,700italic'rel ='stylesheet'type ='text / css'>
< link href ='https://fonts.googleapis.com/css?family = Open + Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800'rel ='stylesheet'type ='text / CSS'>
<! - 此模板的自定义样式 - >
< link href ={%static'css / clean-blog.min.css'%} =stylesheet>
< / head>
< body>
<! - 导航 - >
< div class =mynav>
< div class =p-3 mb-2 bg-info text-white>< strong> PERSONALITY LEADING< / strong>< / div>
< nav class =navbar navbar-expand-lg navbar-light fixed-topid =mainNav>
< div class =container>
< a class =navbar-brandhref =index.html>< / a>
Menu
< i class =fa fa-bars>< / i>
< / button>
< div class =collapse navbar-collapseid =navbarResponsive>
< ul class =navbar-nav ml-auto>
< li class =nav-item>
< a class =nav-linkhref =/ home />主页< / a>
< / li>
< li class =nav-item>
< a class =nav-linkhref =/ about />关于< / a>
< / li>
< li class =nav-item>
< a class =nav-linkhref =/ services />服务< / a>
< / li>
< li class =nav-item>
< a class =nav-linkhref =/ contact />联络人< / a>
< / li>
< / ul>
< / div>
< / div>
< / nav>
< / div>
< / div>
< br>
< br>
< br>
< br>
< br>
< br>
< br>
< br>
<! - 页面标题 - >
<! - < header class =mastheadstyle =background-image:url('img / contact-bg.jpg')> - >
< div class =overlay>< / div>
< div class =container>
< div class =row>
< div class =col-lg-8 col-md-10 mx-auto>
< div class =page-heading>
< h1>联络我们< / h1>
< span class =subheading>有疑问?我有答案。< / span>
< / div>
< / div>
< / div>
< / div>
< / header>
<! - 主要内容 - >
< div class =container>
< div class =row>
< div class =col-lg-8 col-md-10 text-dark mx-auto>
< p>想联络吗?填写下面的表格向我们发送信息,我们会尽快回复您!< / p>
< form name =sentMessageid =contactFormnovalidate>
< form method =postaction =>
{%csrf_token%}
< div class =control-group>
< div class =form-group floating-label-form-group controls>
< div class =form-group>
< label>名称< / label>
< div class =col-md-4>
{{form.name}}
< p class =help-block text-danger>< / p>
< / div>
< / div>
< div class =control-group>
< div class =form-group floating-label-form-group controls>
< div class =form-group>
< label>电子邮件地址< / label>
< input type =emailclass =form-controlplaceholder =Email Addressid =emailrequired data-validation-required-message =Please enter your email address。>
< div class =col-md-4>
{{form.email}}
< p class =help-block text-danger>< / p>
< / div>
< / div>
< div class =control-group>
< div class =form-group>
< div class =form-group col-xs-12 floating-label-form-group controls>
< label>电话号码< / label>
< input type =telclass =form-controlplaceholder =Phone Numberid =phonerequired data-validation-required-message =请输入您的电话号码。>
< div class =col-md-4>
{{form.phone}}
< p class =help-block text-danger>< / p>
< / div>
< / div>
< div class =control-group>
< div class =form-group>
< div class =form-group floating-label-form-group controls>
< label>讯息< / label>
< div class =col-md-4>
{{form.message}}
< p class =help-block text-danger>< / p>
< / div>
< / div>
< br>
< div id =success>< / div>
< div class =form-group>
< button type =submitclass =btn btn-primaryid =sendMessageButton>发送< / button>
< / div>
< / form>
< / form>
< / div>
< / div>
< / div>
< div id =templatemo-contact>
< p class =text-primary>
< h7>< strong>认识我们< span>在我们的位置< / span> < /强>< / H7> < / p为H.
< br>
< div class =contactHldr text-#0085a1>
< ul>
< li>
< strong>个性领导< / strong>< br>
(Online Jobs Guru Pvt.ltd)< br>
#169,第13层主楼1楼< br>
Aicoboo Nagar,第一阶段,BTM布局< br>
班加罗尔 - 560029< / p>
< h4>在Google地图上找到我们< / h4>
< a href =https://www.google.co.in/maps/place/Onlinejobsguru+Pvt.Ltd./@12.9167255,77.6087831,17z/data=!3m1!4b1!4m5!3m4 !!!!?1s0x3bae14fc2c1a4461:0xa948622b989d82ff8平方米3d12.9167203 4d77.6109718 HL = EN> < img src ={%static'img / map.png'%}width =150height =114>< br>
< br>
<! - < h5>电话:080 - 41250340< / h5> - >
< p class =text-primary>< strong>电话号码:< / strong> 080 - 41250340< / p>
< p class =text-light>< strong>电子邮件:< / strong> <峰; br> < a href =mailto:info@personalityleading.com> info@personalityleading.com< / a>< br>< a href =mailto:support@personalityleading.com> support@personalityleading.com< ; / A>< / p为H.
< / a>
< / li>
< hr>
<! - Footer - >
< footer>
< div class =container>
< div class =row>
< div class =col-lg-8 col-md-10 mx-auto>
< ul class =list-inline text-center>
< li class =list-inline-item>
< a href =https://twitter.com/onlinejobsguruu>
< span class =fa-stack fa-lg>
< i class =fa fa-circle fa-stack-2x>< / i>
< i class =fa fa-twitter fa-stack-1x fa-inverse>< / i>
< / span>
< / a>
< / li>
< li class =list-inline-item>
< a href =https://www.facebook.com/onlinejobsguru05/>
< span class =fa-stack fa-lg>
< i class =fa fa-circle fa-stack-2x>< / i>
< i class =fa fa-facebook fa-stack-1x fa-inverse>< / i>
< / span>
< / a>
< / li>
<! - < li class =list-inline-item>
< a href =#>
< span class =fa-stack fa-lg>
< i class =fa fa-circle fa-stack-2x>< / i>
< i class =fa fa-github fa-stack-1x fa-inverse>< / i>
< / span>
< / a>
< / li> - >
< / ul>
< p class =copyright text-light>©2016个人主导,所有权利保留< / p>
< / div>
< / div>
< / div>
< / footer>
<! - Bootstrap core JavaScript - >
< script src ={%static'vendor / jquery / jquery.min.js'%}>< / script>
< script src ={%static'vendor / bootstrap / js / bootstrap.bundle.min.js'%}>< / script>
<! - 联络表格JavaScript - >
< script src ={%static'js / jqBootstrapValidation.j'%}>< / script>
< script src ={%static'js / contact_me.js'%}>< / script>
<! - 此模板的自定义脚本 - >
< script src ={%static'js / clean-blog.min.js'%}>< / script>
< / body>
< / html>
如果使用 ModelForm 对于
模型
将您的视图更改为此
def contact(request):
if request.method =='POST':
form = details_forms(request.POST)
if form.is_valid():
form.save()
return render(request,'contact.html',{'form':form})
else:
form = details_forms()
return request(request,'contact.html',{'form':form})
更改在您的表单中
class Meta():model = student fields = ['name','email','phone', 'message']
至
<$ p $
$ model $ student $ b $ field = ['name','email','phone','message']
$ c $> c>
As I am trying to make use bootstrap file in my django application I am not able to make connections my models I am able to see the bootstrap theme when I run server but when I enter data and click on submit button data is not storing in my database and it is not visible in admin panel also.
(When I use simple html file without bootstrap I am able to save the data in database and it is also showing in admin panel)
**my models.py**
from django.db import models
from django.contrib.auth.models import User
class student(models.Model):
name = models.CharField(max_length=50)
email = models.EmailField(max_length=50)
phone = models.CharField(max_length=25)
message = models.TextField(max_length=500)
def __str__(self):
return self.email
**my views.py**
from django.shortcuts import render
from .models import *
from .forms import *
from django.http import *
def contact(request):
if request.method == 'POST':
form = details_forms(request.POST)
name = request.POST.get('name', '')#name model
email = request.POST.get('email', '')#email model
phone = request.POST.get('phone', '')#phone model
message = request.POST.get('message', '')#message model
details_obj = student(name=name,email=email,phone=phone,message=message)
details_obj.save()
form = details_forms()
else:
form = details_forms()
return render(request,'contact.html',{'form':form})
**mycontact.html file**
{% load static from staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body{
background: url('{% static "img/new4.jpg" %}') no-repeat center fixed;
- webkit- background: cover;
- moz - background: cover;
- o - background: cover;
background-size: cover;
}
</style>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Personality Leading.com</title>
<!-- Bootstrap core CSS -->
<link href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
<!-- <link rel="stylesheet" type="text/css" href="{% static 'vendor/bootstrap/css/Custom' %}"> -->
<link rel="stylesheet" type="text/css" href="{% static 'vendor/bootstrap/css/Custom.css' %}">
<!-- Custom fonts for this template -->
<link href="{% static 'vendor/font-awesome/css/font-awesome.min.css' %}" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
<!-- Custom styles for this template -->
<link href="{% static 'css/clean-blog.min.css' %}" rel="stylesheet">
</head>
<body>
<!-- Navigation -->
<div class="mynav">
<div class="p-3 mb-2 bg-info text-white"><strong> PERSONALITY LEADING </strong></div>
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand" href="index.html"></a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
Menu
<i class="fa fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="/home/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/about/">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/services/">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/contact/">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<!-- Page Header -->
<!-- <header class="masthead" style="background-image: url('img/contact-bg.jpg')"> -->
<div class="overlay"></div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<div class="page-heading">
<h1>Contact Us</h1>
<span class="subheading">Have questions? I have answers.</span>
</div>
</div>
</div>
</div>
</header>
<!-- Main Content -->
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 text-dark mx-auto">
<p>Want to get in touch? Fill out the form below to send us a message and We will get back to you as soon as possible!</p>
<form name="sentMessage" id="contactForm" novalidate>
<form method="post" action="">
{% csrf_token %}
<div class="control-group">
<div class="form-group floating-label-form-group controls">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" placeholder="Name" id="name" required data-validation-required-message="Please enter your name.">
<div class="col-md-4">
{{ form.name}}
<p class="help-block text-danger"></p>
</div>
</div>
<div class="control-group">
<div class="form-group floating-label-form-group controls">
<div class="form-group">
<label>Email Address</label>
<input type="email" class="form-control" placeholder="Email Address" id="email" required data-validation-required-message="Please enter your email address.">
<div class="col-md-4">
{{ form.email}}
<p class="help-block text-danger"></p>
</div>
</div>
<div class="control-group">
<div class="form-group">
<div class="form-group col-xs-12 floating-label-form-group controls">
<label>Phone Number</label>
<input type="tel" class="form-control" placeholder="Phone Number" id="phone" required data-validation-required-message="Please enter your phone number.">
<div class="col-md-4">
{{ form.phone}}
<p class="help-block text-danger"></p>
</div>
</div>
<div class="control-group">
<div class="form-group">
<div class="form-group floating-label-form-group controls">
<label>Message</label>
<textarea rows="5" class="form-control" placeholder="Message" id="message" required data-validation-required-message="Please enter a message."></textarea>
<div class="col-md-4">
{{ form.message}}
<p class="help-block text-danger"></p>
</div>
</div>
<br>
<div id="success"></div>
<div class="form-group">
<button type="submit" class="btn btn-primary" id="sendMessageButton">Send</button>
</div>
</form>
</form>
</div>
</div>
</div>
<div id="templatemo-contact">
<p class="text-primary">
<h7><strong>Meet us<span> at our location</span> </strong></h7> </p>
<br>
<div class="contactHldr text-#0085a1">
<ul>
<li>
<strong>Personality Leading</strong><br>
(Online Jobs Guru Pvt.ltd)<br>
#169, 13th Main 1st Floor<br>
Aicoboo Nagar, 1st stage, BTM Layout<br>
Bangalore - 560029</p>
<h4>Locate us on Google maps</h4>
<a href="https://www.google.co.in/maps/place/Onlinejobsguru+Pvt.Ltd./@12.9167255,77.6087831,17z/data=!3m1!4b1!4m5!3m4!1s0x3bae14fc2c1a4461:0xa948622b989d82ff!8m2!3d12.9167203!4d77.6109718?hl=en"> <img src="{%static 'img/map.png' %}" width="150" height="114"><br>
<br>
<!-- <h5>Phone: 080 - 41250340</h5> -->
<p class="text-primary"><strong>Phone:</strong> 080 - 41250340</p>
<p class="text-light"><strong>Email:</strong> <br> <a href="mailto:info@personalityleading.com">info@personalityleading.com</a><br><a href="mailto:support@personalityleading.com">support@personalityleading.com</a></p>
</a>
</li>
<hr>
<!-- Footer -->
<footer>
<div class="container">
<div class="row">
<div class="col-lg-8 col-md-10 mx-auto">
<ul class="list-inline text-center">
<li class="list-inline-item">
<a href="https://twitter.com/onlinejobsguruu">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<li class="list-inline-item">
<a href="https://www.facebook.com/onlinejobsguru05/">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-facebook fa-stack-1x fa-inverse"></i>
</span>
</a>
</li>
<!-- <li class="list-inline-item">
<a href="#">
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-github fa-stack-1x fa-inverse"></i>
</span>
</a>
</li> -->
</ul>
<p class="copyright text-light">© 2016 PERSONALITY LEADING, ALL RIGHTS RESERVED</p>
</div>
</div>
</div>
</footer>
<!-- Bootstrap core JavaScript -->
<script src="{% static 'vendor/jquery/jquery.min.js' %}"></script>
<script src="{% static 'vendor/bootstrap/js/bootstrap.bundle.min.js' %}"></script>
<!-- Contact Form JavaScript -->
<script src="{% static 'js/jqBootstrapValidation.j' %}"></script>
<script src="{% static 'js/contact_me.js' %}"></script>
<!-- Custom scripts for this template -->
<script src="{% static 'js/clean-blog.min.js' %}"></script>
</body>
</html>
if you are using ModelForm
for that Model
change your view to this
def contact(request):
if request.method == 'POST':
form = details_forms(request.POST)
if form.is_valid():
form.save()
return render(request,'contact.html',{'form':form})
else:
form = details_forms()
return render(request,'contact.html',{'form':form})
change this in your form
class Meta(): model = student fields = ['name','email','phone','message']
to
class Meta:
model = student
fields = ['name','email','phone','message']
这篇关于如何在Django中呈现html表单的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!