Home

About Proweb

Services

Paket website

Portfolio

Articles

Career

Contact Us

Search

Create jQuery Form with Progress bar and Input Limiter

Pernahkah kita melihat isi situs website yang meminta kesedian penggunjung yang berkunjung ke dalam situs tersebut untuk dapat menuliskan komentar tentang isi dari website tersebut, biasanya pada kotak komentar tertulis nama, kemudian alamat email, dan isi komentar tersebut., nah alangkah menariknya ketika kita mengisi isi komentar  tersebut terdapat parameter inputnya , seperti gambar di bawah ini ;

Nah terliat menari bukan sehingga si pembuat komentar  juga akan melihat seberapa bobot isi komentarnya sehingga secara tidak sadar akan menulis komentar yang banyak, yang hanya bukan sekedar ucapan terima kasih., berikut ini langkah-langkah pembuatanya, penulis hanya memberikan beberapa tahapan, untuk lebih jelas dan lengkap silahkan di download disini untuk script codinganya

CSS for your form

body{ margin:30px auto; width:75%; font: normal normal 12px/1.8em

 "Lucida Sans Unicode", "Lucida Grande", "Trebuchet MS", sans-serif; }
 #heading
{
 font-family:Georgia, "Times New Roman", Times, serif;
 font-size:56px;
 color:#CC0000;
 float:left;}
 a{
 font-size:24px}
#description
{
	width:297px; height:100px;
	font-family:Arial, Helvetica, sans-serif;
 
	color:#000000;
	font-size:15px;
}
#filling_tube_input
{
	background-color:red;
	width:0px;
	height:6px;
}
#filling_tube_subject
{
	background-color:red;
	width:0px;
	height:6px;
}
#filling_tube
{
	background-color:red;
	width:0px;
	height:6px;
}
.label{
       width:100px;
}
input{outline: none; margin-bottom:1px;/* Get rid of the 

'glow' effect in WebKit, optional */}
#container
{
height:6px; background-color:#FFFFFF; width:299px; border:solid 

1px #000; margin-right:3px;
}
#container_input
{
height:6px; background-color:#FFFFFF; width:201px; border:solid 

1px #999; margin-right:3px;
}
#container_subject
{
height:6px; background-color:#FFFFFF; width:201px; border:solid

 1px #000; margin-right:3px;
}

jQuery file with input limiter plugin.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"

type="text/javascript"><!--mce:0--></script>

javascript to call input limiter function.

$(function() {
	$('#description').inputlimiter({limit: 200});
    $('#name').inputlimiter({limit: 35});
    $('#subject').inputlimiter({limit: 100});
});

HTML

 
<div class="label">Name</div>
<input id="name" name="name" size="30" />
<div class="label">Email</div>
<input id="subject" name="subject" size="30" />
<div class="label">Description</div>
<textarea id="description"></textarea>

Demikianlah yang penulis dapat terangkan semoga bermanfaat untuk pembaca


Kunjungi www.prowebpro.com untuk menambah wawasan anda.