Dalam sebuah website, dikenal yang namanya form. Sesuai uraian saya diatas, form ini berguna untuk mendapatkan informasi dari pengguna. Contoh, pada saat ingin login ke facebook, Anda mengisikan alamat email dan password pada kotak putih yang kemudian mengklik sebuah tombol berwarna biru. Ketiga elemen tersebut dikelompokkan dan dinamai “form login”.
Untuk membuat form pada sebuah halaman web, ketikkan script ini di file html Anda :
<html>
<head>
<title>Berugak IT Membuat FOrm</title>
</head>
<body>
<form>
<!-- Elemen yang ada pada form -->
</form>
</body>
</html>Dalam tag <form> sendiri, terdapat 2 atribut pokok yang sering digunakan, yaitu action dan method.
Atribut action berfungsi untuk mengirimkan data yang ada pada inputan ke sebuah script (biasanya PHP) yang kemudian akan diproses lebih lanjut. Berikut ini adalah contoh penulisan atribut action pada tag <form>.
<form action=”login.php” … >
<!-- Elemen yang ada pada form -->
</form>
Sedangkan method ialah metode atau cara yang digunakan dalam mengirimkan data ke action yang dituju. Atribut method hanya memiliki 2 value saja, yakni GET dan POST. Method GET, data yang dikirimkan akan nampak pada URL / Address bar. Sedangkan POST datanya tersembunyi. Berikut adalah cara menulis method pada <form>.
<form action=”login.php” method=”GET”>
<!-- Elemen yang ada pada form -->
</form>Pada form yang ada pada sebuah halaman web, terdapat berbagai elemen / objek yang memungkinkan pengguna dapat berinteraksi, diantaranya adalah :
1. input text
Elemen input text ini berfungsi untuk memungkinkan pengguna mengetikkan sesuatu yang panjangnya relatif pendek, misalnya nama, email, dan kata sandi. Untuk membuat input text, ketikkan script ini pada HTML Anda
<input type=’text’ name=’nama’ placeholder=’Nama’>2. Input Radio
Input radio fungsinya untuk menyuruh pengguna memilih salah satu dari beberapa opsi yang ada. Yang paling umum kita jumpai radio ini untuk memilih jenis kelamin dan memilih jawaban dari sebuah pertanyaan.
<input type=”radio” name=”gender” value=”pria”> Pria
<input type=”radio” name=”gender” value=”wanita”> Wanita
Penjelasan :
- Value : memberikan isi dari sebuah input secara default. Karena input radio hanya dapat di-klik, maka kita harus memberikan value-nya secara default. Atribut ini juga dapat diterapkan pada elemen input yang lain.
3. Input Checkbox
Fungsinya hampir sama seperti radio, yakni memilih opsi. Bedanya jika di radio user hanya bisa memilih satu opsi saja, kalau checkbox bisa lebih dari satu opsi. Biasanya, kita jumpai pada rules agreement
<input type=”checkbox”> I agree with Rules Agreement4.Input Date
Bentuknya hampir mirip dengan input text, namun data yang dapat dimasukkan melalui inputan ini hanya berupa format tanggal saja. Ketika input ini di-klik, maka muncul sebuah box semacam kalender yang disebut datepicker, fungsinya buat memudahkan user dalam memilih tanggal.
<input type=”date” name=”tanggal” placeholder=”Pilih tanggal”>5. Input Email
Sekilas tidak ada yang berbeda dengan input text, baik dari bentuknya maupun format inputannya. Meskipun formatnya sama, input ini mampu memfilter yang diketikkan pengguna itu adalah alamat email. Kalau bukan alamat email, maka form tidak mau action.
<input type=”email” name=”email” placeholder=”E-Mail”>6.Input Password
Masih berkutat di input yang jelas dari segi wujud tidaklah berbeda. Pada input password, bedanya dengan text hanya dari inputan yang tampil itu berupa bintang-bintang atau bulat-bulat. Ya karena biar kata sandi yang dimasukkan itu gak dilihat orang lain disekitarnya.
<input type=’password’ name=’katasandi’>
7.Input Number
Masih di input lagi. Yang membedakan input number ialah format masukannya yang hanya mengijinkan angka saja, selain itu tidak dibolehkan.
<input type=’number’ name=’angka’>
8. Textarea
Mirip seperti input box, tetapi textarea ini dipakai untuk menuliskan teks yang notabene value-nya lebih banyak dari input text. Biasanya, textarea dipakai buat menuliskan catatan yang bernilai banyak.
<textarea cols=”10” rows=”6” placeholder=”Alamat rumah”></textarea>Penjelasan :
- cols : menentukan panjang kesamping (lebar) dari textarea
- rows : menentukan panjwang kebawah (tinggi) dari textarea
9.Select
Elemen select fungsinya sama dengan input radio, namun bentuknya yang berbeda. Jika di radio munculnya terlihat sedikit berantakan, maka di elemen select ini terlihat lebih simpel, karena opsi-opsinya disembunyikan pada sebuah box dropdown.
<select name=”opsi”>
<option>Opsi Pertama</option>
<option>Opsi Kedua</option>
</select>Penjelasan :
- Tag option merupakan opsi-opsi yang akan ditampilkan pada dropdown select
10. Button
Dalam sebuah form, harus ada sebuah tombol yang ketiika diklik akan mengeksekusi inputan ke action yang dituju.
<button>Login</button>Jika elemen button ini ada di dalam <form>, maka dia akan mengeksekusi form sesuai dengan action-nya. Tapi kalau tidak mau seperti ini, bisa ditambah atribut type=”button” di dalam tag button.
<button type=”button”>Tombol biasa</button>type=”button” ini fungsinya untuk menandakan bahwa tombol ini bukanlah tombol submit, melainkan hanya sebuah tombol biasa.
Selain itu, Anda juga bisa membuat button dengan menggunakan tag seperti di bawah ini :
<input type="button" value="Daftar">
Untuk value nya itu adalah tulisan di dalam tombol yang Anda buat. Jika Anda mengisi value dengan tulisan “Daftar” maka tulisan di dalam button / tombol itu adalah “Daftar”.
11. Input Submit
Penulisan tag input submit ini adalah sebagai berikut :
<input type="submit" name="daftar" value="Daftar">
Latihan Membuat Form di HTML
<html>
<head>
<title>Berugak IT</title></title>
</head>
<body>
<h2>Berugak IT <hr></h2>
<form action=”mendaftar.php” method=”get”>
Nama : <input type=”text” name=”nama”></br>
Email : <input type=”email” name=”email”></br>
Password : <input type=”password” name=”password”></br>
Telepon : <input type=’number’ name=’telepon’></br>
Jenis kelamin :
<select name=’gender’>
<option value="L">Laki-laki</option>
<option value="P">Perempuan</option>
</select></br>
Alamat : <textarea cols=’12’ rows=’6’ name=’alamat’></textarea></br>
<input type="submit" name="daftar" value="Daftar">
</form>
</body>
</html>
Nah, tutorial cara membuat form pada HTML sudah selesai. Anda bisa memodifikasi form yang telah Anda buat dan apabila ada kesulitan bisa ditanyakan di kolom komentar.
Mantap
Berugak IT keren