Assalamulaikum,..
Kali ini saya akan menulis tentang
source code format registrasi dengan HTML5. Tapi sebelum nulis nulis tentang
codingan yang bikin pusing, saya mau cerita sedikit asal usul saya nulis
artikel ini. Sebenernya saya jarang sekali ngisi blog ini, tapi karena banyak
tugas yang mewajibkan menulis di blog, maka jadilah blog saya banyak tentang
coding-coding. Baru kali ini saya kenal apa itu HTML, itu karena di semester
empat ini ada mata kuliah Pemrograman Berbasis Web(PBW). Awal masuk kuliah saya
gag ngeh banget sama bahasa dunia lain ini, apalagi waktu dikelas saya malah
ngerjain kuis jarkom, jadi tambah gag nyambung. Hingga akhirnya dua hari
setelah dapat tugas, saya nanyak sana
sini, minta ajarin temen, browsing-browsing dan akhirnya bisa selesai juga. J
Sebelum membahas kodingnya, akan
lebih baik kalo kita tahu terlebih dahulu apa itu HTML5. HTML5 merupakan sebuah
bahasa markah untuk menstrukturkan dan menampilkan isi dari world wide wibe,
sebuah teknologi inti dari internet. Jika dibandingkan dengan versi HTML
sebelumnya, HTML5 banyak sekali memiliki fitur baru yang memudahkan user dalam
menggunakan website.
<!DOCTYPE html> <!--mendefinisikan jenis document
yang menggunakan HTML5-->
<html> <!--mendefinisikan document html-->
<head>
<!--informasi tentang document-->
<title>Format
Registrasi</title> <!--judul document-->
<form>
<!--mendefinisikan formulir-->
<nav>
<!--link navigasi-->
<p><a
href="/beranda.html">Beranda</a> - <!--tag <p>
mendefinisikan paragraph-->
<a
href="/registrasi.html">Registrasi</a> -<!--tag <a>
mendefinisikan hyperlink-->
<a
href="/aplikasi.html">Aplikasi</a> - <!--source code ini
berfungsi menampilkan teks hyperlink-->
<a
href="/profil.html">Profil</a></p>
</nav>
<body
background="beautiful.jpg" Text = "darkblue"> <!--memberi background dan warna teks-->
<B>
<!--untuk menebalkan text-->
<i>
<!--untuk memiringkan text-->
<form
method = "get"> <!—tag digunakan untuk mengumpulkan informasi
dari user-->
<table
align="center"> <!--membuat tabel dan menempatkannya ditengah
halaman-->
<h2
align="center">Formulir Registrasi</h2> <!--ukuran font
dan menempatkan teks ditengah halaman-->
<p
align="center"> silahkan mengisi data dibawah ini </p>
<tr>
<!--baris pada tabel-->
<td>Nama</td>
<!--kolom pada tabel-->
<td>:</td>
<td><input
type="text" name ="nama" placeholder="nama lengkap
anda"/></td>
</tr>
<!--tag <input> mendefinisikan input field pada form, -->
<!--placeholder
berfungsi memunculkan petunjuk untuk user didalam input field-->
<tr>
<td>Alamat</td>
<td>:</td>
<!--input field berupa text-->
<td><input
type="text" name ="Alamat" /></td>
</tr>
<tr>
<td>Tanggal
Lahir</td>
<td>:</td>
<td>
<select
name="tanggal" > <!--mendefinisikan select tabel list
tanggal-->
<option
value="****"></option>
<option
value="1">1</option>
<option
value="2">2</option>
<option
value="3">3</option>
<option
value="4">4</option>
<option
value="5">5</option>
<option
value="6">6</option>
<option
value="7">7</option>
<option
value="8">8</option>
<option
value="9">9</option>
<option
value="10">10</option>
<option
value="11">11</option>
<option
value="12">12</option>
<option
value="13">13</option>
<option
value="14">14</option>
<option
value="15">15</option>
<option
value="16">16</option>
<option
value="17">17</option>
<option
value="18">18</option>
<option
value="19">19</option>
<option
value="20">20</option>
<option
value="21">21</option>
<option
value="22">22</option>
<option
value="23">23</option>
<option
value="24">24</option>
<option
value="25">25</option>
<option
value="26">26</option>
<option
value="27">27</option>
<option
value="28">28</option>
<option
value="29">29</option>
<option
value="30">30</option>
<option
value="31">31</option>
</select>
<select
name="bulan"> <!--mendefinisikan select tabel list nama
bulan-->
<option
value="****">month</option>
<option
value="1">Januari</option>
<option
value="2">Februari</option>
<option
value="3">Maret</option>
<option
value="4">April</option>
<option
value="5">Mei</option>
<option
value="6">Juni
<option
value="7">Juli</option>
<option
value="8">Agustus</option>
<option
value="9">September</option>
<option
value="10">Oktober</option>
<option
value="11">November</option>
<option
value="12">Desember</option>
</select>
<select
name="tahun"> <!--mendefinisikan select tabel list tahun-->
<option
value="****">year</option>
<option
value="2000">2000</option>
<option
value="1999">1999</option>
<option
value="1998">1998</option>
<option
value="1997">1997</option>
<option
value="1996">1996</option>
<option
value="1995">1995</option>
<option
value="1994">1994</option>
<option
value="1993">1993</option>
</tr>
<tr>
<td>Jenis
Kelamin</td>
<td>:</td>
<td>
<!--tag <input type radio untuk radio buttons, memungkinkan user hanya
memilih salah satunya-->
<input
type=radio name ="gender" value="Cowok" ></input>
Cowok
<input
type=radio name ="gender" value="Cewek" ></input>
Cewek
</td>
</tr>
<tr>
<td>Nomor
Telepon</td>
<td>:</td>
<!--untuk menginputkan nomor telepon user-->
<td><input
type="tel" name ="usrtel"
placeholder="+6281234555666"/></td>
</tr>
<tr>
<td>URL</td>
<td>:</td>
<!--merupakan field URL user-->
<td><input
type="url" name ="homepage"
placeholder="www.example.com"/></td>
</tr>
<tr>
<td>Email</td>
<td>:</td>
<!--merupakan field untuk alamat email, akan otomatis memvalidasi ketika
submit-->
<td><input
type="email" name ="usremail"
placeholder="example@yahoo.com"/></td>
</tr>
<tr>
<td>Password</td>
<td>:</td>
<!--merupakan field untuk password, karakter akan tersembunyi-->
<td><input
type="password" name ="pwd" required/></td>
</tr>
<!--atribut required dapat menentukan input field yang wajib diisi dengan
data-->
<tr>
<td>Kecamatan</td>
<td>:</td>
<td>
<!--input kecamatan menggunakan combobox-->
<select
name="Kecamatan">
<option
value="********"></option>
<option
value="Rambipuji">Rambipuji</option>
<option
value="Bangsal">Bangsalsari</option>
<option
value="Panti">Panti</option>
<option
value="Panti">Balung</option>
<option
value="Panti">Tanggul</option>
</td>
</tr>
<tr>
<td>
<input
type="submit" value=Submit> <!--submit button-->
<input
type="reset"> <!--reset buttton,akan menghapus semua data dan
menjadikannya dalam keadaan default-->
</td>
</tr>
</table>
</B>
</i>
<footer><font
color="#000000"> <!--tag footer mendefinisikan footer halaman,
color untuk memberi warna text-->
<p>Posted
by : Naily Fi <img src="animasi.gif" alt="animasi"
height="42" width="42"></p> <!--menambahkan
animasi-->
<p>Contact
information : 08123456789 <a href="mail_to:naily@example.com">
naily@example.com</a>.</p>
<!--menampilkan email address dengan hyperlink---->
</footer><!—penutup
tag footer-->
</body>
<!--penutup dari tag body-->
</form>
</head>
</html>
Di awal koding HTML 5 wajib menggunakan
adalah singkatan dari “Document Type Declaration”.
Fungsinya untuk mengidentifikasi dokumen yang digunakan oleh sebuah situs.
Berikut adalah source code dan penjelasan singkatnya.
Dalam koding saya tersebut saya menggunakan beberapa fitur HTML5 terbaru, antara lain footer, placeholder, required.
Tag <footer> biasanya
digunakan ibagian bawah sebuah halaman isinya biasanya berupa info konten
seperti author website atau copyright.
Tag <input> placehoder attribute
dapat memunculkan petunjuk untuk user didalam input field, supaya memasukkan
data sesuai dengan data yang dibutuhkan. Petunjuk pendek dimunculkan sebelum
user mengetikkan data.
Tag <input> required attribute
dengan atribut ini, data tidak akan bisa di submit sebelum input field
beratribut required diisi. Atrinut ini bertipe Boolean. Atribut ini dapat
digunakan pada input type.
Setelah dijalankan maka hasilnya . .
tada . .
tada . .
KESIMPULAN :
HTML5 menawarkan banyak fitur. Di
tulisan saya ini hanya beberapa yang saya gunkan, dan semoga bermanfaat untuk
anda.
wassalamualaikum. .
terimakasih. .
terimakasih. .
Tidak ada komentar:
Posting Komentar