如何在Django中的CharField上添加占位符?

时间:2010-11-04 20:51:57

标签: python django django-forms

以这个非常简单的形式为例:

class SearchForm(Form):
    q = forms.CharField(label='search')

这将在模板中呈现:

<input type="text" name="q" id="id_q" />

但是,我想将placeholder属性添加到此字段,其值为Search,以便HTML看起来像:

<input type="text" name="q" id="id_q" placeholder="Search" />

最好我想通过字典或类似的方式将占位符值传递给表单类中的CharField

q = forms.CharField(label='search', placeholder='Search')

实现这一目标的最佳方法是什么?

9 个答案:

答案 0 :(得分:257)

查看widgets documentation。基本上它看起来像:

q = forms.CharField(label='search', 
                    widget=forms.TextInput(attrs={'placeholder': 'Search'}))

更多的写作,是的,但这种分离可以更好地抽象出更复杂的案例。

您还可以直接在widgets子类的<field name> => <widget instance>上声明包含Meta映射的ModelForm属性。

答案 1 :(得分:53)

对于ModelForm,您可以使用Meta类:

from django import forms

from .models import MyModel

class MyModelForm(forms.ModelForm):
    class Meta:
        model = MyModel
        widgets = {
            'name': forms.TextInput(attrs={'placeholder': 'Name'}),
            'description': forms.Textarea(
                attrs={'placeholder': 'Enter description here'}),
        }

答案 2 :(得分:34)

其他方法都很好。但是,如果您不想指定字段(例如,对于某些动态方法),则可以使用:

def __init__(self, *args, **kwargs):
    super(MyForm, self).__init__(*args, **kwargs)
    self.fields['email'].widget.attrs['placeholder'] = self.fields['email'].label or 'email@address.nl'

它还允许占位符依赖于具有指定实例的ModelForms的实例。

答案 3 :(得分:20)

您可以使用此代码为您表单中的每个TextInput字段添加占位符attr。占位符文本将从模型字段标签中获取。

class PlaceholderDemoForm(forms.ModelForm):
    def __init__(self, *args, **kwargs):
        super(PlaceholderDemoForm, self).__init__(*args, **kwargs)
        for field_name in self.fields:
            field = self.fields.get(field_name)  
            if field:
                if type(field.widget) in (forms.TextInput, forms.DateInput):
                    field.widget = forms.TextInput(attrs={'placeholder': field.label})

    class Meta:
        model = DemoModel

答案 4 :(得分:12)

好问题。我知道有三种解决方案:

解决方案#1

替换默认小部件。

class SearchForm(forms.Form):  
    q = forms.CharField(
            label='Search',
            widget=forms.TextInput(attrs={'placeholder': 'Search'})
        )

解决方案#2

自定义默认小部件。如果您正在使用该字段通常使用的相同小部件,那么您可以简单地自定义该小部件,而不是实例化一个全新的小部件。

class SearchForm(forms.Form):  
    q = forms.CharField(label='Search')

    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.fields['q'].widget.attrs.update({'placeholder': 'Search'})

解决方案#3

最后,如果您正在使用模型表单(以及前两个解决方案),您可以选择通过设置{{为字段指定自定义窗口小部件1}}内部widgets类的属性。

Meta

答案 5 :(得分:1)

当您只想覆盖其占位符时,不知道如何实例化窗口小部件是不可取的。

const express = require("express");
const bodyParser = require("body-parser");
const app = express();
app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json());
app.post('/contact', (req, res) => {
    let body = req.body;
    console.log(body);

    body.message = "Hello " + body.name;
    res.send(body);
});
app.listen(3000, () => {
    console.log("Server is listening on 3000");
});

答案 6 :(得分:0)

大多数时候,我只希望所有占位符等于模型中定义的字段的详细名称

我添加了一个mixin,可以轻松地对我创建的任何表单执行此操作,

 SELECT
    COUNT(*) noofrecords,
    EXTRACT(MONTH FROM start_date) order_by,
    TO_CHAR(TO_DATE(EXTRACT(MONTH FROM start_date), 'MM'), 'month') value
FROM
    tab_name
WHERE
    EXTRACT(YEAR FROM start_date) = 2019
    AND CASE 'MONTH'  ----- getting this value from a variable
        WHEN 'MONTH'   THEN EXTRACT(MONTH FROM start_date)
    END = 2            ----- setting this value from a variable
GROUP BY
    CASE 'YEAR'    ----- getting this value from a variable 
        WHEN 'YEAR'   THEN EXTRACT(MONTH FROM start_date)
    END
ORDER BY
    order_by
    enter code here

  public static string CurrentUser()
    {
        string loginuser= System.Web.HttpContext.Current.User.Identity.Name;
        if(loginuser != "")
        {
            using (var cntx = new EdmxEntities())
            {
                return cntx.Users.Where(s => s.Email == loginuser).Select(x => x.Id).FirstOrDefault();
            }
        }
        return loginuser;

    }

答案 7 :(得分:-1)

class FormClass(forms.ModelForm):
    class Meta:
        model = Book
        fields = '__all__'
        widgets = {
            'field_name': forms.TextInput(attrs={'placeholder': 'Type placeholder text here..'}),
        }

答案 8 :(得分:-2)

看完你的方法后,我用这种方法解决了。

class Register(forms.Form):
    username = forms.CharField(label='用户名', max_length=32)
    email = forms.EmailField(label='邮箱', max_length=64)
    password = forms.CharField(label="密码", min_length=6, max_length=16)
    captcha = forms.CharField(label="验证码", max_length=4)

def __init__(self, *args, **kwargs):
    super().__init__(*args, **kwargs)
    for field_name in self.fields:
        field = self.fields.get(field_name)
        self.fields[field_name].widget.attrs.update({
            "placeholder": field.label,
            'class': "input-control"
        })