Home » , , » Designing input fields using Jquery

Designing input fields using Jquery

jquery tutorials

To make a website look more professional it is imtortant to use the latest programing languages like Html5 and Css3 and of course Jquery.

First of all we will start with css, making it beautiful then we will use jquery to handle user clicks.

Download
Create 3 files, index.html, style.css and script.js
Open index.html and write
<html>
<head>
<title>Jquery input fields | thecodertips.com</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="script.js"></script>
<link type="text/css" rel="stylesheet" href="style.css">
</head>
<body>
<center><a href="http://thecodertips.com" id="tut" title="Read the tutorial">&#187;&#187; Tutorial &#171;&#171;</a><br /><br />
<input type="text" id="box" value="Type something..">
</center>
</body>
</html>

Now open style.css and write
#box{
outline: none; /* remove default borders */
padding: 5px; /* zoom it by 5px */
border: 1px solid gray; /* set an black border */
color: gray; /* text in the box is set to gray */
/* set border radius */
-webkit-border-radius: 3px; /* to work with google chrome and safari */
-moz-border-radius: 3px; /* to work with firefox */
border-radius: 3px; /* other browsers like ie */
}

/* when the user is typing in the box */
#box:focus{
border: 1px solid #0066FF;
color: #333;
}

/* to style the tutorial link */
#tut{
text-decoration: none;
color: #0066FF;
}

Now open script.js and write
$(document).ready(function(){

// set a variable to the box
var box = $("#box");

// once box get's clicked
box.click(function(){
box.val(""); // set it to empty
});

});

0 תגובות:

Post a Comment

Follow by Email