Scribd
Unggah
44 tayangan

KD 6 Web and Mobile Programming HTML Form

Form di HTML digunakan untuk menampung data isian yang akan diproses lebih lanjut. Terdiri dari tag pembuka dan penutup form, serta berbagai komponen input seperti teks, tanggal, email, dan sandi. Contoh form pendataan siswa baru mendemonstrasikan penggunaan berbagai komponen input tersebut.

Diunggah oleh

Ridwan Zulfahmi
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
44 tayangan

KD 6 Web and Mobile Programming HTML Form

Form di HTML digunakan untuk menampung data isian yang akan diproses lebih lanjut. Terdiri dari tag pembuka dan penutup form, serta berbagai komponen input seperti teks, tanggal, email, dan sandi. Contoh form pendataan siswa baru mendemonstrasikan penggunaan berbagai komponen input tersebut.

Diunggah oleh

Ridwan Zulfahmi
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 27

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”/>

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


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/>

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


<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>

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


<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>

<p>Nama Lengkap <br/>


<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 :


http://localhost/form/FormPendataan.php

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


Gambar 6.3

c. Input Email
Komponen input berikutnya adalah komponen untuk menerima data
dengan masukan email, dimana email memiliki format
[email protected]
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>

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


</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>

<p>Nama Lengkap <br/>


<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"
autofocus required/></p>

<p>Tanggal Lahir <br/>


<input type="date" name="txtTanggal"
id="txtTanggal" required/>
</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 :


http://localhost/form/FormPendataan.php

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


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>
<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/>

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


<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"
autofocus required/></p>

<p>Tempat Lahir <br/>


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

<p>Tanggal Lahir <br/>


<input type="date" name="txtTanggal"
id="txtTanggal" required/>
</p>

<p>Alamat Email <br/>


<input type="email" name="txtEmail"
id="txtEmail" size="30" autocomplete="off"
placeholder="Masukan Email Anda"
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 :


http://localhost/form/FormPendataan.php

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

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


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
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>

<p>Nama Lengkap <br/>


<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" autofocus
required/></p>

<p>Tanggal Lahir <br/>


<input type="date" name="txtTanggal"
id="txtTanggal" required/>
</p>

<p>

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


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

<p>Alamat Email <br/>


<input type="email" name="txtEmail"
id="txtEmail" size="30" autocomplete="off"
placeholder="Masukan Email Anda"
autofocus required/></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 :

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


1. Buka kembali file FormPendataan.php dan edit dengan
menambahkan bagian yang dicetak tebal.
2. Tambahkan script yang dicetak tebal sehingga menjadi berikut :

<!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" required/>
</p>

<p>Nama Lengkap <br/>


<input type="text" name="txtNAMA"
id="txtNAMA" size="30" autocomplete="off"
placeholder="Masukan Nama Anda"
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>

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

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


<p>
Hobi <br/>
<input type="checkbox" value="A">Tarveling
<input type="checkbox" value="B">Otomotif
<input type="checkbox" value="C">Berkebun
</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>

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 :

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


1. Buka kembali file FormPendataan.php dan edit dengan
menambahkan bagian yang dicetak tebal.
2. Tambahkan script yang dicetak tebal sehingga menjadi berikut
(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>

<p>Nama Lengkap <br/>


<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>

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

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


<p>
Hobi <br/>
<input type="checkbox" value="A">Tarveling
<input type="checkbox" value="B">Otomotif
<input type="checkbox" value="C">Berkebun
</p>
<p>Alamat Email <br/>
<input type="email" name="txtEmail"
id="txtEmail" size="30" autocomplete="off"
placeholder="Masukan Email Anda" required/></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


http://localhost/form/FormPendataan.php, perhatikan pada
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

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


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 :
1. Buka kembali file FormPendataan.php dan edit dengan
menambahkan bagian yang dicetak tebal.
2. Tambahkan script yang dicetak tebal sehingga menjadi berikut
(bagian yang dicetak tebal) :

<!DOCTYPE html>
<html lang="en">

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


<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>

<p>Nama Lengkap <br/>


<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>

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

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

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


<input type="email" name="txtEmail"
id="txtEmail" size="30" autocomplete="off"
placeholder="Masukan Email Anda" required/></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>

<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

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


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 :
1. Buka kembali file FormPendataan.php dan edit dengan
menambahkan bagian yang dicetak tebal.
2. Tambahkan script yang dicetak tebal sehingga menjadi berikut
(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>

<p>Nama Lengkap <br/>


<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/>

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


<input type="date" name="txtTanggal"
id="txtTanggal" required/>
</p>

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

<p>
Hobi <br/>
<input type="checkbox" value="A">Tarveling
<input type="checkbox" value="B">Otomotif
<input type="checkbox" value="C">Berkebun
</p>
<p>Alamat Email <br/>
<input type="email" name="txtEmail"
id="txtEmail" size="30" autocomplete="off"
placeholder="Masukan Email Anda" required/></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>

<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>

4. Jalankan dengan mengakses url di browser


http://localhost/form/FormPendataan.php, perhatikan pada

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


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 :
1. Buka kembali file FormPendataan.php dan edit dengan
menambahkan bagian yang dicetak tebal.
2. Tambahkan script yang dicetak tebal sehingga menjadi berikut
(bagian yang dicetak tebal) :

<!DOCTYPE html>
<html lang="en">

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


<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>

<p>Nama Lengkap <br/>


<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>

<p>
Jenis Kelamin <br/>
<input type="radio" value="L">Laki-laki
<input type="radio" value="P">Perempuan
</p>
<p>
Hobi <br/>
<input type="checkbox" value="A">Tarveling
<input type="checkbox" value="B">Otomotif
<input type="checkbox" value="C">Berkebun
</p>
<p>Alamat Email <br/>

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


<input type="email" name="txtEmail"
id="txtEmail" size="30" autocomplete="off"
placeholder="Masukan Email Anda" required/></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>

<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>

<p>Alamat Lengkap<br/>
<textarea name="txtAlamat" id="txtAlamat"
rows="5" cols="40"></textarea>
</p>

<p>Upload Photo <br/>


<input type="file" name="txtPhoto"
id="txtPhoto" required/></p>

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

3. Jalankan dengan mengakses url di browser


http://localhost/form/FormPendataan.php, perhatikan pada
bagian akhir layar terdapat kotak isian yang cukup lebar dan bisa
menampug lebih dari satu baris input.

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


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 :
1. Buka kembali file FormPendataan.php dan edit dengan
menambahkan bagian yang dicetak tebal.
2. Tambahkan script yang dicetak tebal sehingga menjadi berikut
(bagian yang dicetak tebal) :

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


<!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>

<p>Nama Lengkap <br/>


<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>

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

<p>
Hobi <br/>
<input type="checkbox" value="A">Tarveling

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


<input type="checkbox" value="B">Otomotif
<input type="checkbox" value="C">Berkebun
</p>
<p>Alamat Email <br/>
<input type="email" name="txtEmail"
id="txtEmail" size="30" autocomplete="off"
placeholder="Masukan Email Anda" required/></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>

<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>

<p>Alamat Lengkap<br/>
<textarea name="txtAlamat" id="txtAlamat"
rows="5" cols="40"></textarea>
</p>

<p>Upload Photo <br/>


<input type="file" name="txtPhoto"
id="txtPhoto" required/></p>

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

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

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


3. Buka browser dan akses URL dengan mengakses URL
http://localhost/form/FormPendataan.php, perhatikan pada
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

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

Anda mungkin juga menyukai