¿Cómo formatear los campos de formulario para los comentarios de django?

Question

Estoy usando un formulario que me genera django. Estoy usando esto como un formulario de comentarios después de una publicación en mi blog.

Actualmente rinde bien, pero no está bien alineado. Esto es lo que tengo. Esto es lo que me gustaría.

Gracias

edición: Este es el resultado cuando el usuario {{}} form.as_table

Answer 1

Publicando mi solución esperando que ayude a alguien más algún día. Sabía que aplicaría estilos a los campos con CSS pero no estaba seguro de cómo asignar las clases a cada elemento. Pero si echas un vistazo a la plantilla predeterminada proporcionada, verás que la clase de error se asigna a un campo usando una instrucción if dentro de un ciclo foreach que automáticamente genera cada campo dentro de tu formulario. decir

{% for field in form %}  
< p{% if field.errors %} 
    class="error" 
{% endif %} 
    {{ field.label_tag }}<'/' p> 
{% endfor %} 

por lo que añade a esta funcionalidad.

< p{% if field.errors %} 
    class="error" 
{% endif %} 
{% ifequal field.name "honeypot" %} 
    id="hide" 
{% else %} 
    id="left" 
{% endifequal %}> 
    {{ field.label_tag }}<'/' p> 

mi css siendo

#hide{ 
    display:none; 

} 

#left{ 
    width: 200px; 
    text-align: left; 

} 

#right{ 
    width: 300px; 
    text-align: left; 

} 

Ahora que puede establecer sus clases se pueden configurar fácilmente sus clases o ID dentro de su archivo css. Esto es por los comentarios. Si está utilizando un {{form.as_p}} o {{form.as_table}} para generar su formulario, entonces simplemente configure una clase de formulario general dentro de su CSS para darle un estilo. es decir

form { 
width: 350px; 
padding: 20px; 
border: 1px solid #270644; 
} 

Answer 2

echar un vistazo a Customizing the form template. Esta es una solución posible.

Tal vez simplemente puede usar CSS para dar estilo a su formulario y render the form como desee. (es decir, as_table()).

Answer 3

Utilizando el valor por defecto {% render_comment_form for app.model %} generará:

<p> 
     <label for="id_name">Name</label> 
     <input id="id_name" type="text" name="name" maxlength="50"> 
    </p> 
    <p> 
     <label for="id_email">Email address</label> 
     <input type="text" name="email" id="id_email"> 

</p> 
... etc 

lo tanto, puede orientar label en su hoja de estilos CSS usando:

label { 
    width: 15%; 
} 

Answer 4

sé que es un poco tarde , pero para todos los demás puedes probar esto

<table> 
{{ form.as_table }} 
</table> 

Arregla el molesto problema de formato y parece decente.

Answer 5

Existen múltiples enfoques, como se detalla en this post, sin embargo, encontré que a veces los atributos del widget pueden no funcionar de la forma que usted desea.

Aún así, la mejor y más fácil manera de hacerlo es utilizar CSS:

Render su página que contiene los campos del formulario y hacer algo de inspección (clic derecho> inspeccionar o F12 en Chrome, por ejemplo) para saber qué HTML etiquetas que su formulario genera cuando se procesa. Entonces puedes escribir tu CSS fácilmente.

Usted tiene inputtextarea y los campos del formulario para que su CSS será:

input, textarea{ 
    width:350px; 
} 

No se olvide de pedir su archivo CSS en la parte superior de la plantilla html:

<link rel="stylesheet" type="text/css" href="{% static 'styles/form.css' %}"> 

Aquí es una instantánea de lo que tengo a mi propia forma: