HTML Atoms - HTML tutorials, tips, and articles

We’ve all seen them. In fact, the internet would be a drastically different place without them. Anytime you’ve ever signed up for a website, purchased a product, or started an online account; more than likely, you have used a form. Forms allow you to collect information the information that you need from your users that allow your site or application run. In this tutorial, you will learn how to properly set up a form and get acquainted with the common elements associated with them.

We chose Server Intellect for its cloud hosting, for our web hosting. They have managed to handle virtually everything for us, from start to finish. And their customer service is stellar.

Step 1.

The first thing we’ll need to do is create a form within our HTML page. This is a very simple task, and looks a lot like the tags we’ve previously learned about. Here’s what the form tag should look like:
Notice that the form tag has an attribute called “action”. This is a required attribute of the form element. Normally, instead of a # character in the quotes (which is simply a placeholder); we would use the name of a file that would handle our form. For instance, we may have a PHP form that sends out an email, in which case our “action” might be “index.php”. Let’s take a look at some of the elements we can add to our form.

Step 2.

Form elements are typically called “input” elements. In fact, the tag is the tag used to denote most of the common form elements. Let’s go ahead and add a regular text box into our page. Here’s what the HTML should look like:
Go ahead and open the page up into a browser. You’ll see that next to the plain text label is a text box that accepts user input. This can be used for a user’s name, address, or virtually any other information you might need for your application. You know you want to type in it. Go ahead.

What if I don’t want to display what the user is typing? I don’t want to expose a user’s password to the entire world, for example. Luckily, there’s a rather hand solution, and it only requires that we use a different type of input; a password input. Let’s add a password input to our page now:
Again, open the page up into your browser to view the newly added password field. You’ve seen these before, right? When you type, all that shows up are small “bullets” instead of letters. Clearly, this is a very useful input type, and is the standard for when you need to collect a password.

The next element on the list is called the Radio Button. When you need a user to be able to select a single item from a group (and ONLY a single item), radio buttons are the way to go. When radio buttons are placed within the same group, only one of them can be selected at a time. Let’s go ahead and add 3 radio buttons to our form. Take special notice of the “name” and “value” attributes we’ve given to each:
Because the radio buttons each have the same name, they belong to the same group. This allows the single selection restriction to occur. If they weren’t named, they would all be able to be selected at once, which would defeat the purpose of the radio button. The value attribute would be used by whatever file is handling our form’s “action”.

Want a user to be able to select multiple items at once? There’s an elegant solution for that as well. That solution is the Check Box. This element also takes a value attribute, and will pass that value to the “action” file. Let’s add 3 check boxes to our form now:

We used over 10 web hosting companies before we found Server Intellect. Our new server with cloud hosting,was set up in less than 24 hours. We were able to confirm our order over the phone. They responded to our inquiries within an hour. Server Intellect’s customer support and assistance are the best we’ve ever experienced.

Finally, we’ll need our users to be able to submit the form to us so that we can collect the data. Recall that the “action” attribute for our form is just a placeholder right now – but a “Submit Button” would allow all of our form values to be submitted to the action attribute. Let’s add the Submit Button to our form now:
Our form is now complete, and you may now open it within your browser, or in design view if you are using Visual Studio.

The design view of the project should appear like the following image:


Notice that the browser will refresh when you try and submit the form. This is because it’s assuming we have an “action” file to send it to, which for this tutorial, we do not. We discuss action files in a future tutorial.

A Few Last Words

HTML forms are essential for collecting information from users on your website, and knowing how to implement them properly is a skill that’s sure to come in handy for you future projects. Join us next time for additional HTML tutorials!

button