{"id":8955,"date":"2018-05-16T14:44:53","date_gmt":"2018-05-16T19:44:53","guid":{"rendered":"https:\/\/www.mrc-productivity.com\/docs\/?page_id=8955"},"modified":"2023-12-06T12:33:34","modified_gmt":"2023-12-06T18:33:34","slug":"text-field-properties","status":"publish","type":"ht_kb","link":"https:\/\/www.mrc-productivity.com\/docs\/knowledge-base\/text-field-properties","title":{"rendered":"Input Properties"},"content":{"rendered":"\n<p class=\"wp-block-ht-blocks-messages wp-block-hb-message wp-block-hb-message--withicon is-style-info\">Click <a href=\"https:\/\/www.mrc-productivity.com\/legacy\/bootstrap\/text-field-properties\">here<\/a> to access legacy documentation for this feature<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Overview<\/h2>\n\n\n\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\n\n\n<p class=\"wp-block-ht-blocks-messages wp-block-hb-message wp-block-hb-message--withicon is-style-alert\">This article is specific to Bootstrap templates only.<\/p>\n\n\n\n<p>Left-click on an input in m-Painter and select &#8220;Input Properties&#8221; from the Element Panel.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"\/docs\/vue-images\/inputProperties.jpg\" target=\"_blank\" rel=\"noreferrer noopener\"><img decoding=\"async\" src=\"\/docs\/vue-images\/inputProperties.jpg\" alt=\"Text Field Properties\"\/><\/a><\/figure>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h4 class=\"wp-block-heading\">Name<\/h4>\n\n\n\n<p>Controls the value of the HTML &#8220;Name&#8221; attribute. <\/p>\n\n\n\n<p class=\"wp-block-ht-blocks-messages wp-block-hb-message wp-block-hb-message--withicon is-style-danger\"><strong>Caution:<\/strong> Changing this value may result in your form not submitting correctly. mrc recommends <strong><em>against<\/em> <\/strong>modifying this value.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h4 class=\"wp-block-heading\">Value<\/h4>\n\n\n\n<p>Controls the value of the HTML &#8220;Value&#8221; attribute. <\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h4 class=\"wp-block-heading\">Placeholder Text<\/h4>\n\n\n\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\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.mrc-productivity.com\/docs\/images\/textfieldprops\/placeholder.png\"><img decoding=\"async\" src=\"https:\/\/www.mrc-productivity.com\/docs\/images\/textfieldprops\/placeholder.png\" alt=\"Placeholder\"\/><\/a><\/figure>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h4 class=\"wp-block-heading\">Help Text<\/h4>\n\n\n\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\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.mrc-productivity.com\/docs\/images\/textfieldprops\/help-text.png\"><img decoding=\"async\" src=\"https:\/\/www.mrc-productivity.com\/docs\/images\/textfieldprops\/help-text.png\" alt=\"Help Text\"\/><\/a><\/figure>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h4 class=\"wp-block-heading\">Max Characters<\/h4>\n\n\n\n<p>Sets the number of maximum characters allowed in the input field.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Title<\/h4>\n\n\n\n<p>The title attribute specifies extra information about the input and is most often shown as a tooltip text when the mouse hovers over the input.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h4 class=\"wp-block-heading\">Type<\/h4>\n\n\n\n<p>Sets the HTML input type. Available options are:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Text<\/strong> &#8212; Default. Defines a single-line text input field. Characters can be alpha or numeric.<\/li>\n\n\n\n<li><strong>Number<\/strong> &#8212; Defines a number field. This input type forces the user to enter numeric values.<\/li>\n\n\n\n<li><strong>Password<\/strong> &#8212; Defines a password field where the characters entered are masked.<\/li>\n\n\n\n<li><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\n\n\n<li><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\n\n\n<li><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\/docs\/Web\/HTML\/Element\/input\/range\">here<\/a>.<\/li>\n\n\n\n<li><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 &#8216;@&#8217; symbol in the value. Further details about the built-in validation can be found <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/HTML\/Element\/input\/email#Validation\">here<\/a>.<\/li>\n<\/ul>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h4 class=\"wp-block-heading\">Id<\/h4>\n\n\n\n<p>Controls the value of the HTML id attribute. <br><\/p>\n\n\n\n<p class=\"wp-block-ht-blocks-messages wp-block-hb-message wp-block-hb-message--withicon is-style-danger\"><strong>Caution:<\/strong> Changing this value may result in your form not submitting correctly. mrc recommends <strong><em>against<\/em> <\/strong>modifying this value.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h4 class=\"wp-block-heading\">Add Icon Left\/Right<\/h4>\n\n\n\n<p>Selecting &#8216;Yes&#8217; for either option will add a placeholder Font Awesome icon to the left or right of the input. After saving the Input Properties window, you may left-click the icon and from the Element Panel, select &#8220;Edit Icon&#8221; to change the Font Awesome icon to your choosing.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.mrc-productivity.com\/docs\/images\/textfieldprops\/icons.png\"><img decoding=\"async\" src=\"https:\/\/www.mrc-productivity.com\/docs\/images\/textfieldprops\/icons.png\" alt=\"Icons\"\/><\/a><\/figure>\n\n\n\n<p class=\"wp-block-ht-blocks-messages wp-block-hb-message wp-block-hb-message--withicon is-style-info\">Filter inputs already use the left side icon. Any that are added via m-Painter will be ignored.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h4 class=\"wp-block-heading\">Copy Value From Other Input<\/h4>\n\n\n\n<p>When the form is submitted, the value from the selected field in the dropdown will be written to the current input field sight unseen.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h4 class=\"wp-block-heading\">Inline<\/h4>\n\n\n\n<p>Sets the field&#8217;s label and input box on a single line as opposed to vertically.<\/p>\n\n\n\n<p><strong>Default (block styling):<\/strong><br><a href=\"https:\/\/www.mrc-productivity.com\/docs\/images\/textfieldprops\/default-block.png\"><img decoding=\"async\" class=\"alignnone size-full\" src=\"https:\/\/www.mrc-productivity.com\/docs\/images\/textfieldprops\/default-block.png\" alt=\"Default (Block)\"><\/a><br><strong>Inline styling:<\/strong><br><a href=\"https:\/\/www.mrc-productivity.com\/docs\/images\/textfieldprops\/inline.png\"><img decoding=\"async\" class=\"alignnone size-full\" src=\"https:\/\/www.mrc-productivity.com\/docs\/images\/textfieldprops\/inline.png\" alt=\"Inline\"><\/a><\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h4 class=\"wp-block-heading\">Autofocus<\/h4>\n\n\n\n<p>If checked, this field will be automatically selected when the page loads. Only use one autofocus field per page.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.mrc-productivity.com\/docs\/images\/textfieldprops\/autofocus.png\"><img decoding=\"async\" src=\"https:\/\/www.mrc-productivity.com\/docs\/images\/textfieldprops\/autofocus.png\" alt=\"Autofocus Field\"\/><\/a><\/figure>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h4 class=\"wp-block-heading\">Read-Only<\/h4>\n\n\n\n<p>Sets the input field as not-editable by adding the &#8220;readonly&#8217; HTML attribute.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><a href=\"https:\/\/www.mrc-productivity.com\/docs\/images\/textfieldprops\/readonly.png\"><img decoding=\"async\" src=\"https:\/\/www.mrc-productivity.com\/docs\/images\/textfieldprops\/readonly.png\" alt=\"Readonly Field\"\/><\/a><\/figure>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h4 class=\"wp-block-heading\">Required<\/h4>\n\n\n\n<p>Forces the input field as required by adding the &#8216;required&#8217; HTML attribute.<br><a href=\"https:\/\/www.mrc-productivity.com\/docs\/images\/textfieldprops\/required.png\"><img decoding=\"async\" class=\"alignnone size-full\" src=\"https:\/\/www.mrc-productivity.com\/docs\/images\/textfieldprops\/required.png\" alt=\"Required Field\"><\/a><\/p>\n<\/div><\/div>\n\n\n\n<h4 class=\"wp-block-heading\">Signature<\/h4>\n\n\n\n<p>Transforms the input into a signature box where an end-user can scribe a signature to be stored in the database. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" src=\"\/docs\/vue-images\/sigExample.jpg\" alt=\"\"\/><\/figure>\n\n\n\n<p>Click <a href=\"https:\/\/www.mrc-productivity.com\/docs\/knowledge-base\/signature-capture-in-m-power-maintainers\" target=\"_blank\" rel=\"noreferrer noopener\">here <\/a>to learn more about implementing Signature Capture.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Overview 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,&#8230;<\/p>\n","protected":false},"author":1,"comment_status":"closed","ping_status":"closed","template":"","format":"standard","meta":{"footnotes":""},"ht-kb-category":[263],"ht-kb-tag":[],"class_list":["post-8955","ht_kb","type-ht_kb","status-publish","format-standard","hentry","ht_kb_category-bootstrap-templates"],"_links":{"self":[{"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb\/8955","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb"}],"about":[{"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/types\/ht_kb"}],"author":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/comments?post=8955"}],"version-history":[{"count":31,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb\/8955\/revisions"}],"predecessor-version":[{"id":13867,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb\/8955\/revisions\/13867"}],"wp:attachment":[{"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/media?parent=8955"}],"wp:term":[{"taxonomy":"ht_kb_category","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb-category?post=8955"},{"taxonomy":"ht_kb_tag","embeddable":true,"href":"https:\/\/www.mrc-productivity.com\/docs\/wp-json\/wp\/v2\/ht-kb-tag?post=8955"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}