I have this template:
<form role="form">
<div class="form-group">
{% bootstrap_field form.username %}
</div>
<div class="form-group">
{% bootstrap_field form.password %}
</div>
<input type="submit" value="Enviar" class="btn btn-info btn-block">
</div>
</form>
The submit button is not working what I doing bad? i've read other answers and still not working, thanks for your help!!!.
With a regular HTML form, you would need to specify a couple of attributes in <form>
You need to provide a target page where the form will be processed:
action="http://script_url_here"
You should also specify the method by which the data will be sent (either GET or POST):
method="POST"
One other thing: you had an extra </div> at the end of your form. After making those changes, your form would now look like this:
<form role="form" action="http://script_url_here" method="POST">
<div class="form-group">
{% bootstrap_field form.username %}
</div>
<div class="form-group">
{% bootstrap_field form.password %}
</div>
<input type="submit" value="Enviar" class="btn btn-info btn-block">
<!-- You had an extra </div> here -->
</form>
There are other attributes that could and ought to be specified, but they are optional.
Related
I have a form with three fields field1,field2,field3 - in my template I want to show those fields at specific places, and not together. At best field1, field2 are "shown together" and then a bit further down, I need field3 to be shown.
My HTML is right now
<div class="content-section">
<div class="add-link-wrapper">
<legend class="border-bottom mb-4">
Add product
</legend>
<form method="POST">
{% csrf_token %}
{{form|crispy}}
<div class="form-group">
<button class="btn btn-outline-info" type="submit">Add</button>
</div>
</form>
</div>
</div>
but {{form}} shows all three fields - I would like to have it a bit like
<div class="content-section">
<div class="add-link-wrapper">
<legend class="border-bottom mb-4">
Tilføj produkt til tracking
</legend>
<form method="POST">
{% csrf_token %}
{{form.field1 and form.field2 |crispy}} <!-- Show field1 and field 2 here -->
<div class="form-group">
</div>
</form>
some more html code
</div>
{{form.field3|crispy}} <!-- Show field3 here -->
<button class="btn btn-outline-info" type="submit">Add</button>
</div>
You can use the crispy's as_crispy_field to achieve that. This also means you will display each field individually by yourself and not the usual looping through the form by the Django template. Your code should look like this
<div class="content-section">
<div class="add-link-wrapper">
<legend class="border-bottom mb-4">
Tilføj produkt til tracking
</legend>
<form method="POST">
{% csrf_token %}
<!-- Show field1 and field 2 here -->
<div class="form-group">
{{form.field1|as_crispy_field}}
</div>
<div class="form-group">
{{form.field2|as_crispy_field}}
</div>
<span>some more html code</span>
<!-- Show field3 here -->
<div class="form-group">
{{form.field3|as_crispy_field}}
</div>
<button class="btn btn-outline-info" type="submit">Add</button>
</form>
</div>
</div>
I have used django's default registration. I want to edit this forms because it's appearance does not look very good to me. I want to convert the instructions into tool tip or something better looking how can I do it?I am new to django
)
html
<div class="header-wrapper">
<div class="header" style="background-image: url('/static/img/tele-bg.jpg');">
<div class="title-container text-center">
<h2>Register</h2>
<form method="post">
{% csrf_token %}
{{ form.as_p }}
<button type="submit" class="btn btn-primary">Register</button>
</form>
</div>
</div>
</div>
For this you can use django bootstrap forms or you can make your own custom tempalate for registering the user.
If you want django bootstrap form which are pretty good you can try like this:
First install pip install django-bootstrap4
Then add the bootstrap4 into your INSTALLED_APPS:
INSTALLED_APPS = [
...........
'bootstrap4',]
Then you can render the forms in your template with this tag:
{% load bootstrap4 %}
<div class="header-wrapper">
<div class="header" style="background-image: url('/static/img/tele-bg.jpg');">
<div class="title-container text-center">
<h2>Register</h2>
<form method="post">
{% csrf_token %}
{% bootstrap_form form %}
<button type="submit" class="btn btn-primary">Register</button>
</form>
</div>
</div>
</div>
EDIT: This is just a demo you can change this design as you want:
<div class="header-wrapper">
<div class="header" style="background-image: url('/static/img/tele-bg.jpg');">
<div class="title-container text-center">
<h2>Register</h2>
<form method="post">
{% csrf_token %}
Username:<br>
<input type="text" name="username" placeholder="Username"><br>
Password:<br>
<input type="password" name="password1" placeholder="Password"><br>
Password Confirmation:<br>
<input type="password" name="password2" placeholder="Confirm Password"><br><br>
<input type="submit" value="Submit">
</form>
<button type="submit" class="btn btn-primary">Register</button>
</form>
</div>
</div>
</div>
I created a sign up form by extending Django's UserCreationForm. Since Django adds all HTMLs by default I can't put my own HTML in it, just to customize it a bit.
This is how my current signup form looks like:
you can see password and password confirmation are added one after another. I would like to show them side by side, something like this:
I don't know where to add my HTML to make it look like the one above, this is my signup.html here:
{% block content %}
<form action="." method="POST" class="signup">
<h4 class="display-6 bg-secondary text-white p-3">Create your account</h4>
{% csrf_token %}
{{ form|crispy }}
<input type="submit" value="Sign up" class="btn btn-primary btn-block">
<p class="display-6 bg-signup p-3">Have an account Sign In</p>
</form>
{% endblock content %}
No one answered my question within last 36 hours. Finally just now I find an answer to my own question. So I am answering my own question, maybe someone in the future read it and find it useful.
After adding my custom HTML and CSS I finally manage to show two password fields side by side like this:
I used django-widget-tweaks to achieve this result:
as you can see in above picture, two password fields are added side by side. Moreover, errors are shown as well.
this was the previous html form:
{% block content %}
<form action="." method="POST" class="signup">
<h4 class="display-6 bg-secondary text-white p-3">Create your account</h4>
{% csrf_token %}
{{ form|crispy }}
<input type="submit" value="Sign up" class="btn btn-primary btn-block">
<p class="display-6 bg-signup p-3">Have an account Sign In</p>
</form>
{% endblock content %}
Now the HTML codes look like this one below, the code pretty much explains itself. So I don't feel to elaborate it. I used bootstrap 4.
{% block content %}
<div class="accountform">
<form method="POST">
<h4 class="display-6 text-white p-3">Create your account</h4>
{% csrf_token %}
<div class="alert alert-danger p-0" style="border:none;">
{% for field in form.visible_fields %}
{% for error in field.errors %}
<span class="err">{{ error }}</span><br>
{% endfor %}
{% endfor %}
</div>
<div class="form-group">
<label for="id_username">Username</label>
{% render_field form.username class='form-control' placeholder='John Doe' %}
</div>
<div class="form-group">
<label for="id_email">Email</label>
{% render_field form.email class='form-control' placeholder='johndoe#email.com' %}
</div>
<div class="row">
<div class="form-group col-md-6">
<label for="id_password1">Password</label>
{% render_field form.password1 class='form-control' placeholder='****' %}
</div>
<div class="form-group col-md-6">
<label for="id_password2">Confirm Password</label>
{% render_field form.password2 class='form-control' placeholder='****' %}
</div>
</div>
<input type="submit" value="Sign up" class="btn btn-primary btn-block">
<p class="display-6 bg-signup p-3">Have an account Sign In</p>
</form>
</div>
</div>
{% endblock content %}
dont' forget to add {% load widget_tweaks %} at the top of your template.
Thanks
This is my html code:
<form id="commentform" action="." method="post">
{% csrf_token %}
<label for="comment">Comment</label>
<textarea></textarea>
<div class="clearfix"></div>
<input type="submit" id="submit" name="body" value="send">
<div class="clearfix"></div>
</form>
I'm using this form to send data but instead of sending any input from user it always sends "Send" to server. How to cope with it, any help will be appreciated.
Try adding a name="" as a textarea attribute.
Try using:
<form id="commentform" action="." method="post">
{% csrf_token %}
<label for="comment">Comment</label>
<textarea name="textarea"></textarea>
<div class="clearfix"></div>
<input type="submit" id="submit" name="submit" value="Send">
<div class="clearfix"></div>
</form>
I've been following the How to Django 1.9 tutorials and I came across a problem. My registration_form.html has been working properly ever since installment but after adding bootstrap to the template, the registration button has no action. This is the registration_form.html without the bootstrap
{% extends "rango/base.html" %}
{% block body_block %}
<h1>Register Here</h1>
<form method="post" action=".">
{% csrf_token %}
{{ form.as_p }}
<input type="submit" value="Submit" />
</form>
{% endblock %}
This is the registration_template with the bootstrap
{% extends 'rango/base.html' %}
{% block body_block %}
<link href="http://v4-alpha.getbootstrap.com/examples/signin/signin.css" rel="stylesheet">
<div class="jumbotron">
<h1 class="display-5">Register</h1>
</div>
<form role="form" method='post' action='.'>
{% csrf_token %}
<div class="form-group">
<p class="required"><label class="required" for="id_username">Username:</label>
<input class="form-control" id="id_username" maxlength="30" name="username" type="text" />
<span class="helptext">
Required. 30 charachters or fewer. Letters, digits and #/./+/-/_ only.
</span>
</p>
<p class="required"><label class="required" for="id_email">Email:</label>
<input class="form-control" id="id_email" name="email" type="email"/>
</p>
<p class="required"><label class="required" for="id_password1">Password:</label>
<input class="form-control" id="id_password1" name="password1" type="password"/>
</p>
<p class="required"><label class="required" for="id_password2">Password Confirmation:</label>
<input class="form-control" id="id_password2" name="password2" type="password" />
</p>
</div>
<button type="submit" class="btn btn-primary" value='Submit'>Submit</button>
</form>
<p>
Already a member?
Log In Here!
</p>
{% endblock %}
Add url in your template form under action attribute as showed below:
<form role="form" method='post' action='{% url 'example' %}'>
This may fix your issues!!!.Make sure that your form has no errors.Try to add your views.py,urls.py and models.py, so we can figure it out easily.
Must be an input type not a button type use <input type="submit" class="btn btn-primary" value='Submit'>Submit</button> instead
<button type="submit" class="btn btn-primary" value='Submit'>Submit</button>