<\/p>\n
A modern and responsive website is no longer just a portal that acts as a communication channel\u2014for sharing information\u2014 between the organizations with its clients. For you to be successful with your website strategy\u2014attracting visitors and converting them into leads and customers\u2014you have to design a web form that establishes an affable relationship with the clients. <\/span><\/p>\n This article discusses some of the best practices that you can use in HTML5 to create a sensational and an affable website for your firm\u2019s bottom line. Let\u2019s get started. <\/span><\/p>\n A typical Web form can have the following components:<\/span><\/p>\n * Labels – Explains about the corresponding input fields Apart from layout, functionality and purpose, all forms have 3 main aspects which needs to be handled to make a form usable:<\/span><\/strong><\/p>\n It is important to know your user for the establishment of a good business relationship. To do this following steps can be followed:<\/p>\n 1. Trust can be built by using logo, imagery, color, typography and wording. A form is the communication platform between the user and the organization. So this needs to be logical and to the point. The below mentioned points are advisable:<\/p>\n 1. Labels needs to be ordered logically. 1. Label<\/strong><\/p>\n a. Position – Label above an input field works better for maximum readability. 2. Input Fields<\/strong><\/p>\n a. Type – Provide the appropriate type based on the requirements. 3. Actions<\/strong><\/p>\n a. Naming conventions – Descriptive words for buttons are preferred. Because it will ensure the purpose of the button clearly.<\/p>\n 4. Message<\/strong><\/p>\n a. Success – Notify the users for successful form submission. 5. Validation<\/strong><\/p>\n a. Restrict validation to the key points because excessive validation will frustrate users. 1. Use <label> tags to link labels with inputs.<\/strong><\/p>\n a. Properly read by screen readers. 2. Use the tabindex attribute.<\/strong><\/p>\n a. Provides control over tabbing order. 3. Consider the accesskey attribute for additional keyboard support.<\/strong><\/p>\n a. Direct access to associated input fields.
\n* Input Fields – Enables users to provide details.
\n* Actions – this attribute defines the action to be performed when the form is submitted.
\n* Message – Gives information about the form submission.
\n* Validation – It ensures that the data submitted by the user comply with rules provided.<\/p>\nRelationship<\/strong><\/span><\/h6>\n
\n2. Name the form according to its purpose which will inform users what the form is about.
\n3. Always try to be in scope of the form. Don\u2019t ask any questions beyond that.<\/p>\nConversation<\/strong><\/span><\/h6>\n
\n2. All the Related information are advised to be grouped.<\/p>\nAppearance<\/strong><\/span><\/h6>\n
\nb. Alignment – Placing labels above input fields is preferable, but make them right aligned if you place them to the left of input fields.
\nc. Bold labels\u2014Bold labels is bit difficult to read, so it is preferable to use plain text labels.<\/p>\n
\nb. Required – Clearly mention which fields cannot be left blank.
\nc. Placeholder – Do not use this attribute alone.
\nd. Autocomplete – Activate this to get faster user input.<\/p>\n
\nb. Error – Notify the users for errors in form submission.<\/p>\n
\nb. Use both client side and server side validation. It will ensure the validation in spite of having JavaScript turned off in user\u2019s browser and we can get better user experience with fast response and more secure validation.
\nc. Use captcha to protect the human-generated spam.
\nd. You can use Honeypot Technique as well over captcha because no user interaction is required.<\/p>\nAccessibility & Mark-up<\/strong><\/span><\/h6>\n
\nb. Most browsers treat text with <label> tags as clickable: larger actions.<\/p>\n
\nb. Enables forms to be navigated by keyboard.<\/p>\n
\nb. Consider to group related form fields.<\/p>\n