HTML Forms More Than Just Surveys
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.
An HTML form is a section of a document containing normal content, markup, special elements called controls (checkboxes, radio buttons, menus, etc.), and labels on those controls.
W3C.org
Before we get too deep!
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 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.
What is the HTML <form> tag?
The HTML <form> tag is implemented to collect user input. The form section contains a large variety of input fields 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.
The <input> tag specifies an input field where the user can enter data. The <input> element is the most important form element. The <input> element can be displayed in several ways, depending on the type attribute.
w3schools.com
What else can it be used for?
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 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.
What makes a bad form?
The key to a great form is ensuring it is easy to use and follows proper semantics. 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.
Visitors who don’t trust you are likely to not contact you at all. This means they don’t get their questions answered and probably they will go look for alternatives elsewhere.
Sabina Idler – CX Insights
Learn more about HTML Forms
Now that you know the basic implementations of HTML Forms I encourage you to visit MDN web docs or watch the video below to learn more about HTML Forms and how they are used around the world wide web.
Very informative – Thanks for sharing because I still have issues when it comes to getting my forms to do what I want them to do.
I love the tone of your disclaimer! It’s so friendly! You’ve also got a ton of great information here. I appreciate how you’ve broken HTML forms down but would’ve liked to see what makes up good forms to contrast the section where you detail bad forms.
I think it’s great that you provide a quick HTML review for readers/bloggers who aren’t familiar with HTML. There are many WordPress bloggers who use the visual editor to create their blog, rarely touching the HTML editor. I like that you provide tutorial to learn more.
For those of us who may continue to struggle with HTML forms, it would great to include a link to a web service, like Wufoo.com, that provides hosted web forms. You just drag and drop the type of input fields that you want and the web service configures the HTML for you. Then, you copy/paste the code onto your site.
I am so glad you included a definition—we assume people know what these terms mean, but I had no idea what “html” was before this class! This article will prove very useful to students who are just starting out in coding. The Codecademy link is helpful, as well. You’ve inspired me to not give up on learning this stuff, thanks! I will share one other resource I found that offers free lessons in HTML. It looks promising, and I plan on checking it out more during Christmas break: https://www.w3schools.com/
You did a great job of defining and explaining terms that usually confuse me. Everything makes more sense now. I loved the links that you provided as well. Thanks for writing this. I learned a lot!
Nicely written! You provide excellent information into the world of forms on the webpages, but you also include a recommendation to visit codeacademy for those who are not familiar with HTML.
Your brief overview of HTML was also welcome. Although I have learned a great deal in this class regarding HTML, before I was introduced I basically had zero knowledge of it.
Great Job!!!
Nice post! You have great information and I love it that you have broken down everything and described very well. Forms are the significant part of the website and it is important for users for communication. It is great that you have explain the meaning of terms because people don’t really know about it. Also, the tutorial is going to help to learn more about the forms.