Selamat pagi gan, :)
Sebelumnya ane mau tanya, Sudah pernah menggunakan atau bermain dengan HTML gak nih?
Kalau sudah ya Alhamdulillah, kalau belum ane mau berbagi ilmu html.
bagi yang sudah mengenal mari kita mengingat ulang hitung-hitung untuk menambah ilmu, dan mengulas kembali ilmu html kita. :)
Disini saya akan mencoba membuat Form Registrasi,
seperti tampilan dibawah ini gan..
Pertama kita buka Notepad++, atau editor lain,
<!DOCTYPE html> <!-- Tag pertama ciri-ciri HTML5 -->
<html> <!-- Tag Dasar dalam HTML, untuk memulai atau membuka kode HTML -->
<head> <!-- Tag Awal pembuka 'Head' HTML -->
<title>Form Registrasi</title> <!-- Tag Title untuk menampilkan Title pada Tab Browser -->
</head> <!-- Tag Akhir Penutup 'Head' -->
<body style="font-family:Century Gothic; font-size:14px;">
<!-- Tag Body, untuk mengatur tampilan pada halaman.
<!-- Menggunakan perintah Style, yang berfungsi untuk mengatur gaya tulisan/text,
ukuran huruf, dan warna pada halaman. -->
<center> <!-- Tag Center berfungsi untuk mengatur tata letak suatu objek, hingga batas penutup Tag Center -->
<fieldset style="width:70%;"> <!-- Tag fieldset berfungsi untuk menampilkan sebuah Frame/Garis Tepi. -->
<legend><b>Form Registrasi</b></legend> <!-- Tag legend untuk memberikan judul/teks pada Frame diatas,
Tag '<b>' berfungsi untuk membuat Font/teks bercetak tebal. -->
<form method="get" action=""> <!-- Tag Form, Yaitu tag yang berfungsi untuk mengirimkan data yang diinputkan dalam form,
method get berfungsi untuk mengirimkan record dalam bentuk url,
action berfungsi untuk tujuan yang akan dikirimkan. -->
<table border="0" width="100%" align="center"> <!-- Tag Pembuka tabel, border untuk mengatur ukuran garis pada tabel,
align untuk mengatur tataletak tabel. -->
<tr> <!-- Tag <tr> untuk membuat baris baru dalam tabel. -->
<td>Nama</td> <!-- Tag <td> untuk memmbuat kolom dalam tabel, didalam tag <td> adalah isi didalam kolom -->
<td>:</td>
<td><input name="nama" type="text" size="50" maxlength="50" placeholder="Nama Lengkap" autofocus required></td>
<!-- name = berfungsi untuk memberikan identitas nama pada sebuah input.
size = berfungsi untuk mengatur ukuran/panjang input.
maxlength = berfungsi untuk mengatur panjang karakter.
placeholder = berfungsi untuk memberikan keterangan didalam input
autofocus = berfungsi untuk menempatkan kursor pada input saat pertama halaman dijalankan.
required = berfungsi untuk menampilkan warning jika input tersebut masih dalam keadaan kosong. -->
</tr> <!-- Tag penutup <tr> /baris -->
<tr>
<td>Alamat</td>
<td>:</td>
<td><textarea name="alamat" placeholder="Alamat Lengkap"></textarea></td>
<!-- Input textarea yaitu input yang dapat menampung text lebih banyak, kolom/cols atau baris/rows. -->
</tr>
<tr>
<td>Jenis Kelamin</td>
<td>:</td>
<td><input name="jk" type="radio" value="P" checked>Pria<input name="jk" type="radio" value="W">Wanita</td>
<!-- Input type radio yaitu pemilihan check radio yang hanya dapat dipilih 1 ID diantara beberapa ID dalam 1 group radio.
checked berfungsi untuk memberikan pilihan default dalam group radio-->
</tr>
<tr>
<td>Tempat Lahir</td>
<td>:</td>
<td><input name="tempatlahir" type="text" size="50" maxlength="50" placeholder="Tempat Lahir" required></td>
</tr>
<tr>
<td>Tanggal Lahir</td>
<td>:</td>
<td><input name="tgllahir" type="date" required></td>
<!-- Input Type DATE yaitu untuk menampilkan format calendar didalam input tersebut. -->
</tr>
<tr>
<td>Telp</td>
<td>:</td>
<td><input name="telp" type="text" placeholder="Telp" maxlength="12"></td>
</tr>
<tr>
<td>Alamat Web</td>
<td>:</td>
<td><input name="alamatweb" type="url" size="50" placeholder="http://www.url-ku.kom"></td>
<!-- Input Type url yaitu untuk mengatur format url didalam input tersebut. -->
</tr>
<tr>
<td>Email</td>
<td>:</td>
<td><input name="email" type="email" size="50" placeholder="example@contoh.com"></td>
<!-- Input Type Email yaitu untuk menampilkan format email didalam input tersebut. -->
</tr>
<tr>
<td>Kecamatan</td>
<td>:</td>
<td><select name="kecamatan" style="width:200px;">
<option value="null">--- Pilih Kecamatan ---</option>
<option value="Sukowono">Sukowono</option>
<option value="Kalisat">Kalisat</option>
<option value="Arjasa">Arjasa</option>
<option value="Jenggawa">Jenggawa</option>
<option value="Tumperejo">Tumperejo</option>
<option value="Silo">Silo</option>
<option value="Kaliwates">Kaliwates</option>
<option value="Ambulu">Ambulu</option>
<option value="Patrang">Patrang</option>
<option value="Puger">Puger</option>
</select></td>
<!-- membuat Menu List / combobox.
tag option untuk membuat beberapa opsi/pilihan dalam list tersebut -->
</tr>
<tr>
<td colspan="3"><input name="kirim" type="submit" value="Kirim">
<!-- Input Type submit yaitu sebuah objek tombol yang berfungsi mengirimkan isi dari form. -->
<input name="batal" type="reset" value="Batal">
<!-- Input Type reset yaitu sebuah objek tombol yang berfungsi mengkosongkan isi dari form. --></td>
</tr>
</table> <!-- Tag Penutup tabel. -->
</form> <!-- Tag Penutup Form, yaitu untuk membatasi objek yang termasuk Form didalamnya -->
</fieldset> <!-- Tag Penutup fieldset/Frame -->
</center> <!-- Tag Penutup Center, untuk membatasi area yang ditampilkan ditengah halaman -->
</body> <!-- Tag Penutup Body -->
</html> <!-- Tag Penutup HTML -->
Kemudian tulis code Css dibawah ini sebelum tag
untuk mengubah tampilannya.
Klik disini untuk melihat Demo!
