{"id":8955,"date":"2018-05-16T14:44:53","date_gmt":"2018-05-16T19:44:53","guid":{"rendered":"https:\/\/www.mrc-productivity.com\/legacy\/?page_id=8955"},"modified":"2020-04-10T16:18:44","modified_gmt":"2020-04-10T21:18:44","slug":"text-field-properties","status":"publish","type":"page","link":"https:\/\/www.mrc-productivity.com\/legacy\/bootstrap\/text-field-properties","title":{"rendered":"Text Field Properties"},"content":{"rendered":"<h1>Customizing Input Fields with m-Painter<\/h1>\n<p><i>Click <a href=\"https:\/\/www.mrc-productivity.com\/docs\/knowledge-base\/text-field-properties\">here<\/a> to access current documentation for this feature.<\/i><\/p>\n<p>There are many form input helpers built directly into m-Painter. These features assist with varying degrees of form functionality such as setting a max number of characters allowed, the input type and making fields read-only or required. Additionally, these helpers can assist with basic end-user direction by adding placeholders, help text, or descriptive icons.<\/p>\n<p><strong>Note: <\/strong>This article is specific to Bootstrap templates only.<\/p>\n<p><a href=\"https:\/\/www.mrc-productivity.com\/legacy\/images\/textfieldprops\/text-field-props.png\"><img decoding=\"async\" alt=\"Text Field Properties\" class=\"alignnone size-full\" src=\"https:\/\/www.mrc-productivity.com\/legacy\/images\/textfieldprops\/text-field-props.png\"><\/a><\/p>\n<h3>Name<\/h3>\n<p>Controls the value of the HTML Name attribute.<br \/>\n<strong>Caution:<\/strong> Changing this value may result in your form not submitting correctly. mrc recommends <em>against<\/em>Value<\/p>\n<p>Controls the value of the HTML Value attribute.<br \/>\n<strong>Caution:<\/strong> Changing this value may result in your form not submitting correctly. mrc recommends <em>against<\/em> modifying this value.<\/p>\n<h3>Character Width<\/h3>\n<p>Sky theme only. Sets the width of the input field in number of characters.<\/p>\n<h3>Maximum Characters<\/h3>\n<p>Sets the number of maximum characters allowed in the input field.<\/p>\n<h3>Type<\/h3>\n<p>Sets the HTML input type. Available options are:<\/p>\n<ul>\n<li class=\"padleft\"><strong>Text<\/strong> &#8212; Default. Defines a single-line text input field. Characters can be alpha or numeric.<\/li>\n<li class=\"padleft\"><strong>Password<\/strong> &#8212; Defines a password field where the characters entered are masked.<\/li>\n<li class=\"padleft\"><strong>Number<\/strong> &#8212; Defines a number field. This input type forces the user to enter numeric values.<\/li>\n<li class=\"padleft\"><strong>Date\/Datetime<\/strong> &#8212; Defines a date\/datetime input field. Note that m-Power templates will automatically use a datepicker widget for true date field inputs. For non-true date fields, mrc suggests using the m-Painter date picker.<\/li>\n<li class=\"padleft\"><strong>Time<\/strong> &#8212; Defines a control for entering a time. Supporting browsers have this type designed to let users easily enter a time (hours and minutes, and optionally seconds).<\/li>\n<li class=\"padleft\"><strong>Range<\/strong> &#8212; Defines a control for entering a number whose exact value is not important. A slider control is default. Further details about this input type can be found <a href=\"https:\/\/developer.mozilla.org\/en-US\/legacy\/Web\/HTML\/Element\/input\/range\">here<\/a>.<\/li>\n<li class=\"padleft\"><strong>Search<\/strong> &#8212; Text fields designed for the user to enter search queries into. These are functionally identical to text inputs, but may be styled differently by the user agent.<\/li>\n<li class=\"padleft\"><strong>Email<\/strong> &#8212; Defines a field for an email address. Supporting browsers have basic client-side validation built in to require at least an &#39;@&#39; symbol in the value. Further details about the built-in validation can be found <a href=\"https:\/\/developer.mozilla.org\/en-US\/legacy\/Web\/HTML\/Element\/input\/email#Validation\">here<\/a>.<\/li>\n<\/ul>\n<h3>Id<\/h3>\n<p>Controls the value of the HTML Id attribute.<br \/>\n<strong>Caution:<\/strong> Changing this value may result in your form not submitting correctly. mrc recommends <em>against<\/em> modifying this value.<\/p>\n<h3>Placeholder<\/h3>\n<p>The text entered here is displayed in the input field when the page is loaded. This can serve as a short hint to the expected value of the input field.<\/p>\n<p><a href=\"https:\/\/www.mrc-productivity.com\/legacy\/images\/textfieldprops\/placeholder.png\"><img decoding=\"async\" alt=\"Placeholder\" class=\"alignnone size-full\" src=\"https:\/\/www.mrc-productivity.com\/legacy\/images\/textfieldprops\/placeholder.png\"><\/a><\/p>\n<h3>HelpText<\/h3>\n<p>The text entered here is displayed in a muted style below the input and can serve as a short description to the expected value of the input field.<\/p>\n<p><a href=\"https:\/\/www.mrc-productivity.com\/legacy\/images\/textfieldprops\/help-text.png\"><img decoding=\"async\" alt=\"Help Text\" class=\"alignnone size-full\" src=\"https:\/\/www.mrc-productivity.com\/legacy\/images\/textfieldprops\/help-text.png\"><\/a><\/p>\n<h3>Icon Left\/Right<\/h3>\n<p>Using the question-mark lookup, find a font-awesome icon to be appended to the left or right of the input box.<br \/>\n<strong>Note: <\/strong> Filter inputs already use the left side icon. Any that are added via m-Painter will be ignored.<\/p>\n<p><a href=\"https:\/\/www.mrc-productivity.com\/legacy\/images\/textfieldprops\/icons.png\"><img decoding=\"async\" alt=\"Icons\" class=\"alignnone size-full\" src=\"https:\/\/www.mrc-productivity.com\/legacy\/images\/textfieldprops\/icons.png\"><\/a><\/p>\n<h3>Copy Value From Other Input<\/h3>\n<p>When the form is submitted, the value from field A will be written to field B sight unseen.<\/p>\n<h3>Inline<\/h3>\n<p>Sets the field&#39;s label and input box on a single line as opposed to vertically.<\/p>\n<p><strong>Default (block styling):<\/strong><br \/>\n<a href=\"https:\/\/www.mrc-productivity.com\/legacy\/images\/textfieldprops\/default-block.png\"><img decoding=\"async\" alt=\"Default (Block)\" class=\"alignnone size-full\" src=\"https:\/\/www.mrc-productivity.com\/legacy\/images\/textfieldprops\/default-block.png\"><\/a><br \/>\n<strong>Inline styling:<\/strong><br \/>\n<a href=\"https:\/\/www.mrc-productivity.com\/legacy\/images\/textfieldprops\/inline.png\"><img decoding=\"async\" alt=\"Inline\" class=\"alignnone size-full\" src=\"https:\/\/www.mrc-productivity.com\/legacy\/images\/textfieldprops\/inline.png\"><\/a><\/p>\n<h3>Required<\/h3>\n<p>Forces the input field as required by adding the &quot;required&#39; HTML attribute.<br \/>\n<a href=\"https:\/\/www.mrc-productivity.com\/legacy\/images\/textfieldprops\/required.png\"><img decoding=\"async\" alt=\"Required Field\" class=\"alignnone size-full\" src=\"https:\/\/www.mrc-productivity.com\/legacy\/images\/textfieldprops\/required.png\"><\/a><\/p>\n<h3>Autofocus<\/h3>\n<p>If checked, this field will be automatically selected when the page loads. Only use one autofocus field per page.<\/p>\n<p><a href=\"https:\/\/www.mrc-productivity.com\/legacy\/images\/textfieldprops\/autofocus.png\"><img decoding=\"async\" alt=\"Autofocus Field\" class=\"alignnone size-full\" src=\"https:\/\/www.mrc-productivity.com\/legacy\/images\/textfieldprops\/autofocus.png\"><\/a><\/p>\n<h3>Read-Only<\/h3>\n<p>Sets the input field as not-editable by adding the &quot;readonly&#39; HTML attribute.<\/p>\n<p><a href=\"https:\/\/www.mrc-productivity.com\/legacy\/images\/textfieldprops\/readonly.png\"><img decoding=\"async\" alt=\"Readonly Field\" class=\"alignnone size-full\" src=\"https:\/\/www.mrc-productivity.com\/legacy\/images\/textfieldprops\/readonly.png\"><\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Customizing Input Fields with m-Painter Click here to access current documentation for this feature. There are many form input helpers built directly into m-Painter. These features assist with varying degrees of form functionality such as setting a max number of characters allowed, the input type and making fields read-only or required. Additionally, these helpers can [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":8906,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-8955","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.mrc-productivity.com\/legacy\/wp-json\/wp\/v2\/pages\/8955","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mrc-productivity.com\/legacy\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.mrc-productivity.com\/legacy\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/legacy\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/legacy\/wp-json\/wp\/v2\/comments?post=8955"}],"version-history":[{"count":27,"href":"https:\/\/www.mrc-productivity.com\/legacy\/wp-json\/wp\/v2\/pages\/8955\/revisions"}],"predecessor-version":[{"id":9565,"href":"https:\/\/www.mrc-productivity.com\/legacy\/wp-json\/wp\/v2\/pages\/8955\/revisions\/9565"}],"up":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/legacy\/wp-json\/wp\/v2\/pages\/8906"}],"wp:attachment":[{"href":"https:\/\/www.mrc-productivity.com\/legacy\/wp-json\/wp\/v2\/media?parent=8955"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}