Artikel sebelum nya telah memepelajari tentang memebuat contact form dengan tool online pada blog
Nah sekarang kita akan menerapkan form pada website dan penjelasan nya, fungsinya biar agan tau setiap arti dari kode HTML nya, Tapi taukah apa itu Form ? Form adalah bagian tertentu di halaman website kita yang berisi kontrol interaktif untuk mengirimkan informasi ke web server.
Nah berikut contoh kode untuk membuat form :
<!DOCTYPE html>
<html>
<head>
<title>Hubungi Kami</title>
</head>
<body>
<!--Form Pertama-->
<h3>Pendaftaran</h3>
<form name="pendaftaran" action="proses.php" method="get">
<!-- contoh label dengan atribut -->
<label for="labelnama">Nama:</label>
<input type="text" id="labelnama" name="nama"placeholder="NamaAnda">
<br><br>
<!-- Contoh label tanpa atribut -->
<label>Pesan:
<textarea name="pesan" rows="5"cols="30"></textarea></label>
<br><br>
<label for="labellokasi">lokasi:</label>
<select id="labellokasi" name="lokasi">
<option value="jakarta"></option>
<option value="surabaya" selected>Surabaya</option>
<option value="yogyakarta">yogyakarta</option>
</select>
<br><br>
<label>Gender:
<input list="gender">
<datalist id="gender">
<option value="pria">
<option value="wanita">
</datalist>
</label>
<br><br>
<label>Foto:
<input type="file" name="foto">
</label>
<br><br>
<fieldset>
<legend>profil</legend>
Lulusan:
<input type="radio" name="lulusan" value="sma"> SMA
<input type="radio" name="lulusan" value="D3"> D3
<input type="radio" name="lulusan" value="S1"> S1
<br><br>
Minat:
<input type="checkbox" name"minat1" value="olahraga">olahraga
<input type="checkbox" name="minat2" value="teknologi"> Teknologi
</fieldset>
<br><br>
<input type="hidden" name="negara" value="indonesia">
<input type="reset" value="Hapus">
<button type="submit">Kirim</button>
</form>
<hr>
<!-- Form Kedua -->
<h3>Kalkulator</h3>
<form name="kalkulator" oniput="hasil.value=parseInt(a.value)+parseInt (b.value)">
<input type="number" name"a" value="0"> +
<input type="number" name="b" value="0"> =
<output name="hasil"></output>
<br><br>
<input type="reset" value="Kosongkan">
</form>
</body>
</html>
Pada Contoh kita membuat 2 macam form di satu halaman. Form pertama adalah Form Pendaftaran dan form kedua form kalkulator.
Tag :
<form> : Penjelasan Untuk menandai elemen form di halaman. Atribut name untuk membedakan form satu dengan lain nya di halaman yang sama. Jika Form dikirim datanya, Maka lokasi file berisi Script untuk memproses form ditetapkan dengan atribut action.
<label> : Penjelasan memberi keterangan pada sebuah kontrol di form. Atribut form untuk merujuk atribut id pada kontrol nya jika tidak disertai atribut for maka penutup </label> di tempatkan di akhir elemen kontrol untuk merangkai label dan kontrolnya.
<input> : Penjelasan nya untuk membuat kontrol kotak isian, Atribut name dipakai untuk prmrosesan data di isian.
Atribut id diperlukan jika label nya di beri atribut for, Atribut type untuk menetapkan jenis kontrol input . Jenis type yang biasanya diapakai yaitu text, email, password. Jenis kegunaan masing 2 type dapat agan lihat di penjelasan selanjut nya.
<textarea> : Penjelasan membuat kontrol kotak isian pada teks dalam beberapa baris, Atribut name dipakai untuk pemrosesan data teks.
<select> : Penjelasan nya memebuat menu dropdown berisi pilihan pilihan, Atribut name dipakai untuk pemrosesan data yang terpilih, Item yang pilihan dibuat dengan tag <option> dan bisa di kelomppokan dengan <optgroup>
<option> : Untuk membuat kontrol item pilihan, Atribut value dipakai untuk menyebutkan nilai datanya, Atribut selected bisa dipakai untuk menetapkan salah satu item <option> sebagai pilihan default.
<optgroup> : Untuk mengelompokkan pilihan di kontrol <option>
<datalist> : Membuat daftar saran teks isian, berbentuk elemen option yang bisa ditempatkan pada elemen input.
<fieldset> mengelompokan sejumlah kontrol form.
<legend> : Untuk memberikan judul atau keterangan pada kontrol <fieldset>.
<button> : Membbuat tombol tag <button> bisa dipakai di luar form, Jika digunakan dalam form maka tag <button> disertai atribut type untuk menentukan fungsinya, tag <button> dapat memberi atribut formaction untuk menimpa atribut action di tag <form>
<output> : Untuk menampilkan hasil perhitungan di form.
<form> : Penjelasan Untuk menandai elemen form di halaman. Atribut name untuk membedakan form satu dengan lain nya di halaman yang sama. Jika Form dikirim datanya, Maka lokasi file berisi Script untuk memproses form ditetapkan dengan atribut action.
<label> : Penjelasan memberi keterangan pada sebuah kontrol di form. Atribut form untuk merujuk atribut id pada kontrol nya jika tidak disertai atribut for maka penutup </label> di tempatkan di akhir elemen kontrol untuk merangkai label dan kontrolnya.
<input> : Penjelasan nya untuk membuat kontrol kotak isian, Atribut name dipakai untuk prmrosesan data di isian.
Atribut id diperlukan jika label nya di beri atribut for, Atribut type untuk menetapkan jenis kontrol input . Jenis type yang biasanya diapakai yaitu text, email, password. Jenis kegunaan masing 2 type dapat agan lihat di penjelasan selanjut nya.
<textarea> : Penjelasan membuat kontrol kotak isian pada teks dalam beberapa baris, Atribut name dipakai untuk pemrosesan data teks.
<select> : Penjelasan nya memebuat menu dropdown berisi pilihan pilihan, Atribut name dipakai untuk pemrosesan data yang terpilih, Item yang pilihan dibuat dengan tag <option> dan bisa di kelomppokan dengan <optgroup>
<option> : Untuk membuat kontrol item pilihan, Atribut value dipakai untuk menyebutkan nilai datanya, Atribut selected bisa dipakai untuk menetapkan salah satu item <option> sebagai pilihan default.
<optgroup> : Untuk mengelompokkan pilihan di kontrol <option>
<datalist> : Membuat daftar saran teks isian, berbentuk elemen option yang bisa ditempatkan pada elemen input.
<fieldset> mengelompokan sejumlah kontrol form.
<legend> : Untuk memberikan judul atau keterangan pada kontrol <fieldset>.
<button> : Membbuat tombol tag <button> bisa dipakai di luar form, Jika digunakan dalam form maka tag <button> disertai atribut type untuk menentukan fungsinya, tag <button> dapat memberi atribut formaction untuk menimpa atribut action di tag <form>
<output> : Untuk menampilkan hasil perhitungan di form.
| Type | Penjelasan |
| Button | Untuk membuat tombol dari kontrol input. |
| checkbox | Untuk membuat checbox |
| color | Untuk membuat palet pilihan warna |
| date | Untuk input tanggal |
| date time-local | Untuk input tanggal disertai waktu tanpa menggunakan zona waktu |
| untuk input email | |
| file | untuk memilih file |
| hidden | untuk menyembunyikan nilai input tertentu |
| month | Untuk input bulan dan tahun |
| number | untuk menginputkan angka |
| password | Untuk input sandi |
| radio | Untuk membuat tombol |
| range | input angka dengan batasan nilai tertentu |
| reset | Mengosongkan nilai pada form |
| search | Input string pencarian |
| submit | mengirimkan data form |
| image | membuat tombol submit berbentuk gambar |
| tel | input nomer telepon |
| text | Untuk input teks |
| url | input URL |
| week | Input angka minggu |
0 komentar