HTML Forms

Creating an HTML form is pretty easy and there are only a few parts that go into making one. First of all, we should go over what forms are and what they are used for. Forms are just text boxes that the user is able to fill in. They are used to collect user input for countless reasons. Some examples of using forms would be an online exam, a form that allows users to contact the website owner, or a form where a user enters their address which will then be stored in a database.

When creating a form, you first need to use the <form> tag. All of the code for the form will be inside of this element. Next, you will need to add some way for users to actually enter their input. The most common way to do this is by using<input> tags. There are many different types of <input> tags that allow for different types of data to be entered using different modalities. Some examples of frequently used <input> types would be text, checkbox, radio, and submit. Here is an example of some code using input tags in a form (with some line breaks to make it easier to see):

            
                
                    <form>
                        <input type="text" name="name">
                        <br>

                        <input type="checkbox" name="true" value="true">
                        <br>             
                        
                        <input type="radio" name="pizza" value="sausage">
                        <input type="radio" name="pizza" value="pepperoni">
                        <input type="radio" name="pizza" value="cheese">
                        <br>

                        <input type="submit" name="" value="save">
                        <br>
                    </form>
                
            
        

While this form could technically work, it's definitely not user friendly. Since we only added the input tags, only text boxes, buttons, etc will show up. This is what the code we just wrote would look like in the browser:

Without instructions telling you what to enter the form would be very confusing to anyone who is not a programmer. A user won't understand what to do with this and so we need to add labels. Labels are made using the tag. The label element allows you to tell the user what should be done with each input element and what each button or box is for. Here I've added appropraite labels.

            
                
                    <form>
                        <label>Name:</label>
                        <input type="text" name="name">
                        <br>

                        <label>Agree to Terms of Service:</label>
                        <input type="checkbox" name="true" value="true">
                        <br>             
                        
                        <label>Favorite Pizza:</label>
                        <input type="radio" name="pizza" value="sausage">
                        <input type="radio" name="pizza" value="pepperoni">
                        <input type="radio" name="pizza" value="cheese">
                        <br>

                        <input type="submit" name="" value="save">
                        <br>
                    </form>
                
            
        

The form is much easier to understand now. Here it is in the browser:

This is still a little messy looking and could be cleaned up with some CSS, but with the labels, at least now it is understandable to a user.