Pythonic Django Form Charfield CSS

我有一个Django Charfield表单，我想通过CSS改变。我想用两种方法来改变它。

 1. Width = 300 (solution below)
 2. Submit button inline with the input field (no idea)

forms.py:

class SheetForm(forms.Form):
    sheet_lookup = forms.CharField(max_length=30)

在我的index.html模板中使用:

{% extends "check/base.html" %}
{% block content %}
<div>
<form method="POST" class="post-form">
    {% csrf_token %}
    <h1>Scan Here:</h1>{{ form.as_p }}
    <button type="submit" class="save btn btn-default">Scan</button>
</form>
</div>
{% endblock %}

my base.html:

{% load staticfiles %}
<html>
<head>
    <title>Sheet Checker</title>
    <link href="http://fonts.googleapis.com/css?family=Francois+One" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="{% static "css/main.css" %}">
</head>
<body>
    <div>
        <h1><a href="{% url 'index' %}">Sheet Check</a></h1>
    </div>
    <div>
        {% block content %}
        {% endblock %}
    </div>
</body>
</html>

我有一个forms.py工作:

class SheetForm(forms.Form):
    sheet_lookup = forms.CharField(
                         max_length=30, 
                         widget=forms.TextInput(attrs={'style':'width:300;'}))

但是我不认为这是影响宽度变化的正确方法。

另外，我完全坚持让按钮与输入字段

内联

对于宽度，你可以做你提到的，即在表单中设置widget属性，或者你可以在模板中做，如下所示-

index . html

{% extends "check/base.html" %}
{% block content %}
<div>
<form method="POST" class="post-form">
    {% csrf_token %}
    <h1>Scan Here:</h1>
    {% for field in form %}
        {{ field.errors }}
        {{ field.label_tag }}
        <input type="text" maxlength="30" style="width:300;" id="{{ field.auto_id }}" name="{{ field.html_name }}"/>
    {% endfor %}
    <button type="submit" class="save btn btn-default">Scan</button>
</form>
</div>
{% endblock %}

这将帮助你理解它。

编辑(对css表执行相同操作)-你只需使用一个类而不是内联样式。

{% extends "check/base.html" %}
{% block content %}
<div>
<form method="POST" class="post-form">
    {% csrf_token %}
    <h1>Scan Here:</h1>
    {% for field in form %}
        {{ field.errors }}
        {{ field.label_tag }}
        <input type="text" maxlength="30" class="fixed-width" id="{{ field.auto_id }}" name="{{ field.html_name }}"/>
    {% endfor %}
    <button type="submit" class="save btn btn-default">Scan</button>
</form>
</div>
{% endblock %}

和在style.css

.fixed-width {
    width: 300px,
}

OP编辑 -修正了从{% field.errors %}到{{ field.errors }}和{% field.label_tag %}到{{field.label_tag}}在Django 1.8中工作的格式

index . html

相关内容

最新更新

热门标签：