Skip to main content

Cara buat Form jquery mobile

Mengenal apa itu Form ?

Kita akan bahas Cara buat Form jquery mobile. apa itu Form, anggap saja pertanyaan tersebut bisa terjawab dengan sendirinya. Pada semua jenis aplikasi pastinya terdapat form. Form diperlukan dalam kita membuat sebuah halaman aplikasi, apalagi yang berhubungan dengan proses Input data. Sebagai contoh :

fom jquery mobile
Contoh Form Inputan

Pembahasan ini lanjutan dari materi sebelumnya tentang User Interface pada jquery mobile.

baca : User Interface Pemula

Lanjutan dari materi tersebut, akan kita bahas tentang cara pembuatan Form pada aplikasi Mobile menggunakan jquery mobile.

JQUERY MOBILE FORM

Dalam sebuah form pastinya terdapat : Text Input, Button, CheckBox, TextArea, Radio Button, dan elemen lainnya. kita akan contoh kan kesemua elemen tersebut dalam satu aplikasi. langsung saja buka Notepad++ buatkan file baru simpan dengan nama : form.html

baca : Pemula jquery mobile

Pembuatan source utama


<html>
<head>
<title>
Dasar jquery mobile
</title>
<meta charset="utf-8">
<!-- viewport Digunakan -> untuk zoom tampilan di browser smartphone kita.
X-UA-Compatible —> Untuk mengecek compabilitas perangkat yang digunakan. -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- Memanggil Script jQuery secara Online -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<!-- buat halaman, inisialisasi sebagai id = home -->
<div data-role="page">
<!-- buat Header -->
<header data-role="header">
<h1>REGISTRASI</h1>
</header>
<!-- buat Elemen Form disini-->
<div data-role="main" class="ui-content">
<form method="post" action="">

</form>
</div>
<!-- buat Footer-->
<footer data-role="footer">
<h2>http://blogciqwan.com</h2>
</footer>
</div>
</body>
</html>

Berikut penjelasan kode untuk membuat setiap elemen dalam form

Source jquery mobile untuk buat Text Input


<div class="ui-field-contain">
<!-- Code untuk buat Inputan Text -->
<label for="fullname">Nama lengkap:</label>
<input type="text" name="nm" id="nm">
<!-- Code untuk buat Inputan Tanggal Lahir menampilkan kalender-->
<label for="bday">Tanggal Lahir:</label>
<input type="date" name="bday" id="bday">
<!-- Code untuk buat Inputan Format Email-->
<label for="email">E-mail:</label>
<input type="email" name="email" id="email" placeholder="Your email..">
<!-- Code untuk buat Inputan Teks yang lebih banyak, ex. Alamat -->
<label for="info">Alamat Lengkap:</label>
<textarea name="addinfo" id="info"></textarea>

<label for="fullname">Password:</label>
<input type="password" name="passw" id="pswd" placeholder="Password">

Hasilnya :

Cara Desain Form jquery mobile
Text inputan

Source jquery mobile untuk buat Radio Button


<!-- Code untuk buat Radio Button, definisikan data-role terlebih dahulu -->
<fieldset data-role="controlgroup">
<!-- Tentukan Titel -->
<legend>Jenis Kelamin:</legend>
<label for="male">Laki-Laki</label>
<input type="radio" name="jns" id="male" value="laki-Laki">
<label for="female">Perempuan</label>
<input type="radio" name="jns" id="female" value="Perempuan">
</fieldset>

Hasilnya :

Cara Desain Form jquery mobile
Radio Button

Source jquery mobile untuk buat Check Box


<!-- Code untuk buat Radio Button, definisikan data-role terlebih dahulu -->
<fieldset data-role="controlgroup">
<legend>Hobby:</legend>
<label for="red">Browsing</label>
<input type="checkbox" name="favcolor" id="red" value="Browsing">
<label for="green">Main Bola</label>
<input type="checkbox" name="favcolor" id="green" value="Main Bola">
<label for="blue">Jalan-Jalan</label>
<input type="checkbox" name="favcolor" id="blue" value="Jalan-Jalan">
</fieldset>

Hasilnya :

Cara Desain Form jquery mobile
Check Box

Source jquery mobile untuk buat Button


<input type="submit" data-inline="true" value="KIRIM">
<input type="reset" data-inline="true" value="CANCEL">

Hasilnya :

Cara Desain Form jquery mobile
Button

Dan berikut code lengkapnya :


<html>
<head>
<title>
Dasar jquery mobile
</title>
<meta charset="utf-8">
<!-- viewport Digunakan -> untuk zoom tampilan di browser smartphone kita.
X-UA-Compatible —> Untuk mengecek compabilitas perangkat yang digunakan. -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- Memanggil Script jQuery secara Online -->
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<!-- buat halaman, inisialisasi sebagai id = home -->
<div data-role="page">
<!-- buat Header -->
<header data-role="header">
<h1>REGISTRASI</h1>
</header>
<!-- buat Content -->
<div data-role="main" class="ui-content">
<form method="post" action="">

<div class="ui-field-contain">
<!-- Code untuk buat Inputan Text -->
<label for="fullname">Nama lengkap:</label>
<input type="text" name="nm" id="nm">
<!-- Code untuk buat Inputan Tanggal Lahir menampilkan kalender-->
<label for="bday">Tanggal Lahir:</label>
<input type="date" name="bday" id="bday">
<!-- Code untuk buat Inputan Format Email-->
<label for="email">E-mail:</label>
<input type="email" name="email" id="email" placeholder="Your email..">
<!-- Code untuk buat Inputan Teks yang lebih banyak, ex. Alamat -->
<label for="info">Alamat Lengkap:</label>
<textarea name="addinfo" id="info"></textarea>

<!-- Code untuk buat Radio Button, definisikan data-role terlebih dahulu -->
<fieldset data-role="controlgroup">
<!-- Tentukan Titel -->
<legend>Jenis Kelamin:</legend>
<label for="male">Laki-Laki</label>
<input type="radio" name="jns" id="male" value="laki-Laki">
<label for="female">Perempuan</label>
<input type="radio" name="jns" id="female" value="Perempuan">
</fieldset>
<!-- Code untuk buat Radio Button, definisikan data-role terlebih dahulu -->
<fieldset data-role="controlgroup">
<legend>Hobby:</legend>
<label for="red">Browsing</label>
<input type="checkbox" name="favcolor" id="red" value="Browsing">
<label for="green">Main Bola</label>
<input type="checkbox" name="favcolor" id="green" value="Main Bola">
<label for="blue">Jalan-Jalan</label>
<input type="checkbox" name="favcolor" id="blue" value="Jalan-Jalan">
</fieldset>
<!-- Untk inputan Password -->
<label for="fullname">Username:</label>
<input type="text" name="user" id="user">
<label for="fullname">Password:</label>
<input type="password" name="passw" id="pswd" placeholder="Password">
</div>
<!-- Untuk pebuatan Button -->
<input type="submit" data-inline="true" value="KIRIM">
<input type="reset" data-inline="true" value="CANCEL">
</form>
</div>
<!-- buat Footer-->
<footer data-role="footer">
<h2>http://blogciqwan.com</h2>
</footer>
</div>
</body>
</html>

Tampilan Lengkapnya pembuatan Form menggunakan jquery mobile secara sederhana adalah sebagai berikut:

Desain Form jquery mobile
Desain Form jquery mobile

Kesimpulan Cara buat Form jquery mobile:

  • Menggunakn jquery Mobile kita diberikan kemudahan dalam membuat form
  • Dalam contoh kita gunakan class “ui-content” untuk tampilan yang lebih pas,
  • Warna, theme bisa kita modifikasi kembali sesuai dengan kebutuhan

Salam.

Facebook Comments

Ridwan, SST

Seorang Tenaga Pengajar Yang Kebetulan Suka Menulis Dan Membuat Tulisan Melalui Blog Web. CP : 0852 7747 2958 E-mail : awanpijay@rocketmail.com

More Posts - Website

Follow Me:
TwitterFacebookYouTube

Ridwan, SST

Seorang Tenaga Pengajar Yang Kebetulan Suka Menulis Dan Membuat Tulisan Melalui Blog Web. CP : 0852 7747 2958 E-mail : awanpijay@rocketmail.com