2015-10-28 14:35:39 +03:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta http-equiv = "Content-Type" content = "text/html; charset=UTF-8" >
< meta charset = "utf-8" >
< title > HTML & Forms - Django REST framework< / title >
< link href = "../../img/favicon.ico" rel = "icon" type = "image/x-icon" >
< link rel = "canonical" href = "http://www.django-rest-framework.org/topics/html-and-forms/" / >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< meta name = "description" content = "Django, API, REST, HTML & Forms" >
< meta name = "author" content = "Tom Christie" >
<!-- Le styles -->
< link href = "../../css/prettify.css" rel = "stylesheet" >
< link href = "../../css/bootstrap.css" rel = "stylesheet" >
< link href = "../../css/bootstrap-responsive.css" rel = "stylesheet" >
< link href = "../../css/default.css" rel = "stylesheet" >
<!-- Le HTML5 shim, for IE6 - 8 support of HTML5 elements -->
<!-- [if lt IE 9]>
< script src = "http://html5shim.googlecode.com/svn/trunk/html5.js" > < / script >
<![endif]-->
< script type = "text/javascript" >
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-18852272-2']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script');
ga.type = 'text/javascript';
ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ga, s);
})();
< / script >
< style >
2016-05-26 13:48:39 +03:00
#sidebarInclude img {
margin-bottom: 10px;
}
#sidebarInclude a.promo {
2015-10-28 14:35:39 +03:00
color: black;
2016-05-26 13:48:39 +03:00
}
2015-10-28 14:35:39 +03:00
@media (max-width: 767px) {
div.promo {
display: none;
}
}
< / style >
< / head >
< body onload = "prettyPrint()" class = "-page" >
< div class = "wrapper" >
< div class = "navbar navbar-inverse navbar-fixed-top" >
< div class = "navbar-inner" >
< div class = "container-fluid" >
< a class = "repo-link btn btn-primary btn-small" href = "https://github.com/tomchristie/django-rest-framework/tree/master" > GitHub< / a >
< a class = "repo-link btn btn-inverse btn-small " rel = "prev" href = "../browser-enhancements/" >
Next < i class = "icon-arrow-right icon-white" > < / i >
< / a >
< a class = "repo-link btn btn-inverse btn-small " rel = "next" href = "../ajax-csrf-cors/" >
< i class = "icon-arrow-left icon-white" > < / i > Previous
< / a >
< a id = "search_modal_show" class = "repo-link btn btn-inverse btn-small" href = "#mkdocs_search_modal" data-toggle = "modal" data-target = "#mkdocs_search_modal" > < i class = "icon-search icon-white" > < / i > Search< / a >
< a class = "btn btn-navbar" data-toggle = "collapse" data-target = ".nav-collapse" >
< span class = "icon-bar" > < / span >
< span class = "icon-bar" > < / span >
< span class = "icon-bar" > < / span >
< / a >
< a class = "brand" href = "http://www.django-rest-framework.org" > Django REST framework< / a >
< div class = "nav-collapse collapse" >
<!-- Main navigation -->
< ul class = "nav navbar-nav" >
< li >
< a href = "../.." > Home< / a >
< / li >
< li class = "dropdown" >
< a href = "#" class = "dropdown-toggle" data-toggle = "dropdown" > Tutorial < b class = "caret" > < / b > < / a >
< ul class = "dropdown-menu" >
< li >
< a href = "../../tutorial/quickstart/" > Quickstart< / a >
< / li >
< li >
< a href = "../../tutorial/1-serialization/" > 1 - Serialization< / a >
< / li >
< li >
< a href = "../../tutorial/2-requests-and-responses/" > 2 - Requests and responses< / a >
< / li >
< li >
< a href = "../../tutorial/3-class-based-views/" > 3 - Class based views< / a >
< / li >
< li >
< a href = "../../tutorial/4-authentication-and-permissions/" > 4 - Authentication and permissions< / a >
< / li >
< li >
< a href = "../../tutorial/5-relationships-and-hyperlinked-apis/" > 5 - Relationships and hyperlinked APIs< / a >
< / li >
< li >
< a href = "../../tutorial/6-viewsets-and-routers/" > 6 - Viewsets and routers< / a >
< / li >
2016-07-14 15:05:57 +03:00
< li >
< a href = "../../tutorial/7-schemas-and-client-libraries/" > 7 - Schemas and client libraries< / a >
< / li >
2015-10-28 14:35:39 +03:00
< / ul >
< / li >
< li class = "dropdown" >
< a href = "#" class = "dropdown-toggle" data-toggle = "dropdown" > API Guide < b class = "caret" > < / b > < / a >
< ul class = "dropdown-menu" >
< li >
< a href = "../../api-guide/requests/" > Requests< / a >
< / li >
< li >
< a href = "../../api-guide/responses/" > Responses< / a >
< / li >
< li >
< a href = "../../api-guide/views/" > Views< / a >
< / li >
< li >
< a href = "../../api-guide/generic-views/" > Generic views< / a >
< / li >
< li >
< a href = "../../api-guide/viewsets/" > Viewsets< / a >
< / li >
< li >
< a href = "../../api-guide/routers/" > Routers< / a >
< / li >
< li >
< a href = "../../api-guide/parsers/" > Parsers< / a >
< / li >
< li >
< a href = "../../api-guide/renderers/" > Renderers< / a >
< / li >
< li >
< a href = "../../api-guide/serializers/" > Serializers< / a >
< / li >
< li >
< a href = "../../api-guide/fields/" > Serializer fields< / a >
< / li >
< li >
< a href = "../../api-guide/relations/" > Serializer relations< / a >
< / li >
< li >
< a href = "../../api-guide/validators/" > Validators< / a >
< / li >
< li >
< a href = "../../api-guide/authentication/" > Authentication< / a >
< / li >
< li >
< a href = "../../api-guide/permissions/" > Permissions< / a >
< / li >
< li >
< a href = "../../api-guide/throttling/" > Throttling< / a >
< / li >
< li >
< a href = "../../api-guide/filtering/" > Filtering< / a >
< / li >
< li >
< a href = "../../api-guide/pagination/" > Pagination< / a >
< / li >
< li >
< a href = "../../api-guide/versioning/" > Versioning< / a >
< / li >
< li >
< a href = "../../api-guide/content-negotiation/" > Content negotiation< / a >
< / li >
< li >
< a href = "../../api-guide/metadata/" > Metadata< / a >
< / li >
2016-07-07 11:41:32 +03:00
< li >
< a href = "../../api-guide/schemas/" > Schemas< / a >
< / li >
2015-10-28 14:35:39 +03:00
< li >
< a href = "../../api-guide/format-suffixes/" > Format suffixes< / a >
< / li >
< li >
< a href = "../../api-guide/reverse/" > Returning URLs< / a >
< / li >
< li >
< a href = "../../api-guide/exceptions/" > Exceptions< / a >
< / li >
< li >
< a href = "../../api-guide/status-codes/" > Status codes< / a >
< / li >
< li >
< a href = "../../api-guide/testing/" > Testing< / a >
< / li >
< li >
< a href = "../../api-guide/settings/" > Settings< / a >
< / li >
< / ul >
< / li >
< li class = "dropdown active" >
< a href = "#" class = "dropdown-toggle" data-toggle = "dropdown" > Topics < b class = "caret" > < / b > < / a >
< ul class = "dropdown-menu" >
< li >
< a href = "../documenting-your-api/" > Documenting your API< / a >
< / li >
2016-07-07 11:41:32 +03:00
< li >
< a href = "../api-clients/" > API Clients< / a >
< / li >
2015-10-28 14:35:39 +03:00
< li >
< a href = "../internationalization/" > Internationalization< / a >
< / li >
< li >
< a href = "../ajax-csrf-cors/" > AJAX, CSRF & CORS< / a >
< / li >
< li class = "active" >
< a href = "./" > HTML & Forms< / a >
< / li >
< li >
< a href = "../browser-enhancements/" > Browser Enhancements< / a >
< / li >
< li >
< a href = "../browsable-api/" > The Browsable API< / a >
< / li >
< li >
< a href = "../rest-hypermedia-hateoas/" > REST, Hypermedia & HATEOAS< / a >
< / li >
< li >
< a href = "../third-party-resources/" > Third Party Resources< / a >
< / li >
< li >
< a href = "../contributing/" > Contributing to REST framework< / a >
< / li >
< li >
< a href = "../project-management/" > Project management< / a >
< / li >
< li >
< a href = "../3.0-announcement/" > 3.0 Announcement< / a >
< / li >
< li >
< a href = "../3.1-announcement/" > 3.1 Announcement< / a >
< / li >
< li >
< a href = "../3.2-announcement/" > 3.2 Announcement< / a >
< / li >
< li >
< a href = "../3.3-announcement/" > 3.3 Announcement< / a >
< / li >
2016-07-14 15:05:57 +03:00
< li >
< a href = "../3.4-announcement/" > 3.4 Announcement< / a >
< / li >
2015-10-28 14:35:39 +03:00
< li >
< a href = "../kickstarter-announcement/" > Kickstarter Announcement< / a >
< / li >
2016-05-26 13:48:39 +03:00
< li >
< a href = "../mozilla-grant/" > Mozilla Grant< / a >
< / li >
< li >
< a href = "../funding/" > Funding< / a >
< / li >
2015-10-28 14:35:39 +03:00
< li >
< a href = "../release-notes/" > Release Notes< / a >
< / li >
< / ul >
< / li >
< / ul >
< / div >
<!-- /.nav - collapse -->
< / div >
< / div >
< / div >
< div class = "body-content" >
< div class = "container-fluid" >
<!-- Search Modal -->
< div id = "mkdocs_search_modal" class = "modal hide fade" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true" >
< div class = "modal-header" >
< button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" > × < / button >
< h3 id = "myModalLabel" > Documentation search< / h3 >
< / div >
< div class = "modal-body" >
< form role = "form" autocomplete = "off" >
< div class = "form-group" >
< input type = "text" name = "q" class = "form-control" placeholder = "Search..." id = "mkdocs-search-query" >
< / div >
< / form >
< div id = "mkdocs-search-results" > < / div >
< / div >
< div class = "modal-footer" >
< button class = "btn" data-dismiss = "modal" aria-hidden = "true" > Close< / button >
< / div >
< / div >
< div class = "row-fluid" >
< div class = "span3" >
< div id = "table-of-contents" >
< ul class = "nav nav-list side-nav well sidebar-nav-fixed" >
< li class = "main" >
2016-06-24 13:07:42 +03:00
< a href = "#html-forms" > HTML & Forms< / a >
2015-10-28 14:35:39 +03:00
< / li >
< li >
< a href = "#rendering-html" > Rendering HTML< / a >
< / li >
< li >
< a href = "#rendering-forms" > Rendering Forms< / a >
< / li >
< li >
< a href = "#field-styles" > Field styles< / a >
< / li >
2016-05-26 13:48:39 +03:00
< div class = "promo" >
< hr / >
< div id = "sidebarInclude" >
< / div >
2015-10-28 14:35:39 +03:00
< / ul >
< / div >
< / div >
< div id = "main-content" class = "span9" >
2015-11-04 17:59:23 +03:00
< h1 id = "html-forms" > < a class = "toclink" href = "#html-forms" > HTML & Forms< / a > < / h1 >
2015-10-28 14:35:39 +03:00
< p > REST framework is suitable for returning both API style responses, and regular HTML pages. Additionally, serializers can used as HTML forms and rendered in templates.< / p >
2015-11-04 17:59:23 +03:00
< h2 id = "rendering-html" > < a class = "toclink" href = "#rendering-html" > Rendering HTML< / a > < / h2 >
2015-10-28 14:35:39 +03:00
< p > In order to return HTML responses you'll need to either < code > TemplateHTMLRenderer< / code > , or < code > StaticHTMLRenderer< / code > .< / p >
< p > The < code > TemplateHTMLRenderer< / code > class expects the response to contain a dictionary of context data, and renders an HTML page based on a template that must be specified either in the view or on the response.< / p >
< p > The < code > StaticHTMLRender< / code > class expects the response to contain a string of the pre-rendered HTML content.< / p >
< p > Because static HTML pages typically have different behavior from API responses you'll probably need to write any HTML views explicitly, rather than relying on the built-in generic views.< / p >
< p > Here's an example of a view that returns a list of "Profile" instances, rendered in an HTML template:< / p >
< p > < strong > views.py< / strong > :< / p >
< pre > < code > from my_project.example.models import Profile
from rest_framework.renderers import TemplateHTMLRenderer
2015-11-04 17:59:23 +03:00
from rest_framework.response import Response
2015-10-28 14:35:39 +03:00
from rest_framework.views import APIView
class ProfileList(APIView):
renderer_classes = [TemplateHTMLRenderer]
template_name = 'profile_list.html'
def get(self, request):
queryset = Profile.objects.all()
return Response({'profiles': queryset})
< / code > < / pre >
< p > < strong > profile_list.html< / strong > :< / p >
< pre > < code > < html> < body>
< h1> Profiles< /h1>
< ul>
{% for profile in profiles %}
< li> {{ profile.name }}< /li>
{% endfor %}
< /ul>
< /body> < /html>
< / code > < / pre >
2015-11-04 17:59:23 +03:00
< h2 id = "rendering-forms" > < a class = "toclink" href = "#rendering-forms" > Rendering Forms< / a > < / h2 >
2015-10-28 14:35:39 +03:00
< p > Serializers may be rendered as forms by using the < code > render_form< / code > template tag, and including the serializer instance as context to the template.< / p >
< p > The following view demonstrates an example of using a serializer in a template for viewing and updating a model instance:< / p >
< p > < strong > views.py< / strong > :< / p >
< pre > < code > from django.shortcuts import get_object_or_404
from my_project.example.models import Profile
from rest_framework.renderers import TemplateHTMLRenderer
from rest_framework.views import APIView
class ProfileDetail(APIView):
renderer_classes = [TemplateHTMLRenderer]
template_name = 'profile_detail.html'
def get(self, request, pk):
profile = get_object_or_404(Profile, pk=pk)
serializer = ProfileSerializer(profile)
return Response({'serializer': serializer, 'profile': profile})
def post(self, request, pk):
profile = get_object_or_404(Profile, pk=pk)
2016-02-05 18:25:03 +03:00
serializer = ProfileSerializer(profile, data=request.data)
2015-10-28 14:35:39 +03:00
if not serializer.is_valid():
return Response({'serializer': serializer, 'profile': profile})
2016-02-05 18:25:03 +03:00
serializer.save()
2015-10-28 14:35:39 +03:00
return redirect('profile-list')
< / code > < / pre >
< p > < strong > profile_detail.html< / strong > :< / p >
< pre > < code > {% load rest_framework %}
< html> < body>
< h1> Profile - {{ profile.name }}< /h1>
2015-12-14 15:52:03 +03:00
< form action="{% url 'profile-detail' pk=profile.pk %}" method="POST">
2015-10-28 14:35:39 +03:00
{% csrf_token %}
{% render_form serializer %}
< input type="submit" value="Save">
< /form>
< /body> < /html>
< / code > < / pre >
2015-11-04 17:59:23 +03:00
< h3 id = "using-template-packs" > < a class = "toclink" href = "#using-template-packs" > Using template packs< / a > < / h3 >
2015-10-28 14:35:39 +03:00
< p > The < code > render_form< / code > tag takes an optional < code > template_pack< / code > argument, that specifies which template directory should be used for rendering the form and form fields.< / p >
< p > REST framework includes three built-in template packs, all based on Bootstrap 3. The built-in styles are < code > horizontal< / code > , < code > vertical< / code > , and < code > inline< / code > . The default style is < code > horizontal< / code > . To use any of these template packs you'll want to also include the Bootstrap 3 CSS.< / p >
< p > The following HTML will link to a CDN hosted version of the Bootstrap 3 CSS:< / p >
< pre > < code > < head>
…
< link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
< /head>
< / code > < / pre >
< p > Third party packages may include alternate template packs, by bundling a template directory containing the necessary form and field templates.< / p >
< p > Let's take a look at how to render each of the three available template packs. For these examples we'll use a single serializer class to present a "Login" form.< / p >
< pre > < code > class LoginSerializer(serializers.Serializer):
email = serializers.EmailField(
max_length=100,
style={'placeholder': 'Email'}
)
password = serializers.CharField(
max_length=100,
style={'input_type': 'password', 'placeholder': 'Password'}
)
remember_me = serializers.BooleanField()
< / code > < / pre >
< hr / >
2015-11-04 17:59:23 +03:00
< h4 id = "rest_frameworkvertical" > < a class = "toclink" href = "#rest_frameworkvertical" > < code > rest_framework/vertical< / code > < / a > < / h4 >
2015-10-28 14:35:39 +03:00
< p > Presents form labels above their corresponding control inputs, using the standard Bootstrap layout.< / p >
< p > < em > This is the default template pack.< / em > < / p >
< pre > < code > {% load rest_framework %}
...
< form action="{% url 'login' %}" method="post" novalidate>
{% csrf_token %}
{% render_form serializer template_pack='rest_framework/vertical' %}
< button type="submit" class="btn btn-default"> Sign in< /button>
< /form>
< / code > < / pre >
< p > < img alt = "Vertical form example" src = "../../img/vertical.png" / > < / p >
< hr / >
2015-11-04 17:59:23 +03:00
< h4 id = "rest_frameworkhorizontal" > < a class = "toclink" href = "#rest_frameworkhorizontal" > < code > rest_framework/horizontal< / code > < / a > < / h4 >
2015-10-28 14:35:39 +03:00
< p > Presents labels and controls alongside each other, using a 2/10 column split.< / p >
< p > < em > This is the form style used in the browsable API and admin renderers.< / em > < / p >
< pre > < code > {% load rest_framework %}
...
< form class="form-horizontal" action="{% url 'login' %}" method="post" novalidate>
{% csrf_token %}
{% render_form serializer %}
< div class="form-group">
< div class="col-sm-offset-2 col-sm-10">
< button type="submit" class="btn btn-default"> Sign in< /button>
< /div>
< /div>
< /form>
< / code > < / pre >
< p > < img alt = "Horizontal form example" src = "../../img/horizontal.png" / > < / p >
< hr / >
2015-11-04 17:59:23 +03:00
< h4 id = "rest_frameworkinline" > < a class = "toclink" href = "#rest_frameworkinline" > < code > rest_framework/inline< / code > < / a > < / h4 >
2015-10-28 14:35:39 +03:00
< p > A compact form style that presents all the controls inline.< / p >
< pre > < code > {% load rest_framework %}
...
< form class="form-inline" action="{% url 'login' %}" method="post" novalidate>
{% csrf_token %}
{% render_form serializer template_pack='rest_framework/inline' %}
< button type="submit" class="btn btn-default"> Sign in< /button>
< /form>
< / code > < / pre >
< p > < img alt = "Inline form example" src = "../../img/inline.png" / > < / p >
2015-11-04 17:59:23 +03:00
< h2 id = "field-styles" > < a class = "toclink" href = "#field-styles" > Field styles< / a > < / h2 >
2015-10-28 14:35:39 +03:00
< p > Serializer fields can have their rendering style customized by using the < code > style< / code > keyword argument. This argument is a dictionary of options that control the template and layout used.< / p >
< p > The most common way to customize the field style is to use the < code > base_template< / code > style keyword argument to select which template in the template pack should be use.< / p >
< p > For example, to render a < code > CharField< / code > as an HTML textarea rather than the default HTML input, you would use something like this:< / p >
< pre > < code > details = serializers.CharField(
max_length=1000,
style={'base_template': 'textarea.html'}
)
< / code > < / pre >
< p > If you instead want a field to be rendered using a custom template that is < em > not part of an included template pack< / em > , you can instead use the < code > template< / code > style option, to fully specify a template name:< / p >
< pre > < code > details = serializers.CharField(
max_length=1000,
style={'template': 'my-field-templates/custom-input.html'}
)
< / code > < / pre >
< p > Field templates can also use additional style properties, depending on their type. For example, the < code > textarea.html< / code > template also accepts a < code > rows< / code > property that can be used to affect the sizing of the control.< / p >
< pre > < code > details = serializers.CharField(
max_length=1000,
style={'base_template': 'textarea.html', 'rows': 10}
)
< / code > < / pre >
< p > The complete list of < code > base_template< / code > options and their associated style options is listed below.< / p >
< table >
< thead >
< tr >
< th > base_template< / th >
< th > Valid field types< / th >
< th > Additional style options< / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > input.html< / td >
< td > Any string, numeric or date/time field< / td >
< td > input_type, placeholder, hide_label< / td >
< / tr >
< tr >
< td > textarea.html< / td >
< td > < code > CharField< / code > < / td >
< td > rows, placeholder, hide_label< / td >
< / tr >
< tr >
< td > select.html< / td >
2016-10-14 16:33:49 +03:00
< td > < code > ChoiceField< / code > or relational field types< / td >
2015-10-28 14:35:39 +03:00
< td > hide_label< / td >
< / tr >
< tr >
< td > radio.html< / td >
2016-10-14 16:33:49 +03:00
< td > < code > ChoiceField< / code > or relational field types< / td >
2015-10-28 14:35:39 +03:00
< td > inline, hide_label< / td >
< / tr >
< tr >
< td > select_multiple.html< / td >
2016-10-14 16:33:49 +03:00
< td > < code > MultipleChoiceField< / code > or relational fields with < code > many=True< / code > < / td >
2015-10-28 14:35:39 +03:00
< td > hide_label< / td >
< / tr >
< tr >
< td > checkbox_multiple.html< / td >
2016-10-14 16:33:49 +03:00
< td > < code > MultipleChoiceField< / code > or relational fields with < code > many=True< / code > < / td >
2015-10-28 14:35:39 +03:00
< td > inline, hide_label< / td >
< / tr >
< tr >
< td > checkbox.html< / td >
< td > < code > BooleanField< / code > < / td >
< td > hide_label< / td >
< / tr >
< tr >
< td > fieldset.html< / td >
< td > Nested serializer< / td >
< td > hide_label< / td >
< / tr >
< tr >
< td > list_fieldset.html< / td >
2016-10-14 16:33:49 +03:00
< td > < code > ListField< / code > or nested serializer with < code > many=True< / code > < / td >
2015-10-28 14:35:39 +03:00
< td > hide_label< / td >
< / tr >
< / tbody >
< / table >
< / div > <!-- /span -->
< / div > <!-- /row -->
< / div > <!-- /.fluid - container -->
< / div > <!-- /.body content -->
< div id = "push" > < / div >
< / div > <!-- /.wrapper -->
< footer class = "span12" >
< p > Documentation built with < a href = "http://www.mkdocs.org/" > MkDocs< / a > .
< / p >
< / footer >
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
< script src = "../../js/jquery-1.8.1-min.js" > < / script >
< script src = "../../js/prettify-1.0.js" > < / script >
< script src = "../../js/bootstrap-2.1.1-min.js" > < / script >
2016-05-26 13:48:39 +03:00
< script src = "https://fund.django-rest-framework.org/sidebar_include.js" > < / script >
2015-10-28 14:35:39 +03:00
< script > var base _url = '../..' ; < / script >
< script src = "../../mkdocs/js/require.js" > < / script >
< script src = "../../js/theme.js" > < / script >
< script >
var shiftWindow = function() {
scrollBy(0, -50)
};
if (location.hash) shiftWindow();
window.addEventListener("hashchange", shiftWindow);
$('.dropdown-menu').on('click touchstart', function(event) {
event.stopPropagation();
});
// Dynamically force sidenav/dropdown to no higher than browser window
$('.side-nav, .dropdown-menu').css('max-height', window.innerHeight - 130);
$(function() {
$(window).resize(function() {
$('.side-nav, .dropdown-menu').css('max-height', window.innerHeight - 130);
});
});
< / script >
< / body >
< / html >
