HTML5 form tutorial for beginners

Inventories [ # resources ] - check em out

HTML5 form tutorial for beginners

HTML documents have several elements that add to user interactivity. One of the prime elements is the “form” element. Form elements help you make a website quick and interactive. Users can include their information through a form submission to the website. This helps in understanding the details of a particular user.

html5-forms-tutorial-a-100-web-solutions

 

HTML form structures depend on website creation. Forms have input fields which are filled in appropriately before submission. Inputs are in the form of text, password, drop-menus, checkboxes and radio buttons. HTML5 form tutorial will help you understand the concept better. A form is one of the most popular input elements that are put to use. HTML5 form tutorial will help you to improve your custom forms. This in turn enriches the user interactivity.

Build a website with HTML5 form tutorial procedure

When we design a website, we look for user satisfaction and ease of use. Html5 has increased the scope of auto-response and interactivity. This helps web developers implement quick techniques without the use of tough code segments in JavaScript.

In this HTML5 form tutorial we learn form implementation. I will help you build a basic form in html5 for yourself.

Firstly, we must declare the form itself in the html page.

<div id="form_wrapper">
<form action="form-implementations-with-html5.php"

method="post">

<label>Enter your name</label>

<input type="text" name="username" size="30"
placeholder="name" autocomplete="off"/>
<br/>
<label>Enter a password</label>

<input type="password" name="password" size="30"
placeholder="password" autocomplete="off"/>
<br/>

<label>Enter your email id</label>

<input type="email" name="email" size="30"
placeholder="email" autocomplete="off"/>
<br/>

<label>Enter your website address</label>

<input type="url" name="url" size="30"
placeholder="website address" autocomplete="off"/>
<br/>

<label style="color: red;letter-spacing: 2px">
The next two fields would work only for
webkit and opera users</label>
<br/>

<label>Enter your age</label>

<input type="number" name="age" min="1" max="120"/>
<br/>

<label>Knowledge level in programming</label>

<input type="range" name="level" min="1" max="10"/>
<br/>

<input type="reset" name="reset" value="RESET"/>
<br/>

<input type="submit" name="submit" value="SUBMIT"/>
</form>
</div>

Then we add some styling to the form wrapper div element. Each element in the form can be styled individually. Prefer using classes and ids for reduced efforts. Here, I have used ids and subsequent DOM structures styling procedures. You can use a customized styling pattern according to your wish. Your approach may be something different from what is mentioned in this html5 form tutorial. I have not used a style sheet separately. The styling is mentioned in the head section of the same page.

body
{
background: #ccc
}

#form_wrapper
{
width: 600px;
height: auto;
overflow: auto;
margin: 50px auto auto 350px;
background: #fff;
}

#form_wrapper form
{
padding: 20px;
height: auto;
overflow: auto
}

#form_wrapper form input
{
margin: 20px;
height: 30px;
width: 250px;
float: right;
border: 1px solid #f5f5f5;
padding-left: 10px
}

#form_wrapper form input:focus
{
outline: none;
}

#form_wrapper form label
{
margin: 20px;
height: 30px;
color: #aaa;
font-size: 16px;
font-family: Helvetica, sans-serif;
float: left
}

 

Our HTML5 form tutorial notifies that forms are normally submitted to an external script page on to the server. Scripting is done through a server-side language like PHP or ASP. PHP is a simpler syntax. If you are versed with C language syntax, you can easily figure out the coding in this example. In case you are a novice in PHP, you might want to go through some of the PHP Basics.

The HTML5 form tutorial PHP code snippet goes as follows:

<?php
if(isset ($_POST['submit']))
{

include_once 'project_connections.php';
connect();

//Checking table existence
function tableExists($name)
{
$query = "select * from $name";
$result = mysql_query($query);

if($result)
{
return TRUE;
}
else
{
return FALSE;
}
}

$name=$_POST['username'];
$pass=$_POST['password'];
$email = $_POST['email'];
$url = $_POST['url'];
$age = $_POST['age'];
$level = $_POST['level'];

if(tableExists('html5_form'))
{

$query2="insert into html5_form

(username, password, email, url, age, level)

VALUES

('$name', '$pass', '$email', '$url', '$age', '$level')";

$results2 = mysql_query($query2)
or die(mysql_error());
}
else
{
$query2="CREATE TABLE html5_form (
username varchar(30),
password varchar(30),
email varchar(50),
url varchar(50),
age varchar(10),
level varchar(10)
)";

$results2 = mysql_query($query2)
or die(mysql_error());

$query2="insert into

html5_form(username,password,email,url,age,level)

VALUES('$name','$pass','$email', '$url', '$age', '$level')";

$results2 = mysql_query($query2)
or die(mysql_error());

}

?>

Significance of this HTML5 form tutorial

Form elements are helpful when you design a website. It helps in collecting the user’s information. So, when a user wants to login to your website, or register for a newsletter; the HTML5 form tutorial will help you grab the field input and store it.

Inventories [ # resources ] - check em out