While designing any form we will get requirement of legend tag for good look and feel. We can design the form using bootstrap 4 and legend like this
<fieldset class="border p-2">
<legend class="w-auto">
Fleet Search
</legend>
</fieldset>
Hi
One of the cool feature added in HTML 5.0 i.e drag and drop. Previously we were doing this task by using pure Javascript and Jquery. But we can doing using HTML 5.0 and Javascript in very simple way.
Here just write 3 functions in Javascript i.e
a. allowDrop(ev)
b. drag(ev)
c. drop(ev)
For example if we have to make image as dragable then make there draggable=”True” and ondragstart just call drag function. like this
<img id="img1" src="Water lilies.jpg" draggable="true" ondragstart="drag(event)" width="336" height="100">
For div where we have to keep this image ondrop just call drop(event) function and on ondragover just call allowDrop function
like this
<div class="DivClass1" ondrop="drop(event)"
ondragover="allowDrop(event)">Drop Here</div>
The complete HTML code is like this
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Drag and drop</title>
<style type="text/css">
.DivClass
{
width:350px;
height:120px;
padding:10px;
border:1px solid #aaaaaa;
}
.DivClass1
{
width:350px;
height:120px;
padding:10px;
border:5px solid #aaaaaa;
}
</style>
<script type="text/javascript">
function allowDrop(ev) {
ev.preventDefault();
}
function drag(ev) {
ev.dataTransfer.setData("Text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="DivClass" ondrop="drop(event)"
ondragover="allowDrop(event)">Drop Here </div>
<br />
<div class="DivClass1" ondrop="drop(event)"
ondragover="allowDrop(event)">Drop Here</div>
<img id="img1" src="Water lilies.jpg" draggable="true"
ondragstart="drag(event)" width="336" height="100">
</form>
</body>
</html>
Hi
Recently i was doing some test with HTML 5 tag. There are some nice cool features have been added. Now no need to write Javascript validation logic or use validation control.
Now we can use inbuilt features of HTML 5 for validation purpose. Here is the complete syntax
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default4.aspx.cs" Inherits="Default4" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<fieldset style="width: 549px">
<legend><b>Login Detail</b></legend>
UserName:
<input id="username" name="username" pattern="[a-zA-Z0-9]{5,}" title="Minmimum 5 letters or numbers." required> <br /> <br />
Password:
<input id="password" name="password" type="password" pattern=".{5,}" title="Minmimum 5 letters or numbers." required>
<p/>
<input type="submit" class="btn" value="Login">
</fieldset>
<br />
<fieldset style="width: 552px">
<legend><b>Registration Detail</b></legend>
UserName:
<input id="username2" name="username" pattern="[a-zA-Z0-9]{5,}" title="Minmimum 5 letters or numbers." required> <br /> <br />
Password:
<input id="password2" name="password" type="password" pattern=".{5,}" title="Minmimum 5 letters or numbers." required> <br /> <br />
Email:
<input id="email" name="email" type="email" required> <br /> <br />
URL:
<input id="url" name="url" type="url"> <br /> <br />
<p/>
<input type="submit" class="btn" value="Register"> <br /> <br />
</fieldset>
</form>
</body>
</html>
Using HTML 5.0, Webpage can store data locally within the user’s browser . Previously I was possible only by using cookie concept but there was storage problem. Many browsers have size limit of 4,096 bytes for a single cookie. But using “local Storage” we store upto 5mb data on browser.
For storing data there are 2 options available
a. Using Local storage : Store data with no expiration date.
b. Using Session Storage : Store data for one session only
Syntax for using Local Storage using Javascript
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="LocalStorage.aspx.cs" Inherits="LocalStorage" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function SaveData() {
if (typeof (Storage) !== "undefined") {
window.localStorage["myKey"] = document.getElementById("txtName").value;
alert("Data has been Save in LocalStorage");
}
else {
alert("Sorry this browser doesnot suppot HTML5");
}
}
function FetchData() {
document.getElementById("txtOP").value = window.localStorage["myKey"];
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtName" runat="server" />
<br />
<br />
<asp:Button ID="btnSubmit" runat="server" OnClientClick="SaveData()" Text="Submit" />
<br />
<br />
<asp:Button ID="btnDisp" runat="server" OnClientClick="FetchData()" Text="Click here to Fetch Data" />
<br /><br />
<asp:TextBox ID="txtOP" runat="server" />
</div>
</form>
</body>
</html>
Note Syntax will same for SessionStorage.
Hi
It is not mandatory that only VS 2010 Sp1 and above will support HTML 5. Now you can also use in VS 2008 and 2010.
You can download from here HTML 5 Plugin
Chandradev's Blog 