 |
| form-help-tip |
In this Tutorial i am going to explain how the form help tip is working. This is very useful and customer easily understand the field. In this program i given one image in right hand side when you move the cursor to the image it will show the hint for the particular field and also when you click the text box it will give the same hint.
Html code for Form Help Tip:
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />
<title>Form Help – tip</title>
<link rel=”stylesheet” type=”text/css” href=”san.css” media=”all” />
<script type=”text/javascript” src=”http://ecto.lt/external/js/jquery.js”></script>
<script type=”text/javascript” src=”http://ecto.lt/external/js/jquery.formtip.js”></script>
</head>
<body>
<div class=”body”>
<div class=”content”>
<center>
<h1>Form Help-Tip:</h1>
</center>
<form id=”form2″ action=”” method=”post” onsubmit=”return false;”>
<ul class=”formBlock”>
<li>
<dl>
<dt>Your Name: </dt>
<dd><input name=”login” type=”text” value=”” class=”formInput” /></dd>
<dd><img id=”help1″ class=”icons icon_help” src=”tip-icon.png” alt=”” /></dd>
</dl>
</li>
<li>
<dl>
<dt>Enter Password: </dt>
<dd><input name=”pwd” type=”password” value=”” class=”formInput” /></dd>
<dd><img id=”help2″ class=”icons icon_help” src=”tip-icon.png” alt=”” /></dd>
</dl>
</li>
<li>
<dl>
<dt>Re-Enter Password: </dt>
<dd><input name=”re-pwd” type=”password” value=”” class=”formInput” /></dd>
<dd><img id=”help3″ class=”icons icon_help” src=”tip-icon.png” alt=”” /></dd>
</dl>
</li>
<li>
<dl>
<dt>Email: </dt>
<dd><input name=”email” type=”text” value=”” class=”formInput” /></dd>
<dd><img id=”help4″ class=”icons icon_help” src=”tip-icon.png” alt=”” /></dd>
</dl>
</li>
</ul>
<br />
<center>
<p><a href=”http://www.sanwebtutorials.blogspot.in/”>San Web Tutorials</a></p>
</center>
</form>
<script type=”text/javascript”>
<!– //
$(document).ready(function()
{
$(‘#form2 input[name=”login”]’).formtip({
message : ‘Please Enter Your Name’,
handler : ‘#help1’
});
$(‘#form2 input[name=”pwd”]’).formtip({
message : ‘Please Enter Your Password.’,
handler : ‘#help2’
});
$(‘#form2 input[name=”re-pwd”]’).formtip({
message : ‘Please Re-Enter Your Password.’,
handler : ‘#help3’
});
$(‘#form2 input[name=”email”]’).formtip({
message : ‘Please Enter your valid Email This is very important for us.’,
handler : ‘#help4’
});
});
// –>
</script>
</div>
</div>
</body>
</html>
san.css
body,
div,
dl,
dt,
dd,
h1,
h2,
h3,
pre,
form,
label,
fieldset,
input,
p,
blockquote,
th,
td {
margin: 0;
padding: 0;
}
ol,
ul {
margin: 0;
padding: 10px 10px 10px 30px;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset,
img {
border: 0;
}
:active,
:focus {
outline: 0;
}
acronym {
cursor: help;
}
button {
cursor: pointer;
}
textarea {
overflow: auto;
}
p {
padding-bottom: 10px;
}
html,
body,
table,
input,
select,
textarea,
button {
font: 13px Arial;
color: #1111;
}
input,
select,
textarea {
font-size: 14px;
color: #000;
padding: 3px 4px;
border-top: 1px solid #bfbfbf;
border-right: 1px solid #e6e6e6;
border-bottom: 1px solid #e6e6e6;
border-left: 1px solid #bfbfbf;
}
input:focus,
select:focus,
textarea:focus {
border-top-color: #822f02;
border-right-color: #822f02;
border-bottom-color: #822f02;
border-left-color: #822f02;
background: #fce2d4;
}
h1 {
color: #000;
margin-bottom: 10px;
font-size: 24px;
font-weight: normal;
text-transform: normal;
letter-spacing: -1px;
line-height: 1em;
}
.formBlock .icon_help {
margin: 6px 0 0 10px;
}
div.body {
width: 780px;
overflow: hidden;
margin: 25px auto;
}
div.content {
margin-right: 188px;
padding: 20px;
background:#DADADA;
border-radius:30px;
}
/** Form */
ul.formBlock {
list-style: none;
padding: 0;
}
ul.formBlock li {
display: block;
}
ul.formBlock li dl {
/*position:relative; TODO: kam sitas cia? */
overflow: hidden;
padding: 2px 0;
}
ul.formBlock li dl dt,
ul.formBlock li dl dd {
float: left;
display: block;
}
ul.formBlock li dl dt {
width: 120px;
text-align: right;
padding: 4px 5px 0 0;
font-size: 12px;
}
ul.formBlock li dl dd b.value {
font-size: 14px;
line-height: 18px;
}
ul.formBlock .formInput,
ul.formBlock .formTextarea,
ul.formBlock .formSelect {
padding: 4px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
font-size: 14px;
}
ul.formBlock .formInput {
width: 350px;
}
ul.formBlock .formTextarea {
width: 350px;
height: 50px;
}
ul.formBlock .formTextareaBig {
width: 550px;
height: 100px;
}
ul.formBlock .formSelect {
width: 360px;
}
ul.formBlock .formCheckbox {
margin-top: 3px;
}
ul.formBlock .formText {
padding: 2px 0;
}
ul.formBlock .formSelectBlock {
border: 1px solid #ccc;
overflow: auto;
width: 200px;
max-height: 100px;
}
ul.formBlock .formSelectBlock input {
vertical-align: middle;
margin: 3px;
}
ul.formBlock .formSelectBlock label {
display: block;
padding: 3px 5px;
line-height: 14px;
}
ul.formBlock p {
padding: 3px 0 7px;
}
.shortInputs .formInput,
.shortInputs .formTextarea {
width: 200px !important;
}
.shortInputs .formSelect {
width: 206px !important;
}
.ui-tooltip {
font-size: 0.8em;
max-width: 200px;
border: 1px solid #000;
padding: 8px 12px;
line-height: 1.3em;
background: #fbe9c5;
}
The result of Form Help tip is look Like below image:
