Lesson 2: Attributes and Forms

Last lesson we covered the basic HTML structure and learned some basic tags and elements. If you missed the last lesson, you can find it here. For this lesson we will cover attributes and forms. In the modern world there is a lot of JavaScript and CSS associated with forms, but we will stick to the basic pure HTML form to give a solid foundation to build with.

Attributes

An attribute is used on an element/tag to enhance its functionality or style past what comes natively in HTML. Last lesson we left off with this file:

index.html

<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1>Hello World!</h1>
<p>My Name is Fred</p>
</body>
</html>

As you probably noticed, there is nothing really special about the page, everything looks bland. Adding some attributes will help us solve this:

<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
</head>
<body>
<h1 style="font-weight: bold; color: blue">Hello World!</h1>
<p>My Name is Fred</p>
</body>
</html>

Your top level header now is blue and bold. Attributes are added to tags like so: attribute-name="..." In the above example the attribute name is style, inline styles are usually frowned upon because they are hard to maintain. Imagine having 10 web pages which are expected to have the same branding. If each of them have inline styles like this, you would have to update 10 HTML files to make a simple change to the top level header. To solve this we create a stylesheet:

styles.css

.page-title {
font-weight: bold;
color: blue;
}

index.html

<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<link rel="stylesheet" type="text/css" href="/styles.css"/>
    </head>
<body>
<h1 class="page-title">Hello World!</h1>
<p>My Name is Fred</p>
</body>
</html>

Confused? Don’t worry, we’ll go over it. We moved everything that was in the style attribute into another file called style.css. .page-title is what is called a selector, it is a reference to the html element we want styled. you will notice that in the HTML file we removed the style attribute and replaced it with a class attribute. The class attribute uses the same name as in the css file. In the css file you will notice that .page-title includes a . This means that what we are referencing is an element with a class of page-title in the html. There are other types of selectors that we will cover later on, but for right now a class selector will suffice.

You will also notice that we added a new tag in the head of the HTML file: <link rel="stylesheet" type="text/css" href="/style.css"/> This is where the css file gets included on the webpage. In the <link/> tag we have three attributes: rel tells the link to expect a stylesheet, type tells it that it should be a text/css file, and href tells it where the file is located. There is not content for the tag so it is self-closing.

There we have it, a round about way to explain attributes. Other attributes that are common include: id="" , onclick="" , data-*="” We may talk about each of those later on.

Basic Forms

The web is a communication mechanism, communication by definition is a combination of listening and speaking. As such there is usually a need to provide a way for users to communicate with the business, even if it is only through a feedback page. We do this with forms:

<!DOCTYPE html>
<html>
<head>
<title>Hello World</title>
<link rel="stylesheet" type="text/css" href="/styles.css"/>
</head>
<body>
<h1 class="page-title">Hello World!</h1>
<p>My Name is Fred</p>
<form action="submit.html">
<div class="form-field">
<label for="name">What is your name?</label>
<input type="text" id="name" placeholder="Name"/>
</div>
<div class="form-field">
<label for="email">What is your email?</label>
<input type="email" id="email" placeholder="Email" required/>
</div>
<input type="submit" value="Submit" required/>
</form>
</body>
</html>

As you can see we added a <form> tag after the previously added <p> tag. The <form> tag contains an action. This is the url that the form should submit to. This is the native way to submit a form, a form can also be submitted with JavaScript using an AJAX request. Inside the form you will find a couple groupings that use <div> tags as their containers. This is a personal preference and it is not required to group fields at all. I prefer to group them because it adds readability. Inside the <div> tags there are two elements: <label> and <input> It is important, for accessibility reasons, for every form field to have a label. The <label> tag should also have a “for” attribute for accessibility. This will put keyboard focus on the field when the label is clicked. The value of the “for” attribute is the “id” attribute of the field it references.

<input> elements are the main form field elements. other form fields include select, and textarea. <input> elements have a “type” attribute that tells the browser what an input can be. You will see that we have used “text,” which is the default if no type is given, and “email.” A full list of input types can be found here. It is important to use the appropriate input type. This will, for example, let your mobile browser know what keyboard to show for the specific input type. There are other accessibility reasons to use the right input type as well.

The last tag you will see is another <input> tag. This input is marked as type="submit" It creates a button that will submit the form to the url specified in the <form> tag. The value attribute specifies the text that will appear in the button.

On each of the fields you will also find a “required” attribute. This tells the browser that it should validate the form before submitting it. It will also validate based on the “type” attribute of the input tag. If you try to enter an invalid email address in the form you will get a message telling you that there is something wrong.

Conclusion

That is attributes and forms in a nutshell. I have only scratched the surface of these subjects. Please refer to MDN for more information. Up next we will cover syntax and semantics, that may sound boring but it is an important topic to cover.

Next Lesson