Basic HTML Input Controls
<html>
<body bgcolor="blue">
<center>
<canvas id="myCanvas" width="1000" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createLinearGradient(0,152,550,500);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(0,0,1222,1110);
</script>
<pre>
COLOR : <input type="color" align="right"><br>
NUMBER : <input type="number"><br>
TIME : <input type="time" align="middle"><br>
DATE : <input type="date"><br>
PASSWORD : <input type="password"><br>
DATE TIME : <input type="datetime-local"><br>
MONTH : <input type="month"><br>
WEEK : <input type="week"><br>
EMAIL : <input type="email"><br>
RANGE : <input type="range" min="0" max="100"><br>
SEARCH : <input type="search"><br>
TEL : <input type="tel"><br>
URL : <input type="url"><br>
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</br>
keygen element:
<form action="demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name">
Encryption: <keygen name="security">
<input type="submit">
</form>
output element:<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100 +
<input type="number" id="b" value="50">=
<output name="x" for="a b"></output>
</form>
<form autocomplete="on">
First name:<input type="text" name="fname" autofocus><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>
<form>
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formaction="demo" value="Submit as admin">
</form>
form target : <form action="http://w3schools.com/html/demo_form.asp">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit as normal">
<input type="submit" formtarget="_blank" value="Submit to a new window/tab">
</form>
image input type : <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
Select images: <input type="file" name="img" multiple>
<input type="submit">
<form>
Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
<input type="submit">
<input type="text" name="fname" placeholder="First name"><br>
<input type="text" name="lname" placeholder="Last name"><br>
<input type="submit" value="Submit">
</form>
</pre>
<form>
validation:
Username:
<input type="text" name="usrname" required>
<input type="text" name="usrname1" required>
<input type="text" name="usrname2" required>
<input type="submit">
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>
<section>
<h1>WWF's Panda symbol</h1>
<p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>
</section>
<article>
<h1>Internet Explorer 9</h1>
<p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
the public on March 14, 2011 at 21:00 PDT.....</p>
</article>
figure caption:
<figure>
<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig.1 - The Pulpit Rock, Norway.</figcaption>
</figure>
</form>
</body>
</html>
<body bgcolor="blue">
<center>
<canvas id="myCanvas" width="1000" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
// Create gradient
var grd=ctx.createLinearGradient(0,152,550,500);
grd.addColorStop(0,"red");
grd.addColorStop(1,"white");
// Fill with gradient
ctx.fillStyle=grd;
ctx.fillRect(0,0,1222,1110);
</script>
<pre>
COLOR : <input type="color" align="right"><br>
NUMBER : <input type="number"><br>
TIME : <input type="time" align="middle"><br>
DATE : <input type="date"><br>
PASSWORD : <input type="password"><br>
DATE TIME : <input type="datetime-local"><br>
MONTH : <input type="month"><br>
WEEK : <input type="week"><br>
EMAIL : <input type="email"><br>
RANGE : <input type="range" min="0" max="100"><br>
SEARCH : <input type="search"><br>
TEL : <input type="tel"><br>
URL : <input type="url"><br>
<input list="browsers">
<datalist id="browsers">
<option value="Internet Explorer">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
</br>
keygen element:
<form action="demo_keygen.asp" method="get">
Username: <input type="text" name="usr_name">
Encryption: <keygen name="security">
<input type="submit">
</form>
output element:<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100 +
<input type="number" id="b" value="50">=
<output name="x" for="a b"></output>
</form>
<form autocomplete="on">
First name:<input type="text" name="fname" autofocus><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>
<form>
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit"><br>
<input type="submit" formaction="demo" value="Submit as admin">
</form>
form target : <form action="http://w3schools.com/html/demo_form.asp">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit as normal">
<input type="submit" formtarget="_blank" value="Submit to a new window/tab">
</form>
image input type : <input type="image" src="img_submit.gif" alt="Submit" width="48" height="48">
Select images: <input type="file" name="img" multiple>
<input type="submit">
<form>
Country code: <input type="text" name="country_code" pattern="[A-Za-z]{3}" title="Three letter country code">
<input type="submit">
<input type="text" name="fname" placeholder="First name"><br>
<input type="text" name="lname" placeholder="Last name"><br>
<input type="submit" value="Submit">
</form>
</pre>
<form>
validation:
Username:
<input type="text" name="usrname" required>
<input type="text" name="usrname1" required>
<input type="text" name="usrname2" required>
<input type="submit">
<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>
<section>
<h1>WWF's Panda symbol</h1>
<p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>
</section>
<article>
<h1>Internet Explorer 9</h1>
<p>Windows Internet Explorer 9 (abbreviated as IE9) was released to
the public on March 14, 2011 at 21:00 PDT.....</p>
</article>
figure caption:
<figure>
<img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
<figcaption>Fig.1 - The Pulpit Rock, Norway.</figcaption>
</figure>
</form>
</body>
</html>
Comments
Post a Comment