Membuat Form pada website dan penjelasan

Artikel sebelum nya telah memepelajari tentang memebuat contact form dengan tool online pada blog Baca disini  : Cara Membuat Contac Form ...

Artikel sebelum nya telah memepelajari tentang memebuat contact form dengan tool online pada blog Baca disini  : Cara Membuat Contac Form

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.

membuat contact form

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.



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

Postingan Terkait

0 komentar