Beranda
Programming

HTML Forms, HTML Form Attributes, HTML Form Elements, HTML Input Types dan HTML Input Attributes || BLC Telkom Klaten

5 min read


 

A. PENDAHULUAN
    a. Pengertian

    Formulir, dari bahasa Belanda, formulier, adalah sebuah kertas yang berisi beberapa pertanyaan formal yang harus diisi. sedangkan pada HTML Form adalah bagian pada HTML yang dapat digunakan untuk membuat elemen Form pada halaman Web.


    b. Latar Belakang Masalah

    Form sangat dibutuhkan dalam sebuah website, karena form berfungsi sebagai tempat data sebelum diproses oleh sistem, tanpa form, kita tidak akan bisa input data, karena kita tidak memiliki wadah untuk menempatkan apa yang ingin kita input.


B. MAKSUD DAN TUJUAN

    Dapat mengetahui dengan jelas apa yang dimaksud dan dapat menerapkannya jika ingin membuat website yang ada tempat untuk menginput datanya

 
C. BATASAN DAN RUANG LINGKUP PEKERJAAN

    W3Schools

  • HTML Forms
  • HTML Forms Attributes
  • HTML Forms Elements
  • HTML Input Types
  • HTML Input Attributes

 

D. TARGET DAN HASIL YANG DIHARAPKAN

     Dapat menggunakan form dalam pembuatan website.


E. METODE PELAKSANAAN

  • Membaca
  • Memahami
  • Latihan Tryit Yourself

 

F. ALAT DAN BAHAN

  • Laptop
  • Internet
  • Visual Studio Code

 

G. TARGET WAKTU

    8 Jam (08.00-16.00 WIB)


H. TAHAPAN PELAKSANAAN

     

HTML Forms


 

  • Text Fields

    <input type="text"> Mendefinisikan bidang input satu baris untuk input teks.

    Tag <label> mendefinisikan label untuk banyak elemen bentuk. Bahkan berguna membantu pengguna yang mengalami kesulitan mengklik wilayah yang sangat kecil (seperti tombol radio atau kotak centang) - karena ketika pengguna mengklik teks di dalam element <label>, itu akan mengaktifkan tombol radio/kotak centang.

Contohnya sebagai berikut :

<body>
<form>
<label for="namaawal">Nama Depan</label><br>
<input type="text" name="namaawal" id="namaawal" value="Adib"><br>
<label for="namaakhir">Nama Belakang</label><br>
<input type="text" name="namaakhir" id="namaakhir" value="Ganteng">
</form>
</body>

Hasil Outputnya akan seperti ini

  • Radio Buttons

    Buttons Radio didefinisikan sebagai <input type="radio">

Contohnya sebagai berikut :

<form>
<input type="radio" name="arema" id="adib" value="namaawal">
<label for="arema">Arema FC</label><br>
<input type="radio" name="persebaya" id="rohim" value="namaakhir">
<label for="persebaya">Persebaya</label><br>
</form>

Hasil Outputnya akan seperti ini :


  •  Checkbox
    Checkbox didefinisikan sebagai <input type="checkbox">

Contohnya sebagai berikut :

<form>
<input type="checkbox" name="arema" id="adib" value="namaawal">
<label for="arema">Arema FC</label><br>
<input type="checkbox" name="persebaya" id="rohim" value="namaakhir">
<label for="persebaya">Persebaya</label><br>
</form>

Outputnya :

     

HTML Form Attributes

  • Attributes Action

    Atribut action mendefinisikan tindakan yang akan dilakukan ketika formulir dikirimkan.

Contoh codingannya :

<form action="/action_page.php">
  • Attributes Target

    Atribut target menentukan tempat untuk menampilkan respons yang diterima setelah mengirimkan formulir.

    target="_self" - Membuka dokumen di jendela/tab yang sama dengan di klik

    target="_blank" - Membuka dokumen di jendela atau tab baru

    target="_parent" - Membuka dokumen di jendela atau tab baru 

    target="_top" - Membuka dokumen di seluruh badan jendela

  • Attributes Method 

    Atribut method menentukan metode HTTP yang akan digunakan saat mengirimkan data formulir. 

    Data formulir dapat dikirim sebagai variabel URL (dengan method="get") atau sebagai transaksi posting HTTP (dengan method="post")

Contoh dengan metode "GET".

<form action="belajar.html" method="GET">

Outputnya data formulir yang dikirimkan terlihat di URL 

 

HTML Form Elements

  • Element <select>

    Elemen <select> mendefinisikan daftar drop-down

    Elemen <option> mendefinisikan opsi yang dapat dipilih

    Gunakan size atribut untuk menentukan jumlah nilai yang terlihat :

Contoh nya sebagai berikut :

<form>
<label for="coba">Pilih Salah Satu</label>
<select name="coba" id="coba" size="2" multiple>
<option value="SD">SD</option>
<option value="SMP">SMP</option>
<option value="SMA" selected>SMA</option>
<option value="Kuliah">Kuliah</option>
<option value="Pekerjaan">Pekerjaan</option>
</select>
</form>

Output nya :

  • Element <fieldset> dan <legend>

    Elemen <fieldset> digunakan untuk mengelompokkan data terkait dalam suatu formulir. 

    Elemen <legend> mendefinisikan keterangan untuk <fieldset> elemen. 

Contoh codingannya sebagai berikut :

<form>
<fieldset>
<legend>Biodata</legend>
<label for="namadepan">Nama :</label><br>
<input type="text" id="namadepan" name="namadepan" value="ADIB"><br>
<label for="alamat">Alamat :</label><br>
<input type="text" id="alamat" name="alamat" value="Weleri"><br><br>
</fieldset>
</form>

Outputnya :

I. TEMUAN PERMASALAHAN DAN PENYELESAIANNYA

    Pada saat element <fieldset> hasil yang di browser tidak muncul

    Penyelesaian :

    Kurang memberi (/) pada penutup element


J. KESIMPULAN

    Jadi, Form merupakan bagian pada HTML yang dapat digunakan untuk membuat elemen Form pada halaman Web. Bahkan berfungsi sebagai tempat data sebelum diproses oleh sistem, tanpa form, kita tidak akan bisa input data, karena kita tidak memiliki wadah untuk menempatkan apa yang ingin kita input.


K. REFERENSI


Anda mungkin menyukai postingan ini

Posting Komentar