Cara Membuat Form HTML

cara membuat form html
Share This:

Cara Membuat Form HTML

Asal Coding – Cara membuat form HTML, pada HTML sering kita jumpai beberapa FORM dari login register komentar dll. Form sangat penting pada pembuatan website.

Untuk Membuat Form kita menggunakan <tag> yaitu sesuai dengan namanya <form> </form>. untuk refernsi bisa klik di web W3School.

Membuat Form Sederhana

contoh membuat form sederhana, pada tutorial ini kita akan membuat form registrasi sederhana, langsung aja copy paste kode dibawah :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Belajar Membuat FORM</title>
</head>
<body>
<h3>Form Pendaftaran Member Asal Coding</h3>
<form>
Nama <br>
<input type="text" placeholder="Masukan Nama Anda"><br>
Password <br>
<input type="password" placeholder="Masukan Password"><br>
Jenis Kelamin <br>
<input type="radio" name="jk" value="Laki - Laki" checked> Laki- Laki<br>
<input type="radio" name="jk" value="Perempuan"> Perempuan<br>
Alamat <br>
<textarea cols="30" rows="10" placeholder="Masukan Alamat"></textarea> <br>
<input type="submit" name="Submit" value="Submit">
</form>
</body>
</html>
Cara Membuat Form HTML
Codingan Cara Membuat Form HTML

Setelah itu coba kita buka codingan di browser untuk melihat hasilnya.

Cara Membuat Form HTML
Preview Codingan Cara Membuat Form HTML

Pada codingan diatas terdiri dari beberapa inputan seperti dibawah, mari kita bedah codinganya secara detail.

<input type="text" placeholder="Masukan Nama Anda"

pada code diatas untuk membuat inputan Nama, yaitu menggunakan <input type=”text”> dan element placeholder untuk membuat tulisan abu-abu didalam inputan

<input type="password" placeholder="Masukan Password">

pada code diatas untuk membuat inputan password, agar tulisan yang kita inputkan tidak terlihat maka menggunakan <input type=”password”> sama dengan inputan nama kita tambahakan element placeholder untuk menambahkan tulisan abu-abu.

<input type="radio" name="jk" value="Laki - Laki" checked> Laki- Laki<br>
<input type="radio" name="jk" value="Perempuan"> Perempuan

pada code diatas untuk membuat inputan jenis kelamin, untuk inputan ini kita menggunakan <input type=”radio”> agar user tidak bisa memilih keduanya. pada inputan tersebut kita tambahkan element name untuk menjadikan atau grouping agar tidak bisa memilih keduanya, dan element checked untuk pilihan defaultnya, sedangkan value untuk isi ketika kita memilihnya.

<textarea cols="30" rows="10" placeholder="Masukan Alamat"></textarea>

pada code diatas untuk membuat inputan alamat, nah kita menggunakan <textarea></textarea> agar tulisan yang di inputkan bisa banyak dan terlihat lebar. sama dengan yang sebelumnya kita tambahkan element placeholder

.<input type=”submit” name=”Submit” value=”Submit”>

pada code diatas untuk membuat tombol submit, yaitu dengan .<input type=”submit”> nah kita tambahkan value untuk membuat tulisan pada tombolnya.

Jika hasilnya kurang rapi, kita bisa kombinasikan dengan memasukan Kedalam Table agar menjadikan inputan rapi. yang belum baca klik juga potingan Belajar Membuat Tabel HTML untuk penjelasnya ada di video youtube dibawah versi lengkapnya.

Video Penjelasan : https://youtu.be/ZnDPqlz-bHc

Nah, Mungkin cukup sekian postingan tentang Cara Membuat Form HTML jika ada yang kurang jelas silahkan tonton Video penjelasan yang lebih lengkapnya dan tanyakan pada kolom komentar. Terimakasih.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *