{"id":458,"date":"2020-11-11T17:16:24","date_gmt":"2020-11-11T23:16:24","guid":{"rendered":"https:\/\/wowfall2020.londietmartin.com\/?p=458"},"modified":"2020-11-18T12:51:55","modified_gmt":"2020-11-18T18:51:55","slug":"html-forms-more-than-just-surveys","status":"publish","type":"post","link":"https:\/\/wowfall2020.londietmartin.com\/?p=458","title":{"rendered":"HTML Forms More Than Just Surveys"},"content":{"rendered":"\n

Forms are the building blocks for communicating back and forth between the users, creators, and interface of a website. Whether it be a login, comment section or calculator forms are used to collect information from the viewer to communicate and function on the web. <\/p>\n\n\n\n

An HTML form<\/strong> is a section of a document containing normal content, markup, special elements called controls (checkboxes, radio buttons, menus, etc.), and labels on those controls.<\/span><\/p>W3C.org<\/cite><\/blockquote><\/figure>\n\n\n\n

\"\"\/
123 Form Builder<\/a><\/figcaption><\/figure>\n\n\n\n

Before we get too deep!<\/h2>\n\n\n\n

If you don’t understand what I mean when I say HTML tag or input fields, don’t be afraid to do a quick review before diving deeper. Within their HTML course, Codecademy<\/a> has an overview of HTML forms. HTML forms are one of the more complex functions of HTML so if you don’t know much about HTML I would not recommend starting here.<\/p>\n\n\n\n

What is the HTML <form> tag?<\/h2>\n\n\n\n

The HTML <form> tag is implemented to collect user input. The form section contains a large variety of input fields<\/a> all intended to collect information from the user and interact with the site. Inputs can range from text input to selection input to call to action buttons. A time selection input could be used to change what month is displayed on the users screen for a calendar. The most common form inputs are text inputs used for user logins or comments. What most people don’t realize is almost every website uses some type of form to operate. <\/p>\n\n\n\n

The <input<\/strong>> tag specifies an input<\/strong> field where the user can enter data. The <input<\/strong>> element is the most important form<\/strong> element. The <input<\/strong>> element can be displayed in several ways, depending on the type attribute.<\/span><\/p>w3schools.com<\/a><\/cite><\/blockquote><\/figure>\n\n\n\n

What else can it be used for?<\/h2>\n\n\n\n

Forms don’t just have to be used to collect information from the user. They can also be used to respond to a user. I created a unit conversion calculator<\/a> on the Arkansas Rebar website for work as an example. The calculator uses a combination of HTML and JavaScript in order to provide the user conversions based on their input. The calculator relies heavily on the HTML form function in order to communicate with the JavaScript.<\/p>\n\n\n\n

What makes a bad form?<\/h2>\n\n\n\n

The key to a great form is ensuring it is easy to use and follows proper semantics.<\/a> Other keys for creating great HTML forms include how the for is styled and how the user interacts with a form. A form should be clearly labeled for and provide detailed error messages for the user. If a user is creating a login and sees the plain message “Error” rather than “Username is already being used” they will not know what the problem is. Ensure that the form provides clear and detailed instructions for the user to follow. The style of a form can make or break it. If a form does not flow with the websites style it could take readability away from the site. How a from is presented to the user is a major factor in creating a successful form. <\/p>\n\n\n\n

Visitors who don\u2019t trust you are likely to not contact you at all. This means they don\u2019t get their questions answered and probably they will go look for alternatives elsewhere.<\/p>Sabina Idler – CX Insights<\/a><\/cite><\/blockquote>\n\n\n\n

Learn more about HTML Forms<\/h2>\n\n\n\n

Now that you know the basic implementations of HTML Forms I encourage you to visit MDN web docs<\/a> or watch the video below to learn more about HTML Forms and how they are used around the world wide web. <\/p>\n\n\n\n

\n