KD 6 Web and Mobile Programming HTML Form

BAB 6
HTML FORM
A. Pengertian Form
Form di dalam html berfungsi untuk menampung data isian yang akan
diproses lebih lanjut baik disimpan atau dihitung. Dalam keseharian form
biasanya berbentuk kertas isian yang sering kita kenal dengan istilah
formulir, sebagai contoh :
a. Formulir pendaftaran siswa baru
b. Formulir pendaftaran keanggotaan
c. Formulir kritik dan saran
Berikut adalah salah satu contoh formulir pendaftaran siswa baru, apabila
direpresentasikan dalam kertas, apabila pendaftaran siswa baru tersebut
bersifat online maka kita harus menyiapkan media input yang bisa
menampung data isian seperti pada formulir di bawah, untuk itu maka kita
membutuhkan HTML FORM untuk menerima input dari user.
Gambar 6.1
B. Membuat Form di HTML
Pemrograman Web dan Perangkat Bergerak :: Oya Suryana, M.Kom.

Untuk membuat form di dalam HTML dengan cara menggunakan tag
pembuka <form> dan tag penutup </form>. Untuk jelasnya berikut syntax
penulisan form di dalam html :
<form name=”nama_form” id=”id_form”

method=”method_pengiriman_data”
action=”file_tujuan>
{Komponen input }
</form>
Keterangan
name : Setiap form memiliki id, hal ini untuk mengidentifikasi jika
dalam sebuah file html / php terdapat dua form atau lebih
id : Setiap form memiliki nama, hal ini untuk mengidentifikasi
jika dalam sebuah file html / php terdapat dua form atau
lebih. Id lebih diperuntukan bagi pemrograman client side
scripting menggunakan javascript
method : Method merupakan metode pengiriman data yang diinput
ke file yang dituju
action : Merupakan file yang akan dijalankan ketika user
menekan tombol submit (misal : tombol simpan, hapus,
delete atau update)
C. Membuat Komponen Input Form

a. Input text
Komponen input yang digunakan untuk menerima semua karakter baik
huruf, angka maupun tanda baca maka gunakan input dengan tipe text,
adapun syntax-nya seperti berikut :
<input type=”text” name=”nama_komponen”

id=”id_komponen”/>

Pada komponen diatas terdapat tiga atribut yang harus ada yaitu type,
name, dan id sedangkan atribut tambahan yang bisa diterapkan pada
komponen input type text
size : Untuk mengatur lebar dari komponen input,

disii dengan angka
maxlength : Untuk mengatur maksimal panjang karakter
pada komponen input, nilai nya berupa angka
value : Untuk menampilkan nilai pada komponen
input nilainya semua karakter baik angka, huruf
atau tanda baca.
readonly : Untuk mengatur input text agar hanya bisa
dibaca, tidak bisa diisi data
autofocus : Untuk mengatur agar pada saat halaman
web di-load komponen input langsung terpilih.
autocomplete : Untuk mengaktifkan atau me-nonaktifkan
history pengetikan pada input text
placeholder : Untuk menampilkan deskripsi komponen
input text
required : Untuk memastikan input text wajib diisi, tidak
boleh dikosongkan
Sebagai latihan silahkan buat aplikasi sederhana berikut :

a. Buat folder dengan nama form di dalam folder c:\xampp\htdocs
b. Buat file dengan nama FormPendataan.php, ketik script berikut :
<!DOCTYPE html>
<html lang="en">
<head>
<title>FOrm Input Text</title>
</head>
<body>
<h3>Form Pendataan Siswa</h3>
<p>Silahkan masukan data pada form dibawah ini
!</p>
<form method="POST" name="form_1" id="form_1">
<p>Nomor Induk<br/>

<input type="text" name="txtNIS" id="txtNIS"
size="10" maxlength="5" autocomplete="off"
autofocus required/>
</p>
<p>Nama Lengkap <br/>
<input type="text" name="txtNAMA" id="txtNAMA"
size="30" autocomplete="off"
placeholder="Masukan Nama Anda" required/>
</p>
</form>
</body>
</html>
c. Jalankan dii browser dengan mengakses url :

http://localhost/form/FormPendataan.php
Gambar 6.2
b. Input Date
Input berikutnya adalah input dengan data berupa tanggal, misal untuk
menginput tanggal lahir, tanggal lulus, dan sebagainya. Sebagai bahan
latihan, buka kembali file FormPendataan.php dan edit dengan
menambahkan bagian yang dicetak tebal
<!DOCTYPE html>
<html lang="en">
<head>
<title>Form Pendataan Anggota</title>
</head>
<body>

<h3>Form Pendataan Anggota</h3>
<p>Silahkan masukan data pada form dibawah
ini !</p>
<form method="POST" name="form_1"
id="form_1">
<p>Nomor Induk<br/>
<input type="text" name="txtNIS"
id="txtNIS" size="10" maxlength="5"
autocomplete="off" autofocus required/>
</p>

<input type="text" name="txtNAMA" id="txtNAMA"
size="30" autocomplete="off" placeholder="Masukan
Nama Anda" autofocus" required/></p>
<p>Tempat Lahir <br/>

<input type="text" name="txtTempatLahir"
id="txtTempatLahir" size="30" autocomplete="off"
placeholder="Masukan Tempat Lahir" required/></p>
<p>Tanggal Lahir <br/>

<input type="date" name="txtTanggal"
id="txtTanggal" required/>
</p>
</form>
</body>
</html>
Jalankan dii browser dengan mengakses url :


Gambar 6.3
c. Input Email
Komponen input berikutnya adalah komponen untuk menerima data
dengan masukan email, dimana email memiliki format
namauser@nama.domain
Sebagai bahan latihan, buka kembali file FormPendataan.php dan
edit dengan menambahkan bagian yang dicetak tebal.
<!DOCTYPE html>
<html lang="en">
<head>

</head>
<body>
ini !</p>
id="form_1">
<p>Nomor Induk<br/>
</p>

<input type="text" name="txtNAMA"
id="txtNAMA" size="30" autocomplete="off"
placeholder="Masukan Nama Anda"
autofocus required/></p>

placeholder="Masukan Tempat Lahir"

</p>
<p>Alamat Email <br/>

<input type="email" name="txtEmail"
id="txtEmail" size="30" autocomplete="off"
placeholder="Masukan Email Anda"
required/></p>
</form>
</body>
</html>
Jalankan dii browser dengan mengakses url :


Gambar 6.4
d. Input Password
Pada saat melakukan pendaftaran sebuah akun biasanya diharuskan
membuat password atau pada saat login harus mengisi password.
Untuk mengisi password diupayakan tidak menampilkan data namun
menyembunyikan data. Di html form hal itu mudah dilakukan dengan
menggunakan tipe password. Sebagai bahan praktek silahkan ikuti
praktek sederhana berikut :
1. Buat file FormPendataan.php simpan di folder
c:\xampp\htdocs\form
2. Ketik script berikut :
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
ini !</p>
id="form_1">
<p>Nomor Induk<br/>

</p>


placeholder="Masukan Tempat Lahir"

</p>

autofocus" required/></p>
<p>Password <br/>
<input type="password" name="txtPassword"
id="txtPassword" size="30" placeholder="Masukan
Password Anda" required/></p>
</form>
</body>
</html>
3. Jalankan di browser dengan mengakses url :

e. Input Radio
Adakalanya formulir menyediakan sejumlah pilihan yang sifatnya
sedikit misal jenis kelamin atau golongan darah, input berupa pilihan

dalam form html bisa dibuat dengan tag input bertipe radio, untuk
jelasnya buka kembali file FormPendataan.php dan edit dengan
menambahkan bagian yang dicetak tebal.
Untuk membuat input radio ikuti langkah berikut :
1. buka kembali file FormPendataan.php dan edit dengan
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
ini !</p>
id="form_1">
<p>Nomor Induk<br/>
</p>


placeholder="Masukan Tempat Lahir" autofocus
required/></p>

</p>
<p>

Jenis Kelamin <br/>
<input type="radio" value="L">Laki-laki
<input type="radio" value="P">Perempuan
</p>

</form>
</body>
</html>
2. Jalankan kembali di browser dengan mengakses URL

http://localhost/form/FormPendataan.php, perhatikan pada
gambar terdapat komponen pilihaan jenis kelamin.
Gambar 6.5
f. Input Checkbox
Input Checkbox digunakan untuk memberikan pilihan yang boleh dipilih
lebih dari satu pilihan, hal ini berbeda dengan input radio yang hanya
boleh memilih satu pilihan. Sebagai contoh memberikan pilihan hobi
dimana setiap orang akan memiliki hobi lebih dari satu pilihan. Sebagai
latihan ikuti langkah berikut :

1. Buka kembali file FormPendataan.php dan edit dengan
2. Tambahkan script yang dicetak tebal sehingga menjadi berikut :
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
ini !</p>
id="form_1">
<p>Nomor Induk<br/>
autocomplete="off" required/>
</p>

required/></p>


</p>
<p>
Jenis Kelamin <br/>
</p>

<p>
Hobi <br/>
<input type="checkbox" value="A">Tarveling
<input type="checkbox" value="B">Otomotif
<input type="checkbox" value="C">Berkebun
</p>

placeholder="Masukan Email Anda" required/></p>
</form>
</body>
</html>
Gambar 6.6
g. Input Number
Komponen input ini digunakan untuk menerima data berupa angka
bilangan bulat. Nilainya secara default kelipatan 1 (satu). Sebagai
contoh menambah penghasilan orang tua dimana kelipatan angkanya
adalah 500.000. Sebagai latihan ikuti langkah berikut :

2. Tambahkan script yang dicetak tebal sehingga menjadi berikut
(bagian yang dicetak tebal) :
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
ini !</p>
id="form_1">
<p>Nomor Induk<br/>
</p>



</p>
<p>
Jenis Kelamin <br/>
</p>

<p>
Hobi <br/>
</p>
<p>Penghasilan Orang Tua <br/>

<input type="number" name="txtPenghasilan"
id="txtPenghasilan" size="30" step="500000"
autocomplete="off" placeholder="Masukan penghasilan
orangtua" required/></p>
</form>
</body>
</html>
3. Jalankan dengan mengakses url di browser

bagian akhir layar terdapat field penghasilan orang tua dimana nilai
awal ketika di klik 500.000 setiap anda klik panah atas dan bawah
maka kelipatannya adalah 500.000

Gambar 6.7
h. Input FIle
Komponen input file digunakan untuk menambahkan komponen untuk
meng-upload file. Tag yang digunakan adalah tag <input> dengan
menggunakan type file. Sebagai contoh mari kita modifikasi
FormPendataan.php dengan menambahkan input file. Sebagai
latihan ikuti langkah berikut :
<!DOCTYPE html>
<html lang="en">

<head>
</head>
<body>
ini !</p>
id="form_1">
<p>Nomor Induk<br/>
</p>



</p>
<p>
Jenis Kelamin <br/>
</p>
<p>
Hobi <br/>
</p>


<p>Upload Photo <br/>

<input type="file" name="txtPhoto"
id="txtPhoto" required/></p>
</form>
</body>
</html>
3. Akses halaman web dengan mengakses URL

http://localhost/form/FormPendataan.php, maka hasilnya akan
tampak seperti berikut :
Gambar 6.8
i. Select
Komponen select digunakan untuk menampilkan pilihan berupa
dropdown, komponen ini digunakan apabila pilihan relatif banyak, jika
pilihan sedikit sebaiknya gunakan komponen input radio. Mari kita

perbaiki script diatas dengan menambahkan pekerjaan orang tua
berupa pilihan jenis pekerjaan.
Tag <select></select> membutuhkan tambahan komponen untuk
menampilkan pilihan yaitu tag <option></option>.
Sebagai contoh menambah penghasilan orang tua dimana kelipatan
angkanya adalah 500.000. Sebagai latihan ikuti langkah berikut :
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
ini !</p>
id="form_1">
<p>Nomor Induk<br/>
</p>



</p>
<p>
Jenis Kelamin <br/>
</p>
<p>
Hobi <br/>
</p>

<p>Pekerjaan Orang Tua <br/>

<select name="jenisPekerjaan">
<option value="1">PNS </option>
<option value="2">TNI / POLRI </option>
<option value="3">Pedagang </option>
<option value="4">Petani </option>
<option value="5">Lainnya </option>
</select>
</p>
</form>
</body>
</html>


bagian akhir layar terdapat field pekerjaan orang tua dimana
bentuknya berupa pilihan yang hanya boleh satu item yang dipilih
Gambar 6.9
j. Textarea
Komponen input text hanya bisa menampung satu baris teks dan tidak
bisa menerima input berupa tombol enter, apabila dibutuhkan
komponen yang menerima input berupa tombol enter maka dibutuhkan
komponen textarea. Penggunaan komponen ini menggunakan tag
<textarea></textarea>. Berbeda dengan komponen input, komponen
textarea merupakan komponen yang memiliki tag berpasangan yaitu
dengan tag pembuka dan penutup.
Sebagai contoh pada form diatas akan ditambahkan field alamat
lengkap, untuk menampung alamat lengkap. Sebagai latihan ikuti
langkah berikut :
<!DOCTYPE html>
<html lang="en">

<head>
</head>
<body>
ini !</p>
id="form_1">
<p>Nomor Induk<br/>
</p>



</p>
<p>
Jenis Kelamin <br/>
</p>
<p>
Hobi <br/>
</p>



<option value="2">TNI / POLRI </option>
</select>
</p>
<p>Alamat Lengkap<br/>
<textarea name="txtAlamat" id="txtAlamat"
rows="5" cols="40"></textarea>
</p>

</form>
</body>
</html>

bagian akhir layar terdapat kotak isian yang cukup lebar dan bisa
menampug lebih dari satu baris input.

Gambar 6.10
k. Button
Komponen berikutnya adalah komponen button, formulir tidak akan
lengkap apabila tidak ada komponen button, karena komponen button
lah yang akan mengeksekusi form tersebut untuk diproses lebih lanjut.
Adapun syntax untuk membuat sebuah button adalah :
<button type=”tipe_button”>Label Button</button>
Berdasarkan tipenya button terbagi menjadi tiga jenis yaitu :

1. Submit, berfungsi untuk menjalankan atribut action pada tag form
2. Reset, berfungsi untuk mengosongkan form yang telah diisi
3. Button, berfungsi untuk menjalankan client side scripting
Sebagai latihan akan kita lengkapi script diatas dengan menambahkan

dua buah button yaitu button Simpan yang bertipe submit dan button
Kosongkan Form yang bertipe Reset, ikuti langkah berikut :

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
ini !</p>
id="form_1">
<p>Nomor Induk<br/>
</p>



</p>
<p>
Jenis Kelamin <br/>
</p>
<p>
Hobi <br/>

</p>


<option value="2">TNI / POLRI
</option>
</select>
</p>
<p>Alamat Lengkap<br/>
<textarea name="txtAlamat" id="txtAlamat"
rows="5" cols="40"></textarea>
</p>

<p>
<button type="submit">Simpan Data</button>
<button type="button">Kosongkan Form</button>
</p>
</form>
</body>
</html>

3. Buka browser dan akses URL dengan mengakses URL
bagian akhir layar terdapat dua buah tombol yang satu bertipe
submit untuk mengeksekusi form dan yang satu bertipe reset untuk
mengosongkan form yang telah diisi.
Gambar 6.11

KD 6 Web and Mobile Programming HTML Form

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

KD 6 Web and Mobile Programming HTML Form

Diunggah oleh

Hak Cipta:

Format Tersedia

BAB 6

B. Membuat Form di HTML

Pemrograman Web dan Perangkat Bergerak :: Oya Suryana, M.Kom.

<form name=”nama_form” id=”id_form”

C. Membuat Komponen Input Form

<input type=”text” name=”nama_komponen”

Pemrograman Web dan Perangkat Bergerak :: Oya Suryana, M.Kom.

size : Untuk mengatur lebar dari komponen input,

Sebagai latihan silahkan buat aplikasi sederhana berikut :

Pemrograman Web dan Perangkat Bergerak :: Oya Suryana, M.Kom.

c. Jalankan dii browser dengan mengakses url :

Pemrograman Web dan Perangkat Bergerak :: Oya Suryana, M.Kom.

<p>Nama Lengkap <br/>

<p>Tempat Lahir <br/>

<p>Tanggal Lahir <br/>

Jalankan dii browser dengan mengakses url :

Pemrograman Web dan Perangkat Bergerak :: Oya Suryana, M.Kom.

Pemrograman Web dan Perangkat Bergerak :: Oya Suryana, M.Kom.

<p>Nama Lengkap <br/>

<p>Tempat Lahir <br/>

<p>Tanggal Lahir <br/>

<p>Alamat Email <br/>

Jalankan dii browser dengan mengakses url :

Pemrograman Web dan Perangkat Bergerak :: Oya Suryana, M.Kom.

Pemrograman Web dan Perangkat Bergerak :: Oya Suryana, M.Kom.

<p>Nama Lengkap <br/>

<p>Tempat Lahir <br/>

<p>Tanggal Lahir <br/>

<p>Alamat Email <br/>

3. Jalankan di browser dengan mengakses url :

Pemrograman Web dan Perangkat Bergerak :: Oya Suryana, M.Kom.

<p>Nama Lengkap <br/>

<p>Tempat Lahir <br/>

<p>Tanggal Lahir <br/>

Pemrograman Web dan Perangkat Bergerak :: Oya Suryana, M.Kom.

<p>Alamat Email <br/>

2. Jalankan kembali di browser dengan mengakses URL

Pemrograman Web dan Perangkat Bergerak :: Oya Suryana, M.Kom.

<p>Nama Lengkap <br/>

<p>Tempat Lahir <br/>

<p>Tanggal Lahir <br/>

Pemrograman Web dan Perangkat Bergerak :: Oya Suryana, M.Kom.

<p>Alamat Email <br/>

Pemrograman Web dan Perangkat Bergerak :: Oya Suryana, M.Kom.

<p>Nama Lengkap <br/>

<p>Tempat Lahir <br/>

<p>Tanggal Lahir <br/>

Pemrograman Web dan Perangkat Bergerak :: Oya Suryana, M.Kom.

<p>Penghasilan Orang Tua <br/>

3. Jalankan dengan mengakses url di browser

Pemrograman Web dan Perangkat Bergerak :: Oya Suryana, M.Kom.

Pemrograman Web dan Perangkat Bergerak :: Oya Suryana, M.Kom.

<p>Nama Lengkap <br/>

<p>Tempat Lahir <br/>

<p>Tanggal Lahir <br/>

Pemrograman Web dan Perangkat Bergerak :: Oya Suryana, M.Kom.

<p>Penghasilan Orang Tua <br/>

<p>Upload Photo <br/>

3. Akses halaman web dengan mengakses URL

Pemrograman Web dan Perangkat Bergerak :: Oya Suryana, M.Kom.

<p>Nama Lengkap <br/>

<p>Tempat Lahir <br/>

<p>Tanggal Lahir <br/>

Pemrograman Web dan Perangkat Bergerak :: Oya Suryana, M.Kom.