09 Mar 2014 @ 1:15 AM
Pada kali saya akan berbagi ilmu tentang pemrograman HTML5 dan css . disini saya akan memberikan contoh membuat formulir identitas diri pertama kita harus menyiapkan tool yang akan digunakan .,.,
pada kali ini saya menggunakan CodeLobster, namun kalian juga bisa menggunakan Note, Note++, PHP Editor, Dreamweafer dll.,.
ok langsung saja ke TKP….
pertama kita buat struktur HTML-nya
<!DOCTYPE HTML PUBLIC> <html> <head> <title>1210651099 - Muhammad Zaenol Arifin</title> <meta name="" content=""> </head> <body> ......................... </body> </html>
setelah kita membuat struktur htmlnya mari kita membuat style css supaya tampilan lebih menarik dan elagan .,.,silahkan ketikan kode css ini di editor anda
disini style CSS atau yang di sebut Cascading Style Sheet yaitu salah satu bahasa pemrograman web yang mengatur komponen dalam suatu web supaya web lebih menarik atau elegan untuk dilihat oleh user, css sangat berguna untuk mengatur background, ukuran text maupun font dan border, warna mouse over, warna tabel, margin kiri/kanan/atas/bawah , padding kiri/kanan/atas/bawah dan masih banyak yang lainnya.
<style type="text/css">
body{
margin-top: 10px;
padding: 0px;
background: #F6F6F6 url('background.png');
}
.table{
font-size: 1em;
font-family: sans-serif;
border: 1px solid silver;
background-color: white;
border-spacing: 1px;
}
.input{
background-color: #f2fffe;
border:1px dashed #DBDBDB;
padding: 2px;
font: 0.2em;
font-style: italic;
border-radius: 3px;
}
.td-title{
background: #EEEEEE;
border-bottom: 1px dotted silver;
padding: 4px;
}
.td-elemet{
background: #fcfcfc;
border-bottom: 1px dotted silver;
padding: 4px;
}
.th-title{
background: #b9eeec;
border-bottom: 1px dotted silver;
padding: 4px;
font-size: 2em;
color: #f0a048;
}
input[type="text"],
textarea,
input[type="number"],
input[type="date"],
input[type="url"],
input[type="email"],
select{
min-width: 10%;
max-width: 90%;
}
table{
max-width: 70%;
min-width: 50%;
}
input[type=submit]{
cursor:pointer;
background:none;
border:none;
font-family: 'Alice',serif;
color:#767676;
font-size:18px;
padding:10px 4px;
border:1px solid #E0E0E0;
text-shadow: 0px 1px 1px #E8E8E8;
background: rgb(247,247,247);
background: -moz-linear-gradient(top, rgba(247,247,247,1) 1%, rgba(242,242,242,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,rgba(247,247,247,1)), color-stop(100%,rgba(242,242,242,1)));
background: -webkit-linear-gradient(top, rgba(247,247,247,1) 1%,rgba(242,242,242,1) 100%);
background: -o-linear-gradient(top, rgba(247,247,247,1) 1%,rgba(242,242,242,1) 100%);
background: -ms-linear-gradient(top, rgba(247,247,247,1) 1%,rgba(242,242,242,1) 100%);
background: linear-gradient(top, rgba(247,247,247,1) 1%,rgba(242,242,242,1) 100%);
/*border-radius*/
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
/*box-shadow*/
-webkit-box-shadow:0px 1px 1px #FFF inset,
0 0 0px 5px #EAEAEA;
-moz-box-shadow:0px 1px 1px #FFF inset,
0 0 0px 5px #EAEAEA;
box-shadow:0px 1px 1px #FFF inset,
0 0 0px 5px #EAEAEA;
/*transition*/
-webkit-transition:all 0.2s linear;
-moz-transition:all 0.2s linear;
-o-transition:all 0.2s linear;
transition:all 0.2s linear;
}
input[type=submit]:hover{
color:#686868;
border-color: #CECECE;
background: rgb(244,244,244);
background: -moz-linear-gradient(top, rgba(244,244,244,1) 0%, rgba(242,242,242,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(244,244,244,1)), color-stop(100%,rgba(242,242,242,1)));
background: -webkit-linear-gradient(top, rgba(244,244,244,1) 0%,rgba(242,242,242,1) 100%);
background: -o-linear-gradient(top, rgba(244,244,244,1) 0%,rgba(242,242,242,1) 100%);
background: -ms-linear-gradient(top, rgba(244,244,244,1) 0%,rgba(242,242,242,1) 100%);
background: linear-gradient(top, rgba(244,244,244,1) 0%,rgba(242,242,242,1) 100%);
/*box-shadow*/
-webkit-box-shadow:0px 1px 1px #FFF inset,
0 0 0px 5px #E0E0E0;
-moz-box-shadow:0px 1px 1px #FFF inset,
0 0 0px 5px #E0E0E0;
box-shadow:0px 1px 1px #FFF inset,
0 0 0px 5px #E0E0E0;
}
input[type=submit]:active,
input[type=submit]:focus{
position:relative;
top:1px;
color:#515151;
background: rgb(234,234,234);
background: -moz-linear-gradient(top, rgba(234,234,234,1) 0%, rgba(242,242,242,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(234,234,234,1)), color-stop(100%,rgba(242,242,242,1)));
background: -webkit-linear-gradient(top, rgba(234,234,234,1) 0%,rgba(242,242,242,1) 100%);
background: -o-linear-gradient(top, rgba(234,234,234,1) 0%,rgba(242,242,242,1) 100%);
background: -ms-linear-gradient(top, rgba(234,234,234,1) 0%,rgba(242,242,242,1) 100%);
background: linear-gradient(top, rgba(234,234,234,1) 0%,rgba(242,242,242,1) 100%);
/*box-shadow*/
-webkit-box-shadow:0px -1px 1px #FFF inset,
0 0 0px 5px #E0E0E0;
-moz-box-shadow:0px -1px 1px #FFF inset,
0 0 0px 5px #E0E0E0;
box-shadow:0px -1px 1px #FFF inset,
0 0 0px 5px #E0E0E0;
}
</style>
setelah kita membuat style css marikita langsung membuat form isian .,
<!--Maksut dari form perintah dibawah ini kita membuah sebuah bungkus dari element/inputan yang akan ditampung, action maksutnya adalah untuk aksi ketika kita menekan tombol submit, autocomplete="off" maksutnya kita akan menonaktifkan autocomplit pada text input -->
<form name="frmbiodata" action="" method="POST" autocomplete="off">
<!--disini kita membuat sebuah table dimana tabaelnya di align="center" maksutnya table akan di tempatkan di tengan body, class="table" maksutnya kita akan memanggil style class css yang bernama table -->
<table align="center" class="table">
<!--Tag <tr> adalah tag untuk mendefinisikan setiap baris dari tabel. dalam TR terdapat tag <th> dan <td>-->
<tr>
<!-- maksut dari tag th disini untuk membuat colom deading, dan didalam tag th ada class="th-title" maksutnya kita akan memjalankan perintah css yg bernama th-title, dan disana juga terdapat colspan="2" maksutnya untuk menggabungkan dua buah colom untuk menjadi satu colom, heading adalah tag yang berisi heading dari sebuah tabel, biasanya berupa nama field/keterangan dari sebuah tabel-->
<th class="th-title" colspan="2">Formulir Registrasi</th>
</tr>
<tr>
<!--disini juga terdapat tag td atau table data dimana tag td hampir sama dengan tag th tetapi <td> dengan <th> adalah bahwa <td> berisi data biasa, sedangkan <th> berupa Cell untuk nama field/judul kolom, disini juga terdapat class="td-title" maksutnya kita akan memjalankan perintah css yg bernama td-title begitu juga dengan class="td-elemet" -->
<td class="td-title">Nama</td>
<td class="td-elemet">
<!--Type="Text" (<input type="text" /> adalah textbox inputan biasanya dugunakan untuk menerima input berupa text, atribut name gunanya untuk nama dari elemen tersebut agar bisa dikenal berbeda antara satu dengan yang lain, atribut placeholder berguna untuk deskripsi dari elemen tersebut, Atribut size untuk tag input type=”text” digunakan untuk membatasi panjang dari kotak isian. Nilai dari atribut ini adalah berapa pixel panjang kotak isian tersebut, atribut maxlength digunakan untuk membatasi maksimal inputan dari user, required berguna untuk validasi dari element yang berdasarkan typenya, pattern berguna untuk validasi inputan minimum dari user, title untuk pesan ketika terjadi kesalahan )-->
<input type="text" name="Nama" placeholder="Nama Lengkap" size="35" maxlength="35" required="" class="input" pattern=".{5,}" title="Minmimum 5 letters or numbers."/></td>
</tr>
<tr>
<td class="td-title" valign="top">Alamat</td>
<td class="td-elemet">
<!--Tag textarea pada dasarnya sama dengan input type text, tatapi lebih besar dan dapat berisi banyak baris.
atribut rows digunakan untuk menemtukan baris dan cols untuk panjang-->
<textarea name="Alamat" rows="3" cols="25" placeholder="Alamat Tinggal" title="Isi Alamat Tempat Tinggal Anda Sekarang" class="input" required=""></textarea></td>
</tr>
<!--Start Jenis Kelamin-->
<!--Type="radio" (<input type="radio" /> inputan berupa radio yang dapat diceklist atau di centang oleh user, namun user hanya bisa memilih satu diantara pilihan group radio. dan atribut value adalah nilai dari tag radio yg sudah ditetapkan, atribut checked berfungsi untuk aktif)-->
<tr>
<td rowspan="2" valign="top" class="td-title">Jenis Kelamin</td>
<td class="td-elemet"><input type="radio" name="Sex" value="L" checked=""/> Laki-Laki</td>
</tr>
<tr>
<td class="td-elemet"><input type="radio" name="Sex" value="P"/> Perempuan</td>
</tr>
<!--End Jenis Kelamin-->
<tr>
<td class="td-title">Tanggal Lahir</td>
<td class="td-elemet">
<!--type="date" adalah tag yang secara otomatis akan menjalankan choose calender ketikan di kursor di focuskan di text tersebut-->
<input type="date" name="TglLahir" size="15" maxlength="10" placeholder="Tanggal Lahir" class="input" required=""/></td>
</tr>
<tr>
<td class="td-title">Nomor Telepon</td>
<td class="td-elemet">
<!--type="number" hampir sama dengan type="text" tetapi tag number ini hanya bisa menerima number saja -->
<input type="number" name="Telp" size="15" maxlength="13" placeholder="Nomor Telepon" class="input" title="Minmimum 11 letters or numbers." pattern=".{11,}" required=""/></td>
</tr>
<tr>
<td class="td-title">Alamat Website</td>
<td class="td-elemet">
<!--type="url" hampir sama dengan type="text" tetapi tag url ini akan menvalidasi apakan inputan dari user sudah benar dengan struktur penulasan sebuah alamat website -->
<input type="url" name="Url" size="35" maxlength="100" placeholder="Alamat Website/Blog" class="input" required=""/></td>
</tr>
<tr>
<td class="td-title">Email</td>
<td class="td-elemet">
<!--type="email" hampir sama dengan type="text" tetapi tag email ini akan menvalidasi apakan inputan dari user sudah benar dengan struktur penulisan sebuah alamat email yang valid -->
<input type="email" name="email" size="35" maxlength="100" placeholder="Alamat Email" class="input" required=""/></td>
</tr>
<tr>
<td class="td-title">Kecamatan</td>
<td class="td-elemet">
<!--Tag select digunakan untuk inputan yang telah ditetapkan nilainya,
Tag select digunakan bersama dengan tag option untuk membuat box pilihan.-->
<select name="Kecamatan" required="" class="input">
<option value="null">-- Pilih Nama Kecamatan --</option>
<option value="Bondowoso">01. Bondowoso</option>
<option value="Jember">02. Jember</option>
<option value="Situbondo">03. Situbondo</option>
<option value="Banyuwangi">04. Banyuwangi</option>
<option value="Probolinggo">05. Probolinggo</option>
</select>
</td>
</tr>
<tr>
<td align="center" colspan="2" class="td-elemet">
<!--Type="submit" (<input type="submit" /> akan menampilkan tombol untuk memproses form. atribut value digunakan untuk nilai dari tombol itu.) -->
<input type="submit" value="Simpan" class="btn btn-success"/></td>
</tr>
</table>
</form>
Klik untuk melihar demo HTML5
Ok selesai, semalamat mencoba
Categories: Pemograman
Previous 
Next 
Categories
Tag Cloud
Blog RSS
Comments RSS
Last 50 Posts
Back
Void 
Life 
Earth 
Wind 
Water 
Fire 