Loading...
» Home » Download » Pemrograman » Membuat Form Message Character Count Menggunakan Boostrap

Membuat Form Message Character Count Menggunakan Boostrap

Wednesday, June 4, 2014

Pada tutorial ini kita akan membahas bagai mana cara membuat character count pada website yang kita buat menggunakan boostrap, bagi anda yang belum pernah melihat contoh dari character count itu sendiri anda dapat menemukan contohnya pada situs micro blogging twitter

Nah perlu anda ketahui juga, Apasih boostrap itu? Bootstrap adalah platform baru yang dikembangkan tim twitter. Pertama kali muncul pada ajang hackweek dan kini sudah mulai penyempurnaan. Platform ini hanya menggunakan sedikit coding CSS dan JavaScript namun tetap bisa membuat website yang powerfull mengikuti perkembangan browser. Website yang menggunakan bootstrap akan menjadi website yang fleksibel, nyaman dan tentu saja cepat

Untuk dokumentasi tentang boostrap sendiri anda bisa lihat disini https://blog.twitter.com/2011/bootstrap-twitter


File-file yang perlu anda siapkan disini adalah :


  1. bootstrap.min.css
  2. jquery-1.10.2.min.js
  3. bootstrap.min.js
Setelah semua file pendukungnya lengkap, sekarang mari kita buat codenya, silahkan copy paste code di bawah ini



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
        body{padding-top:20px;}    </style>
    <script src="jquery-1.10.2.min.js"></script>
    <script src="bootstrap.min.js"></script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-sm-4 col-md-4">
            <div class="panel panel-default">
                <div class="panel-body">                
                    <form accept-charset="UTF-8" action="" method="POST">
                        <textarea class="form-control counted" name="message" placeholder="Tulis Pesan dan Kesan Anda" rows="5" style="margin-bottom:10px;"></textarea>
                        <h6 class="pull-right" id="counter">1000 karakter tersisa</h6>
                        <button class="btn btn-info" type="submit">Kirim Pesan</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

Untuk file lengkapnya silagkan download melalui link di bawah ini
http://www.4shared.com/rar/735vjYeAba/message_topitoga.html
Bagikan melalui Facebook / Twitter / Google Plus untuk melihat Link Download

BERIKLAN DISINI
IKLAN ANDA AKAN DI TAMPILKAN DI STEIAP HALAMAN
720x125
❖ 4:08 AM ❖ 0 comments
Advertise Here
Debot Personal Blog
300x250

Click here for comments 0 comments:

Terima kasih atas komentar Anda