Tutorial Belajar HTML 17 : Mengenal Form pada HTML

Mengenal Form pada HTML – Penggunaan form ini tentunya sangat banyak manfaatnya, contohnya seperti form registrasi pada sebuah website, login, biodata dan lain sebagainya. Dan yang jelas elemen yang digunakan pun pasti berbeda – beda. Pada materi kali ini kita hanya akan belajar bagaimana pembuatan form itu sendiri, dan tentang bagaimana data pada form tersebut di proses itu akan kita bahas pada materi pemrograman php.

Membuat Form dengan HTML

Form itu sendiri adalah elemen dari html yang bisa digunakan untuk menginputkan baik itu berupa teks, nomor ataupun yang lainnya. Termasuk di dalamnya adalah ada chekbox, radio button, tombol submit dan lain – lain.

Elemen yang digunakan

Adapun elemen yang digunakan untuk membuat sebuah form adalah kita butuh yang namanya tag <input>. Sebelumnya, untuk membuat sebuah form adalah dengan memulai dengan tag <form> pembuka dan tag form penutup </form>. Nah, elemen input ini memiliki tipe yang berbeda – beda sesuai dengan kebutuhan kita. Tipe ini adalah atribut wajib saat akan digunakan dalam form, berikut ini adalah jenis type yang sering digunakan

Type=’text’

Tipe ini akan menghasilkan berupa textfield. Contohnya sering kita jumpai saat kita menggunakan login gmail, facebook dan lainnya. Yaitu berupa field kosong yang akan kita isi dengan teks. Coba tampilkan hasil dari baris kode berikut ini di browser kalian

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Latihan HTML</title>
</head>
<body>
 <form>
  Nama : <input type="text">
 </form>
</body>
</html>

Type=’radio’

Tipe ini sering digunakan untuk sebuah pilihan, contohnya pilihan jenis kelamin dan lain – lain. Coba tuliskan baris kode berikut ini di teks editor kalian lalu tampilkan hasilnya di browser

Jenis kelamin : <input type="radio"> Laki - Laki <input type="radio"> Perempuan

Type=’password’

Sudah paham ya, ini sama persis dengan type text hanya saja jika kita mengetikan teks di dalam field yang bertipe password ini, teks yang kita ketikan akan berubah menjadi bintang (****) atau berupa bulatan – bulatan kecil. Coba praktekan contoh baris kode type password berikut ini

Kata Sandi : <input type="password">

Type=’submit’

Tipe yang satu ini adalah berupa tombol untuk mengirimkan data yang sudah kita inputkan pada field yang diatas agar segera di proses. Tetapi untuk actionnya belum bisa di bahas pada materi ini, karena beda pembahasan dan mungkin akan di bahas pada materi tentang php.

<input type="submit">

Sekarang, coba gabungkan semua baris kode dari awal dan tampilkan hasilnya. Hasilnya akan seperti gambar di bawah ini

Sekian materi kali ini tentang membuat form pada html dan jangan lupa untuk selalu support blog ini dengan cara membagikan tulisan ini ke sosial media kalian. Seperti biasa jika ada poin yang belum dipahami, silahkan tinggalkan pertanyaan kalian di kolom komentar di bawah ini dan sampai jumpa pada materi berikutnya.

Web Design Purbalingga