I am trying to add HTML5 placeholder attribute to Deform 2.0 TextInputWidget
. However I am not sure if this should be supported or how this should be supported as documentation is not very clear about this - there seems to be some mask_placeholder feature which doesn't be what I want.
How to add HTML5 placeholder to Deform text input (2.0+)?
EDIT: As of Deform 2.0.7, HTML5 attributes are supported.
https://docs.pylonsproject.org/projects/deform/en/latest/changes.html
Ok - the trick is to have a custom template - Deform templates did not yet have support for placeholder:
<!--! This adds placeholder attribute support for TextInput.
-->
<span tal:define="name name|field.name;
css_class css_class|field.widget.css_class;
oid oid|field.oid;
mask mask|field.widget.mask;
mask_placeholder mask_placeholder|field.widget.mask_placeholder;
style style|field.widget.style;
placeholder field.widget.placeholder|nothing;
type field.widget.type|'text';
"
tal:omit-tag="">
<input type="${type}" name="${name}" value="${cstruct}"
tal:attributes="class string: form-control ${css_class};
style style;
placeholder placeholder;"
id="${oid}"/>
<script tal:condition="mask" type="text/javascript">
deform.addCallback(
'${oid}',
function (oid) {
$("#" + oid).mask("${mask}",
{placeholder:"${mask_placeholder}"});
});
</script>
</span>
And then you can define your widget as:
class InviteFriends(CSRFSchema):
email = c.SchemaNode(
c.String(),
missing=None,
validator=c.Email(),
widget=w.TextInputWidget(template="textinput_placeholder", type="email", placeholder="Friend's email"),
)
phone_number = c.SchemaNode(
c.String(),
missing=None,
validator=c.Length(min=7),
widget=w.TextInputWidget(template="textinput_placeholder", type="tel", placeholder="Friend's phone number"),
)