Professional Documents
Culture Documents
Thẻ mới
Thẻ mới
Rendering HTML
Rendering Forms
Field styles
Rendering HTML
In order to return HTML responses you'll need to use either TemplateHTMLRenderer , or
StaticHTMLRenderer .
The TemplateHTMLRenderer 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.
The StaticHTMLRender class expects the response to contain a string of the pre-rendered HTML content.
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.
Here's an example of a view that returns a list of "Profile" instances, rendered in an HTML template:
views.py:
class ProfileList(APIView):
renderer_classes = [TemplateHTMLRenderer]
template_name = 'profile_list.html'
profile_list.html:
<html><body>
<h1>Profiles</h1>
<ul>
{% for profile in profiles %}
<li>{{ profile.name }}</li>
{% endfor %}
</ul>
</body></html>
Rendering Forms
Serializers may be rendered as forms by using the render_form template tag, and including the serializer
instance as context to the template.
The following view demonstrates an example of using a serializer in a template for viewing and updating a
model instance:
views.py:
class ProfileDetail(APIView):
renderer_classes = [TemplateHTMLRenderer]
template_name = 'profile_detail.html'
profile_detail.html:
{% load rest_framework %}
<html><body>
</body></html>
REST framework includes three built-in template packs, all based on Bootstrap 3. The built-in styles are
horizontal , vertical , and inline . The default style is horizontal . To use any of these template
packs you'll want to also include the Bootstrap 3 CSS.
The following HTML will link to a CDN hosted version of the Bootstrap 3 CSS:
<head>
…
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/
</head>
Third party packages may include alternate template packs, by bundling a template directory containing the
necessary form and field templates.
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.
class LoginSerializer(serializers.Serializer):
email = serializers.EmailField(
max_length=100,
style={'placeholder': 'Email', 'autofocus': True}
)
password = serializers.CharField(
max_length=100,
style={'input_type': 'password', 'placeholder': 'Password'}
)
remember_me = serializers.BooleanField()
rest_framework/vertical
Presents form labels above their corresponding control inputs, using the standard Bootstrap layout.
{% load rest_framework %}
...
rest_framework/horizontal
Presents labels and controls alongside each other, using a 2/10 column split.
This is the form style used in the browsable API and admin renderers.
{% load rest_framework %}
...
{% load rest_framework %}
...
Field styles
Serializer fields can have their rendering style customized by using the style keyword argument. This
argument is a dictionary of options that control the template and layout used.
The most common way to customize the field style is to use the base_template style keyword argument to
select which template in the template pack should be use.
For example, to render a CharField as an HTML textarea rather than the default HTML input, you would use
something like this:
details = serializers.CharField(
max_length=1000,
style={'base_template': 'textarea.html'}
)
If you instead want a field to be rendered using a custom template that is not part of an included template
pack, you can instead use the template style option, to fully specify a template name:
details = serializers.CharField(
max_length=1000,
style={'template': 'my-field-templates/custom-input.html'}
)
Field templates can also use additional style properties, depending on their type. For example, the
textarea.html template also accepts a rows property that can be used to affect the sizing of the
control.
details = serializers.CharField(
max_length=1000,
style={'base_template': 'textarea.html', 'rows': 10}
)
The complete list of base_template options and their associated style options is listed below.
input_type, placeholder,
input.html Any string, numeric or date/time field
hide_label, autofocus
textarea.html CharField rows, placeholder, hide_label