HTML5 Forms

Asif Ahmed

Today we will be going over how to incorporate some HTML5 elements into our plain old boring forms. We will be creating the form for sending someone an email and will be implementing the actual email code in the next post. We will be adding some style to our form as well, so it doesn’t look terrible. First, let’s view the boring code (HTML) for our form.

	<h3>Send Email with PHP</h3>
	<form action="post">
	<label>To</label><input type="text" name="to"/>
	<label>From</label><input type="text" name="from"/>
	<label>Subject</label><input type="text" name="subject"/>
	<label>Body</label><textarea></textarea>
	<input type="submit" value="Submit" />

As you can see if has some labels and some inputs…not very exciting. Let’s spice this up a little with some new HTML5 form elements.

	<form method="post">
	<h3>Send Email with PHP</h3>
	<label>To</label><input type="email" autofocus required placeholder="who is this email for?" name="to"/>
	<label>From</label><input type="email" required placeholder="who is this email from?" name="from"/>
	<label>Subject</label><input type="text" required placeholder="what is this email about?" name="subject"/>
	<label>Body</label><textarea required ></textarea>
	<input type="submit" value="Submit" />

Do you see the difference between the two forms. Let’s break it down. Each input/textarea in our second form has the word “required” associated with it. This means that this field is required and if we are on a browser that can understand what this keyword means, it will not submit the form if the “required” form fields are empty. Note that most modern browsers understand the new HTML5 form vocabulary. Versions of IE – 9 and below are not modern browsers. These browsers are often the bane of a web developers existence. The first input element in our new form also has ‘type=”email”‘. This means that we must enter something that looks like a valid email into this input. It would be hard to ensure that the email was valid, so the best we can do it to make sure it follows the same format as valid emails. The valid email format is often similar to something@something.something. Validators will often use regex (Regular Expressions) to ensure that a string is in the proper format. The first input element also has the autofocus keyword. This means that as soon as the page loads, our cursor / keyboard will be focused on this element. This means if we start typing, we will be filling out this element. Our “input” elements have the parameter “placeholder” as well. The best way to explain this is with an image.placeholder The placeholder value is what shows up in the input field…however, if you start typing it will disappear. Think of this placeholder parameter as a hint for the user telling them what they should enter in this field. If you want to learn more about HTML5 form elements please read more at HTML5 Rocks. The placeholder and required attributes are definitely the ones I use the most. I would also recommend looking at the new form input types. If you have the opportunity to ignore old browsers, it’s very possible that these new input elements will make your life easier.

If you want to see an example of the old boring form, click here. If you want to see an example of the new, a little less boring form (forms can only be so exciting) click here. Try both out and notice the differences.

The entire code, complete with CSS (from HTML5 Rocks), for the HTML5 form is reproduced below

<!doctype html>
<html>
<head>
	<title>PHP Email</title>
	<style>
	body {
		font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	}
	:invalid { 
	  border-color: #e88;
	  -webkit-box-shadow: 0 0 5px rgba(255, 0, 0, .8);
	  -moz-box-shadow: 0 0 5px rbba(255, 0, 0, .8);
	  -o-box-shadow: 0 0 5px rbba(255, 0, 0, .8);
	  -ms-box-shadow: 0 0 5px rbba(255, 0, 0, .8);
	  box-shadow:0 0 5px rgba(255, 0, 0, .8);
	}

	:required {
	  border-color: #88a;
	  -webkit-box-shadow: 0 0 5px rgba(0, 0, 255, .5);
	  -moz-box-shadow: 0 0 5px rgba(0, 0, 255, .5);
	  -o-box-shadow: 0 0 5px rgba(0, 0, 255, .5);
	  -ms-box-shadow: 0 0 5px rgba(0, 0, 255, .5);
	  box-shadow: 0 0 5px rgba(0, 0, 255, .5);
	}
	form {
	  width:300px;
	  margin: 20px auto;
	}

	input, textarea {
	  border:1px solid #ccc;
	  width:300px;
	  min-height:30px;
	  display:block;
	  margin-bottom:15px;
	  margin-top:5px;
	  outline: none;

	  -webkit-border-radius:5px;
	  -moz-border-radius:5px;
	  -o-border-radius:5px;
	  -ms-border-radius:5px;
	  border-radius:5px;
	}
	input {
		font-size:18px;
	}
	textarea{
		height: 300px;
	}

	input[type=submit] {
	  background:none;
	  padding:10px;
	}
	</style>
</head>
<body>
	<form method="post">
	<h3>Send Email with PHP</h3>
	<label>To</label><input type="email" autofocus required placeholder="who is this email for?" name="to"/>
	<label>From</label><input type="email" required placeholder="who is this email from?" name="from"/>
	<label>Subject</label><input type="text" required placeholder="what is this email about?" name="subject"/>
	<label>Body</label><textarea required ></textarea>
	<input type="submit" value="Submit" />
</body>
</html>