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>
Related
I'm running my code through validator and it's coming back with four errors which I don't know how to fix as the code has been imported from django forms.
Does anyone know how to fix these?
<div class="form-group">
<form method="POST">
<input type="hidden" name="csrfmiddlewaretoken" value="...">
<p><label for="id_username">Username:</label> <input type="text" name="username" maxlength="150" autofocus class="form-control" required id="id_username"> <span class="helptext">Required. 150 characters or
fewer. Letters, digits and #/./+/-/_ only.</span></p>
<p><label for="id_first_name">First name:</label> <input type="text" name="first_name" class="form-control" maxlength="100" required id="id_first_name"></p>
<p><label for="id_last_name">Last name:</label> <input type="text" name="last_name" class="form-control" maxlength="100" required id="id_last_name"></p>
<p><label for="id_email">Email:</label> <input type="email" name="email" required id="id_email"></p>
<p><label for="id_password1">Password:</label> <input type="password" name="password1" autocomplete="new-password" class="form-control" required id="id_password1"> <span class="helptext">
<ul>
<li>Your password can’t be too similar to your other personal information.</li>
<li>Your password must contain at least 8 characters.</li>
<li>Your password can’t be a commonly used password.</li>
<li>Your password can’t be entirely numeric.</li>
</ul>
</span></p>
<p><label for="id_password2">Password confirmation:</label> <input type="password" name="password2" autocomplete="new-password" class="form-control" required id="id_password2"> <span class="helptext">Enter the same password as before, for verification.</span></p>
<div class="d-grid">
<button class="btn btn-dark ">Register</button>
</div>
</form>
</div>
I have used:
from django import forms
and in my views.py file I used:
from .forms import SignUpForm
my register.html page is as following:
{% extends 'base.html' %}
{% block title %}Register{% endblock %}
{% block content %}
<h1 class="my-4">Register</h1>
<div class="form-group">
<form method="POST">
{% csrf_token %}
{{ form.as_p }}
<div class="d-grid">
<button class="btn btn-dark ">Register</button>
</div>
</form>
</div>
{% endblock %}
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>
This html form is not submitting data and i don't know why.I have tried to find the error and i do not seem to get around it,any help will be gladly appreciated
{% extends 'registration/base.html' %}
{% load widget_tweaks %}
{% block title %}Create account{% endblock %}
{% block body %}
<div class="container" style="padding-top:20px">
<div class="row">
<div class="col-md-4 card jumbotron ">
<h2><span class="badge badge-light">Create Account</span></h2><br>
<form action="{% url 'tzuzz:create_account' %}" method="post">
{% csrf_token %}
<div class="form-group">
<label>Email </label>
<input class="form-control is-valid" type="text" name="email" placeholder="Email">
<label>Names</label>
<input class="form-control is-valid" type="text" name="names" placeholder="Enter first and last name">
<label>Sex</label>
<select class="form-control" name="sex">
<option>Male</option>
<option>Female</option>
</select>
<label>Date of birth</label>
<input class="form-control is-valid" name="date" type="date">
<label>Password</label>
<input class="form-control is-valid" type="password" name="password" placeholder="Password">
</div>
<button class="btn btn-secondary">Login</button>
</form>
<br><br>
{% if error %}
<p class="alert alert-danger alert-dismissible fade show" role="alert">
{{error}}
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</p>
{% endif %}
</div>
</div>
{% endblock %}
Here is the answer i forgot to include type submit in my button
<button class="btn btn-secondary" type="submit">Login</button>
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.
Here is my template code for the register form
<form id="user_form" method="post" action="/accounts/register/">
{% csrf_token %}
{{ user_form }}
<br>
<input type="submit" class="btn btn-default pull-right" value="Register">
<br>
</form>
When I inspect the html of my live site or my local environment I see the following html
<form id="user_form" method="post" action="/accounts/register/">
<input type="hidden" name="csrfmiddlewaretoken" value="blah">
<label for="id_username">Username:</label><input class="form-control" id="id_username" name="username" type="text">
<label for="id_email">Email:</label><input class="form-control" id="id_email" name="email" type="email">
<label for="id_password">Password:</label><input class="form-control" id="id_password" name="password" type="password">
<br>
<input type="submit" class="btn btn-default pull-right" value="Register">
<br>
</form>
But when I validate on W3C I am getting errors because my form
Stray start tag tr. <tr><th><label for="id_username">Username:</label></th><td><inp…
And I see the markup has changed
<form id="user_form" method="post" action="/accounts/register/">
<input type='hidden' name='csrfmiddlewaretoken' value='blah' />
<tr><th><label for="id_username">Username:</label></th><td><input class="form-control" id="id_username" name="username" type="text" /></td></tr>
<tr><th><label for="id_email">Email:</label></th><td><input class="form-control" id="id_email" name="email" type="email" /></td></tr>
<tr><th><label for="id_password">Password:</label></th><td><input class="form-control" id="id_password" name="password" type="password" /></td></tr>
<br>
<input type="submit" class="btn btn-default pull-right" value="Register">
<br>
</form>
You just need to use:
{{ user_form.as_p }}
That will render the form's labels and fields inside of <p> tags. The docs give you a few options regarding output, or you can manually render the form by iterating the fields, as follows:
<!-- first output any hidden fields first -->
<div style="display: none;">
<!-- I've wrapped this in a div for W3C validation -->
{{ user_form.hidden_fields }}
</div>
{% for field in user_form.visible_fields %}
<div class="some-class">
{{ field.label_tag }}
{{ field }}
</div><!--/.some-class-->
{% endfor %}
I'd recommend giving the above a try, just to experiment with manual rendering.