HTML : MEMBUAT FORM MUDAH & SIMPEL
Membuat Form Biodata Siswa di HTML
Penjelasan
Selamat pagi, siang, malam! Disini aku ingin berbagi sedikit tips & tutorial bagaimana cara membuat form menggunakan HTML!
Nah, bagaimana caranya agar kita dapat membuat form di HTML yang work? Disini aku akan menjelaskan beberapa hal yang perlu dipahami agar kita bisa membuat form, di simak ya penjelasanku. đ
Cara Membuat Form di HTML
Kita bisa membuat form di HTML menggunakan tag '<form>'.
Tag ini memiliki atribut yang harus diberikan, contohnya :
- 'action' untuk menentukan aksi yang akan dilakukan saat data dikirim.
- 'method' metode pengiriman data.
Contohnya begini :
<form action="contact.php" method="POST">
Atribut 'action', dapat kita isi dengan alamat URL dari endpoint yang akan memproses form. Singkatnya kita menyuruh file 'contact.php' untuk memproses data form.
Field adalah ruas yg dapat diisi dengan data.
Contoh field :
<input type="text" name="nama" />
Field memiliki atribut yg harus diberikan :
- 'type' merupakan type/value/atribut dari field.
- 'name' merupakan nama field yang akan menjadi kunci & variabel di dalam program.
Setelah memahami tentang atribut & field, sekarang kita mulai coding nya. Saya sudah membuat codingan form biodata siswa.
Berikut codingnya :
<!DOCTYPE html>
<html>
<head>
<title>Membuat Form di HTML</title>
</head>
<body>
<form action="contact.php" method="POST">
<fieldset>
<legend><h1>Biodata Siswa</h1></legend>
<p>
<label>Email :</label>
<input type="email" name="email" placeholder="Masukkan Email..."/>
</p>
<p>
<label>Nama Lengkap :</label>
<input type="text" name="nama" placeholder="Nama lengkap..." />
</p>
<p>
<label>Jenis Kelamin :</label>
<label><input type="radio" name="jenis_kelamin" value="laki-laki" /> Laki-Laki</label>
<label><input type="radio" name="jenis_kelamin" value="perempuan" /> Perempuan</label>
</p>
<p>
<label>Kelas :</label>
<select name="kelas">
<option value="x">X</option>
<option value="xi">XI</option>
<option value="xii">XII</option>
</select>
</p>
<p>
<label>Jurusan :</label>
<select name="jurusan">
<option value="sija">SIJA</option>
<option value="tkj">TKJ</option>
<option value="rpl">RPL</option>
<option value="mm">MM</option>
</select>
</p>
<p>
<label>Tanggal Lahir :</label>
<input type="date" name="tgl_lahir" />
</select>
</p>
<p>
<label>Biografi singkat :</label>
<textarea name="biografi"> </textarea>
</p>
<p>
<input type="submit" name="submit" value="Submit" />
</p>
</fieldset>
</form>
</body>
</html>
Diatas, aku membuat tujuh buah field :
- input 'email' dengan tipe 'email';
- input 'nama lengkap' dengan tipe 'text';
- input 'jenis kelamin' dengan tipe 'radio';
- input 'tanggal lahir' dengan tipe 'date';
- input 'biografi' dengan tipe '<textarea>';
- input 'kelas' & 'jurusan' dengan tipe '<select><option>';
- input 'submit' dengan tipe 'submit';
Lalu ketujuh field itu dibungkus ke dalam tag '<fieldset>'.
Di dalam tag '<fieldset>', kita membuat tag '<legend>' untuk memberikan teks pada fieldset.
Setiap field kita masukkan dalam tag '<p>' agar terlihat rapi.
Maka, dengan codingan tersebut kita akan mendapatkan hasil seperti di bawah ini.
Hasil coding :
Baik, sekian penjelasanku mengenai bagaimana cara membuat form di HTML. Saya mengambil form biodata siswa sebagai contoh codingannya, jika ada yang kurang dipahami silakan memberikan komentar dibawah.
Semoga ilmu ini bermanfaat untuk kalian, terima kasih.
See you next time!
Referensi/Source :
https://www.petanikode.com/html-form/ Belajar HTML #11: Cara Membuat Form pada HTML.
https://www.w3schools.com/tags/att_input_type.asp HTML <input> type Attribute.
ABOUT THE AUTHOR
Hello We are OddThemes, Our name came from the fact that we are UNIQUE. We specialize in designing premium looking fully customizable highly responsive blogger templates. We at OddThemes do carry a philosophy that: Nothing Is Impossible
