Membuat Form pada website dan penjelasan - Wavker Blog

Membuat Form pada website dan penjelasan

Artikel sebelum nya telah memepelajari tentang memebuat contact form dengan tool online pada blog Nah sekarang kita akan menerapkan for...

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.

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.



TypePenjelasan
ButtonUntuk membuat tombol dari kontrol input.
checkboxUntuk membuat checbox
colorUntuk membuat palet pilihan warna
dateUntuk input tanggal
date time-localUntuk input tanggal disertai waktu tanpa menggunakan zona waktu
emailuntuk input email
fileuntuk memilih file
hiddenuntuk menyembunyikan nilai input tertentu
monthUntuk input bulan dan tahun
numberuntuk menginputkan angka
passwordUntuk input sandi
radioUntuk membuat tombol
rangeinput angka dengan batasan nilai tertentu
resetMengosongkan nilai pada form
searchInput string pencarian
submitmengirimkan data form
imagemembuat tombol submit berbentuk gambar
telinput nomer telepon
textUntuk input teks
urlinput URL
weekInput angka minggu

Artikel Terkait

0 komentar

Histats

Disqus for wavker