Creating a Sample HTML5 Structure
TML5 is the thing that developers are starting to take a look more and more. More and more browsers are getting compatible with it and with the iPhone choosing this as it???s main multimedia language I have no doubt that this will be demanded in great quantities. In this post I will explain how to create a sample HTML5 structure for your web site.
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset=utf-8>
<title>Sample HTML5 Structure</title>
<style>
header, nav, article, footer, address, section {
ξdisplay: block;
}
#container {
ξwidth:900px;
ξmargin:auto;
ξbackground-color:white;
}
header {
ξbackground-color:#666;
}
nav li {
ξdisplay:inline;
ξpadding-right:1em;
}
nav a {
ξcolor:white;
ξtext-decoration:none;ξ
}
nav a:hover {
ξtext-decoration:overline;ξ
}
h1, h2 {
ξmargin:0px;
ξfont-size:1.5em;
}
h2 {
ξfont-size:1em;
}
footer {
ξbackground-color:#999;
ξtext-align:center;
}
</style>
<script>
document.createElement("article");ξ
document.createElement("footer");ξ
document.createElement("header");ξ
document.createElement("hgroup");ξ
document.createElement("nav");ξ
</script>
</head>
<body>
<div id="container">
ξξξ <header>
ξξξ ξ<h1>Sample HTML5 Structure</h1>
ξξξξξξξ <nav>
ξξξξξξξξξξξ <ul>
ξξξξξξξξξξξξξξξ <li><a href="#">Home</a></li>
ξξξξξξξξξξξξξξξ <li><a href="#">About</a></li>
ξξξξξξξξξξξ </ul>
ξξξξξξξ </nav>
ξξξ </header>
ξξξ <section>
ξξξ ξ<hgroup>
ξξξξξξξ ξ<h1>Main Section</h1>
ξξξξξξξξξξξ <h2>This is a sample HTML5 Page</h2>
ξξξξξξξ </hgroup>
ξξξ ξ<article>
ξξξξξξξ ξ<p>This is the content for the first article</p>
ξξξξξξξ </article>
ξξξξξξξ <article>
ξξξξξξξ ξ<p>This is the content for the second article</p>
ξξξξξξξ </article>
ξξξ </section>
ξξξ <footer>
ξξξ ξ<p>This is the Footer</p>
ξξξ </footer>
</div>
</body>
</html>
As you can see the syntax is very similar, the start tags changed somewhat, but it makes it more convinient for the coder. Alsoas you can see now instead of making separate divs to stylize the header and footer, now HTML5 gives you a specified tag for each of them. The <nav> tag is the where your main site navigation will be at. You can also see the <section> tag, this will define the differents parts of your page, for example articles, blogroll, etc.ξ The <hgroup> tag is used to group various content heading, for example when you have an Article title and a Subtitle.
The JavaScript part of the code will create the tags so that older browsers and IE will accept them. This step is very important, if you do go ahead and skip it then older browsers will have trouble understanding your ode and the results will vary a lot.
Please leave any comments and/or suggestions below,
Gilberto Cortez
Upload Files From a Form
Hello guys,ξ I decided to do a post on how to upload files from a simple HTML form into your server. First, you will need to set up this form with the proper headings, please see code below.
<form enctype=”multipart/form-data” action=”uploads.php” method=”POST”>
Choose a file to upload: <input name=”uploadedfile” type=”file” /><br />
<input type=”submit” value=”Upload File” /> (Max Size is 2MB)
</form>
As you can see, there is a note stating that the maximum size can be of 2MB’s, you can change this in your php.ini file. Now, you will need to create your uploads.php file, which will receive the file and move it to your desired destination.
//File Upload
$target_path = “uploads/”; //Target Folder
$target_path = $target_path .$timestamp.’_’.basename( $_FILES[‘uploadedfile’][‘name’]);ξ //Final File Destination and name
if(move_uploaded_file($_FILES[‘uploadedfile’][‘tmp_name’], $target_path)) {
echo “The file “.basename( $_FILES[‘uploadedfile’][‘name’]).
” has been uploaded”;
} else{
echo “There was an error uploading the file, please try again!”; //If an error
}
As you can see, I have commented on the code so that it’s more clear to you, feel free to change the address to your desired location. And like always, please feel free to leave any comments, sugestions or questions below.
Thank You,
Gilberto Cortez
HTML5 Form Autocomplete Implementation
Technology is advancing very rapidly in the technology industry this last couple of years. A great and powerful new standard that was created and by which many of us developers are abiding already is HTML5. With this many opportunities came for us to be able to successfully create a user experience that is easily utilized by any visitor. One of the great tools that are on this library is the ability to AutoComplete forms, which at this time many of the major browsers already support. The browser with the biggest support of this feature is Google Chrome. Actually it was during one of Matt Cuts videos about it that I became familiar with it. Even if some of the browsers can perform this without implementation of any code I will highly recommended as you will be requesting exactly the information that you are looking for minimizing any room for user error. It is very simple to implement in any form without having to change any of the backEnd code, all that you have to do is add the attributeξx-autocompletetype.
Example:
<input type=”text” name=”fullName”ξx-autocompletetype=”name-full” />
The only thing that you have to be replacing will be the value of the attribute as it will be different for each input tag, you can find a complete list of them atξWHATWG Wiki, as well as the complete specifications of this new attribute. There is also a way to completely turn off this feature with the attribute “ξautocomplete=’off’ “, which might be useful for high security sites like bank portals or log in forms.
There are many mixed emotions in regard to form autocompletion on the web. Many say that it is a great security hazard as all of your personal and financial information is stored on your computer. However, on the contrary I do like the idea as anything that will help a visitor make it’s experience easier is good UX, and fortunately as well with the great advances in encryption we can rest secured that our information is safely stored. Please take a moment in the comment section below to let me know what you think about this topic as well as any other comments.
Using Loops to Check for Empty Fields
I???ve been noticing lately how many student are creating multiple functions or if statements to do something that is possible in just a couple of lines, in this post I will try to explain how to use Arrays and Loops to validate a form, checking that it does not have any empty fields.
First you need to set up your form, here is the code for a simple log in form:
<form method="post" name="myform" action="login.php"> Username: <input type="text" id="username" name="username"/><br /> Password: <input type="password" id="pass" name="pass"/><br /> <input type="button" value="Log Me In" onClick="validate();"/> </form>
You might have noticed that at the end of the form, instead of using ???submit??? for the type I used ???button??? instead. I do this to be 100% sure that the form will not be submitted unless it passes the JavaScript Validation. Please be aware that this method will bring a User Experience problem if he or she has JavaScript disabled, for this post please disregard the issue.
After you create your form, then we need to dive into the JavaScript code:
<script type="text/javascript" language="javascript">
function validate(){
//Create Fields Array
var fields = new Array;
var fields = [document.getElementById('username'),document.getElementById('pass')];
//Create Variable to Keep Track of Errors
var err = 0;
//Start Validation Loop
for (i=0;i<fields.length;i++){
//Check Fields in Array to Make Sure they are not Empty
if (fields[i].value == ""){
err++;
}
}//Close Loop
//Check That There are No Errors
if (err === 0){
//Submit Form
document.myform.submit();
}else {
//If there are errors, return false and alert the user
alert("Please Fill Out All Of The Fields");
return false;
}
}
</script>
So there it is guys, all you have to do now is to add more fields to the fields array and it will loop around all of them to check them for empty spaces.
Here is a little more explanation on the script. The first thing that I did is to store my variables, I used an array for the fields being that they have a similar job in common and it will be easire to check them all like this. (An array is created when you have multiple objects with similar properties. For example you could make an array of Car Makes, Car Types, Regular Customers. This is more efficient than creating a different variable for each single item, now you just have to work with one.
After this we start the validation, this is done by looping trough that array to check that the fields are not empty. Let me explain how to create the loop, which is using the for statement. The first line will define where your loop starts, and how many time it will be runned.
Code: for (i=0;i<fields.length;i++) Explanation: for(variable that will be keeping track of how many loops have passed ; how many times will the loop run (the .length property only gives out the array size, so that we can run it that many times ; and finally this step will add one to the loop variable for the next run)
Every time the loop runs, the code between the brackets it???s what is run multiple time. In this case we did an if statement to check the field value. if it finds an empty field it will add one to theξerr variable. After the loop is completed,ξ then we do anotherξif statement to check that there are no errors, if they are none then the form is submitted, is there is an error then it will alert the user and return false.
Hope this helped you out, please leave any comments or suggestions below.
Gilberto Cortez
www.GilbertoCortez.com // Interactive Solutions and Web Development
