PHP TUTORIALS

Sunday 8 June 2014

How to display value in HTML5

In this example how to display value in html5. We have use html5 tag like " label" and " input type".We have displayed some text fields and submit bottom and we have css . we have used java script function.

form.html

<!Doctype html>
<html>
<head>
<style>

}
#header {
width:550px;
height: auto;
}
#header, h1 {
font-size: 30px; font-style: inherit; text-align: center;
display: block;
}
#form123
{
text-align: left; margin-top: 50px;

width: 550px;
height: auto;
margin: auto;

}

#form123 label, input, textarea {

width: 300px;
height: 40px;
display: block;
font-family: sans-serif;
font-size: 20px;
}
#sub {
margin-top: 15px;
width: 140px;

font-size:200px;
}
</style>

</head>
<body>
<div id="header">
<h1>Contact Form</h1>
</div>
<div id="form123" >

<form type=get action="page2.html">

<label for = "name">Name:<span class="star">*</span></label>
<input required type="text" name="name" id="name"></br>

<label for = "address">Address:<span class="star">*</span></label>
<textarea required id = "address" name="address"></textarea></br>


<label for = "password">Password*</label>
<input type = "password" id = "password" name="password" required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}" onChange="form.pwd2.pattern = this.value;"/>
<br/>

<label for="confirmPassword">Confirm Password*</label>
<input type = "password" id = "confirmPassword" name="confirmPassword" required pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}"/>
<br/>
<label for="telephone">Contact Number <span class="star">*</span></label>
<input type = "Number" id = "telephone" name="telephone" required maxlength="10"/></br>

<input type = "submit" text = "Submit" id="sub"/>
</form>
</div>
</body>
</html>

page2.html

<!Doctype html>
<html>
<script LANGUAGE="JavaScript">
function getParams(){
var idx = document.URL.indexOf('?');
var params = new Array();
if (idx != -1) {
var pairs = document.URL.substring(idx+1, document.URL.length).split('&');
for (var i=0; i<pairs.length; i++){
nameVal = pairs[i].split('=');
params[nameVal[0]] = nameVal[1];
}
}
return params;
}
params = getParams();
name = unescape(params["name"]);
address = unescape(params["address"]);
password = unescape(params["password"]);
confirmPassword = unescape(params["confirmPassword"]);
telephone = unescape(params["telephone"]);
document.write("Name: = " + name + "<br>");
document.write("Address : = " + address + "<br>");
document.write("Password : = " + password + "<br>");
document.write("Confirm Password : = " + confirmPassword + "<br>");
document.write("Telephone : = " + telephone + "<br>");
</script>
</html>

Display Form

Display value

ONLINE HELP FOR MEDICAL AND PROGRAMMING

Pages

Sunday 8 June 2014

How to display value in HTML5

How to display value in HTML5