Scribd
Unggah
27 tayangan14 halaman

Praktik Formulir (Form) HTML

Dokumen ini menjelaskan berbagai jenis formulir dalam HTML, termasuk tipe teks, textarea, select, checkbox, radio, password, serta tombol submit dan reset. Setiap jenis formulir disertai dengan contoh kode HTML dan penjelasan fungsinya. Tujuan dari dokumen ini adalah untuk memberikan pemahaman tentang cara membuat dan menggunakan formulir dalam pengembangan web.

Diunggah oleh

Amelia Putri Rahayu
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
27 tayangan14 halaman

Praktik Formulir (Form) HTML

Dokumen ini menjelaskan berbagai jenis formulir dalam HTML, termasuk tipe teks, textarea, select, checkbox, radio, password, serta tombol submit dan reset. Setiap jenis formulir disertai dengan contoh kode HTML dan penjelasan fungsinya. Tujuan dari dokumen ini adalah untuk memberikan pemahaman tentang cara membuat dan menggunakan formulir dalam pengembangan web.

Diunggah oleh

Amelia Putri Rahayu
Hak Cipta
© © All Rights Reserved
Kami menangani hak cipta konten dengan serius. Jika Anda merasa konten ini milik Anda, ajukan klaim di sini.
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 14

FORM 2

BTIK
KELAS XII SEMESTER GENAP

SMA NEGERI 5 CIMAHI


Membuat Formulir
Tipe Teks
CONTOH PROGRAM TIPE TEXT DAN TAMPILANNYA
<html>
<head> <title>Formulir</title> </head>
<body>
<form action = "info.html" method = "post">
Nama : <input type="text" name="Nama_siswa"
size="20" maxlength="20"> <br>
<br>Hobby : <input type="text" name="hobby"
size="25" maxlength="40"> <br>
</form>
</body>
</html>
Tipe Textarea
• Text area biasanya digunakan untuk jenis masukan yang jumlah
karakternya banyak.
• Tag yang digunakan adalah pasangan tag <textarea> dan
</textarea> .
• Textarea bisa mencakup banyak baris.

CONTOH PROGRAM TIPE TEXTAREA DAN TAMPILANNYA


<html>
<head> <title>textarea</title> </head>
<body>
<form> Catatan :<br>
<textarea name = "catatan" rows = "5" cols = "40" >Menurut
Saya: </textarea>
</form>
</body>
</html>
PENGGUNAAN SELECT PADA FORMULIR

• Untuk menentukan pilihan dengan cara memilih sendiri


terhadap yang ditampilkan pada daftar tertentu dapat dibuat
dengan menggunakan pasangan tag <select> dan </select>,
istilah lain dari select adalah kotak kombo (drop-down) atau
daftar pilihan.
Contoh Tipe Select Dan
Tampilannya
<html>
<head> <title>textarea</title> </head>
<body>
<form> Makanan yang paling saya suka:<br>
<select name = "Makanan">
<option value = "Sate">Sate
<option value = "soto">Soto
<option value = "martabak">Martabak
<option value = "seblak">Seblak
</select>
</form>
</body>
</html>
TIPE CHECKBOX
• Memilih sebuah informasi dengan cara mengklik kotak
tertentu dan selanjutnya terdapat karakter khusus yang
menandai kotak tersebut, pada formulir inilah yang
dinamakan tipe checkbox. Karakter tersebut umumnya
berbentuk tanda checklist/centang.
CONTOH PROGRAM TIPE
CHECKBOX DAN TAMPILANNYA
<html>
<head> <title>checkbox</title> </head>
<body>
<form> Sayur kesukaan saya:<br>
<input type = "checkbox" name = "bayam" >Bayam<br>
<input type = "checkbox" name = "kol" >Kol<br>
<input type = "checkbox" name = "Sawi" >Sawi<br>
<input type = "checkbox" name = "wortel" >Wortel<br>
</form>
</body>
</html>
TIPE RADIO
• Tipe radio umumnya sama penggunaannya dengan checkbox.
Hanya saja kalau checkbox berbentuk kotak dan tandanya
berupa karakter centang, sedangkan pada tipe radio
berbentuk lingkaran dengan ditandai karakter titik berwarna
hitam apabila kita telah memilihnya.
Contoh Program Tipe Radio
dan Tampilannya
<html>
<head> <title>radio</title> </head>
<body>
<form> Jenis kelamin:<br>
<input type = "radio" Name = "sex" checked>pria<br>
<input type = "radio" Name = "sex">wanita<br> <br>
<br> Agama :<br>
<input type = "radio" Name = "agama" value "i">islam<br>
<input type = "radio" Name = "agama" value "k">kristen<br>
<input type = "radio" Name = "agama" value "t">katolik<br>
<input type = "radio" Name = "agama" value "b">budha<br>
<input type = "radio" Name = "agama" value "h">hindu<br>
<input type = "radio" Name = "agama" value
"l">lainnya<br><br>
</form>
</body> </html>
TIPE PASSWORD
• Password merupakan kata sandi yang digunakan untuk
membuka atau mengakses suatu informasi.
• Password umumnya merupakan karakter baik itu angka
maupun huruf. Cara memasukkan password biasanya telah
disediakan area khusus dan karakter yang dituliskan tidak
terlihat seperti kata aslinya.
• Karakter yang telah dimasukkan tersebut umumnya
diterjemahkan dalam kode tertentu dan yang sering dijumpai
berbentuk karakter " * ".
Contoh Program Tipe Password
dan Tampilannya
<html>
<head> <title>password</title> </head>
<body>
<form>
Nama User : <input type = "text" name = "Nama" size =
"20" maxlength = "20"> <br>
Password : <input type = "password" name =
"kata_kunci" size="8" maxlength="8"> <br>
<input type = submit value = Kirim>
<input type = reset value = Clear>
</form>
</body>
</html>
Contoh Program
Tipe Submit dan Reset
<html>
<head> <title>formulir</title> </head>
<body>
<form action = "info.html" method = "post">
<input type = "submit" value = "Kirim">
<input type = "reset" value = "Hapus">
</form>
</head>
</html>
Ayo praktikkan materi form
yang telah dipelajari!
TERIMA KASIH

Anda mungkin juga menyukai