Forms: Elements, Attributes, & Values

Forms are very useful when needing to get information from a user. However, there are so many parts to them that they can seem confusing. They sometimes still get me. I’m writing this blog to strengthen my understanding and hope it will strengthen yours as well.

I will define elements, attributes, and values, provide three lists, and show an example of how to make a form. The form will not be saving any data. This blog is just to help understand the basics of building a form with elements, attributes, and values.

If you’re aware of the words element, attribute, and value, but cannot confidently explain the differences to someone else, then please take the time to get to that point of understanding. Those words help with creating a form.

An element is anything that has a starting tag, content, then an ending tag, such as: <tagname> Some content </tagname>. An example is

<p> This a paragraph element example.</p>

All elements can have attributes. An attribute provides additional information about the element. They are usually name/value pairs that follow the format of attribute_name=“some_value”. Attributes are found within the element opening tag. An example is

<p id="first_paragraph"> This a paragraph element with an attribute of id and value of "first_paragraph"</p>

When an attribute exists, so must a place for it’s possible value. The place of the value can be left empty using quotes. Also, you can create the value or use a predetermined value. Some attributes require predetermined values, but you’ll learn those with practice and time. Values are helpful when needing to retrieve specific data or deciding what needs to be shown on a form. Examples will come.

Now that elements, attributes, and values are covered, let’s get into the element <form>.

To create a form you have to use the element tag<form>. This creates a blank form, which will contain elements that will create the fields for the user to fill such as “First Name” and “Last Name”.

<form>  
   // More elements will go between the form tags that will allow
   // us to show fields that a user can fill out.
</form>

Here is an example of the form element with an attribute.

<form target="_blank>  
   // Notice how the attribute called target with a value of
   // "_blank" is within the form tag. This will open a new browser
   // tab when the form is submitted. 
</form>

Here is a list of a form attributes. (I did not include the attribute’s values because the list can look overwhelming. A Google search will help that.)

// <form> Attributes List
accept-charset
action
autocomplete
enctype
method
name
novalidate
rel
target 
// Remember: Attributes are added within the opening tag of the form 
// element.

The form element can contain many other elements.

<form target="_blank>  
  <label>A label goes here.</label> // This is a label element
                                    // within the form element.  
</form>

Here is a list elements for a form:

// <form>'s Elements List
<input>
<label>
<select>
<textarea>
<button>
<fieldset>
<legend>
<datalist>
<output>
<option>
<optgroup>

It is important to know that each of these elements can also have their own attributes. It would be too much if I listed the attributes of the elements shown above. However, I will dig into the element <input> with its attribute called type and the many predetermined values. This is the juicy part of forms.

Here is a list of the element <input> with the attribute of type and its many values:

// <input>'s Attribute type List
<input type="button">
<input type="checkbox">
<input type="color">
<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="image">
<input type="month">
<input type="number">
<input type="password">
<input type="radio">
<input type="range">
<input type="reset">
<input type="search">
<input type="submit">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">
// Remember <input> is the element, type is the attribute, anything // to the right contained in "" are values.

Now that I have those lists out of the way, let’s see all of the types of <input> . I encourage you to play with values in your own IDE or at repl.it. Here is my Github repo if you want to copy & paste, but typing it out yourself is best. I’ve also included a file called play_area.html were you can see a list of elements, a list of input types, and a form to play with.

Take the time to play with the different types of <input> s that exist before moving onto the example below.

Let’s make a form with a mix of elements and types for the <input> element. This form will be an “About You” Form.

Notice the for attribute value in <label> is the same as the id attribute value in <input>. This allows the two related elements to be bind to each other.

When the user clicks the “Submit” button a new tab will open because of target="_blank" contained in the form element. The image above shows two tabs open after “Submit” has been clicked. The data isn’t being saved anywhere, but that’s because the code is not set up to do so. The main purpose was to become familiar with understanding how elements, attributes, and values work within a form.

That was an example of where elements, attributes, and values lay within forms. I hope it helps. Please feel free to reach out for any questions, critiques, or to offer advice!