question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Want ability to set placeholder text separately from label in fields

See original GitHub issue

Currently blocks contain only a label field, which renders to the field label and placeholder text. Ideally I’d like to set the placeholder text separately.

For instance, say I have an email field. I’d want it to be:

label: Email placeholder: you@example.com

This helps guide the user on the sort of content they need to enter into the field.

Issue Analytics

  • State:closed
  • Created 8 years ago
  • Reactions:5
  • Comments:18 (14 by maintainers)

github_iconTop GitHub Comments

1reaction
zeroepixcommented, Aug 10, 2020

I’ve not done a PR before, nor worked with rst doc but I’ve given it a go here: forked repo / pull request #6309

Let me know if I should put it somewhere else or make any changes.

1reaction
zeroepixcommented, Jul 30, 2020

For anyone ending up here trying to figure out how to add a simple placeholder to a field in Wagtail’s admin view, and end up scratching their heads, it’s actually quite easy. Say you’ve made a soldier model that content creators will use, and you want to put a placeholder in the field, just do something like this:

# models.py
from django import forms
from django.db import models
from wagtail.admin import widgets # to use wagtails special datetime widget

class Soldier(models.Model)::
    name = models.CharField(max_length=48)
    date_of_birth = models.DateField(null=True, default=None, blank=True)
    serial_number = models.DecimalField(null=True, default=None, blank=True)
    
    panels = [
        MultiFieldPanel(
            [
                FieldRowPanel(
                    children = (
                        FieldPanel('name', widget=forms.TextInput(attrs={'placeholder': 'Enter Full Name'})),
                        FieldPanel('date_of_birth', widget=widgets.AdminDateInput(attrs={'placeholder':'dd-mm-yyyy'})),
                        FieldPanel('height', widget=forms.NumberInput(attrs={'placeholder': 'in cm only'})),
                    )
                ),
            ],
            heading = "Personal Information",
            classname = "collapsible"

You can select from the widgets here, plus whatever you find in wagtail\admin\widgets.py

Read more comments on GitHub >

github_iconTop Results From Across the Web

Is there anyway to place the placeholder text above the input ...
Move the <input /> inside of the <label /> and display: block; it. If you want to separately style the text, wrap it...
Read more >
Placeholder Research - Low Vision Accessibility Task Force
Solution 2: Programmatic label that appears like a placeholder: In this method the programmatic label is visually displayed as a placeholder. When user...
Read more >
Is it possible to change placeholder text of registration form ...
I only want to change the placeholder. I saw two separate entries for the “Password Confirmation” field, one was for the field label...
Read more >
Placeholders in Form Fields Are Harmful
Labels tell users what information belongs in a given form field and are usually positioned outside the form field. Placeholder text ...
Read more >
Styling Placeholder Text with CSS | SamanthaMing.com
Use the ::placeholder pseudo-element to style your placeholder text in an <input> or <textarea> form element. Most modern browsers support this, but for...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found