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

post 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

editar: este es el resultado cuando el usuario {{form.as_table}}

Answer 1

Usar el valor predeterminado {% 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

Por lo tanto, puede orientar la label en su hoja de estilo CSS usando:

label {
width: 15%;
}

Answer 2

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

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

Soluciona el molesto problema de formato y se ve decente.

Answer 3

Publicando mi solución esperando que ayude a alguien más un día. Sabía que diseñarí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. es decir

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

Así que agregué 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 configurar sus clases, puede configurar fácilmente sus clases o su 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 4

Eche un vistazo a Personalizar la plantilla de formulario . Esta es una solución posible.

Tal vez simplemente puede usar CSS para darle un estilo a su formulario y presentarlo como desee. (es decir, as_table () ).

Answer 5

Existen varios enfoques, tal como se detalla en esta publicación , sin embargo, descubrí que a veces los atributos del widget pueden no funcionar de la manera que usted desea.

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

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

Tiene campos de input y de área de textarea en su formulario para que su CSS sea:

input, textarea{
width:350px;
}

No olvides llamar a tu archivo CSS en la parte superior de tu plantilla html:

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

Aquí hay una instantánea de lo que tengo para mi propia forma: