Forms

HTML forms could have their own category because they have many elements that have to work together in order for the form to work. Forms are the primary way users pass information to the server. The HTML form is encapsulated by the <form> tags and all of the inputs will fall in between the opening and closing form tags.

Forms are extremely useful because of the web 2.0 movement when sites became more and more user driven. Believe it or not all of the tutorials and categories on this website were inputted by forms that I created. If you have ever heard of content management systems (CMS), you are currently reading the results of my own construction of a CMS that operates with multiple forms and more complicated stuff (We will get to that later).

Now don’t get too excited. Since this is a HTML tutorial, our forms will be virtually useless. You generally need a server-side language like PHP, ASP, or ColdFusion to do something with the user’s inputted data.

The Many HTML Form Inputs

Like normal, we won’t cover them all, but we will get you into the swing of things.

  • Text Fields – Allows the user to input text data in a one line field
  • Radio Buttons – Allows the user to select one option from multiple options
  • Checkboxes – Allows the user to select many options from multiple options
  • Submit Button – Allows the user to send the data
Example
<form> 
    Your name:<input type="text" name="yourName" />  
    <input type="radio" name="group1" value="1" /> Pick me! 
    <input type="radio" name="group1" value="2" /> No pick me! 
    <input type="checkbox" name="checkBox1" value="1" /> Pick me! 
    <input type="checkbox" name="checkBox1" value="2" /> Pick me too! 
    <input type="submit" value="Send Data"/> 
</form> 
Result
Your name: Pick me! No pick me! Pick me! Pick me too!

Not the best looking form, but it will do. Typically, the form tag will have several attributes including the name, action, and the method. The name attribute is only to differentiate one form from another on the page. The action attribute is set to the page where you will pass the data (generally, this will not be an HTML page). Finally, the method attribute will determine how you want to send the data. Don’t worry about this for now.

Text Field

Let’s get into the inputs. You probably already noticed that they are all defined with an input tag and different type attributes. Technically, there is a textarea tag for multi-line text inputs that is not in an input tag, but we are not going to cover it in this tutorial. The first input is one of the most common input type attribute values, the text type, which is short for text field. It is fairly simple to implement, but you should definitely name it so that you can tell it apart from any other text fields in the form.

Radio Buttons and Checkboxes

Form radio buttons and checkboxes require their own explanation. Radio buttons are abstractly thought of as groups where we must concretely type them in with the same name attribute as their brother to make them a family/group thing. If you didn’t give them the same name you would defeat the purpose of a radio button, which is too present multiple options but only allow one to be selected. Put the input type set to “radio” in order to tell the HTML document that it is a radio button. Another attribute that you should give to the radio buttons is the value attribute. Your server will receive this value from the user. Checkboxes are the cousins of radio buttons. However, a user can check as many checkboxes as they like. You don’t have to name them the same, but when you get to processing the data on the server-side, you will be glad you did.

Submit Button

Last but not least, is the required submit button. Setting the type attribute to “submit” will give you the very powerful command to send the data. It is recommended to only have one submit button and you should always assign a value to it. The value attribute shows the user text and it is also the value sent to the server. Whew! Take a breather, you earned it.

References

If you enjoyed this resource, support me by sharing this page with others.
Share on Facebook
Facebook
Share on StumbleUpon
StumbleUpon
Digg this
Digg
Tweet about this on Twitter
Twitter
Share on Reddit
Reddit

Leave a Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.