Bentuk Dasar Form Pada HTML

Bentuk Dasar Form Pada HTML - Form dalam html merupakan bagian yang paling penting dalam pemrograman html khususnya yang berhubungan dengan perangkat lunak berbasis website. Form ini tak jarang digunakan untuk pendaftaran user, login user maupun yang lainnya mirip komentar untuk website dll.

Beberapa atribut yang dapat digunakan dalam <form> :

• action : menentukan lokasi script yang akan memproses data dari form
• accept : mendefinisikan mime yang diizinkan server yang memuat script untuk memproses form
• method : menentukan bagaimana data akan dikirim ke server. get : data akan dikirim dengan menggunakan query string pada url. post : data akan dikirim ke server sebagai block data ke script

Untuk membuat sebuah form dalam html, dibutuhkan beberapa baris inputan atau yang sering disebut komponen form. Komponen-komponen form ini berfungsi sebagai tempat input data yang akan digunakan oleh user dan akan diproses selanjutnya. Adapun aturan penulisan script untuk membuat form dalam html adalah sebagai berikut :

<form method = “method_php” action =”link action”>

    komponen form

    </form>

*Penjelasan :

method : metode yang akan digunakan untuk memproses inputan

action   : action disini berisi link proses selanjutnya setelah user memasukkan data.

Dalam form html ada 2 metode yang dapat digunakan oleh user yakni Post dan Get. Metode Post mengambil data untuk diproses berdasar inputan yang dimasukkan oleh user, sementara metode Get mengambil data yang ada di address bar atau url. Secara teknis get diproses lebih sederhana dikarenakan permintaan dikirimkan melalui alamat halaman (url) dengan sistem penulisan secara berpasangan yaitu nama varibel dan nilainya, dan pemisahan variabel menggunakan karakter dan &.

Contoh sederhana penulisan script form dalam html

    <form method = “post” action =”form.php”>

    komponen form

    </form>

Selanjutnya, form dalam html sendiri memiliki beberapa komponen form yang dimana masing-masing tipe ini memiliki fungsi dan kegunaannya sendiri. Berikut ialah sedikit penjelasan mengenai komponen form pada html

   1.  Text Field

Komponen form yang pertama ialah Text Field. Komponen text field ini sering dipakai dikala kita melakukan pendaftaran account di kolom nama,dll. Adapun komponen text field ini hanya dapat digunakan untuk menuliskan kata dalam satu baris saja.

Contoh script untuk form tipe text field

    <form method=”post” action=”form.php”>

    nama : <input name=”nama” type =”text” value=””>

    </form>

*Penjelasan :

name                : jenis identitas  yang digunakan untuk diproses selanjutnya

type                 : jenis komponen form

value                : variabel tambahan yang digunakan untuk editing yang lebih spesifik

   2.  Textbox

Komponen form yang kedua merupakan Textbox. Komponen textbox ini biasanya dipakai saat kita diminta memasukkan inputan dalam jumlah variabel yang panjang mirip saat menginputkan alamat atau memasukkan komentar di suatu website. Dalam textbox jumlah variabel yang dapat dimasukkan mampu lebih dari satu baris.

Contoh script untuk form tipe textbox

    <form method=”post” action=”form.php”>

    alamat       : <textarea name=”alamat” rows=”10” cols=”40” value=””><textarea>

    </form>

*Penjelasan :

name                : identitas yang digunakan untuk diproses selanjutnya

row                  : panjang / tinggi textbox

cols                  : lebar textbox

value                : variabel tambahan yang digunakan untuk editing yang lebih spesifik

   3. Radio Button

Komponen form yang selanjutnya merupakan radio button. Radio button ini merupakan komponen form yang dimana membuat user harus memilih salah satu pilihan yang tersedia. contoh penggunaanya yaitu untuk inputan jenis kelamin, dll.

Contoh script untuk form tipe radio button

    <form method=”post” action=”form.php”>

    jenis kelamin : <input name=”gender” type =”radio” value=”1”>laki-laki</input>

    <input name=”gender” type =”radio” value=”2”>perempuan</input>

    </form>

*Penjelasan :

name                : identitas yang digunakan untuk diproses selanjutnya

type                 : jenis komponen form

value                : variabel tambahan yang digunakan untuk editing yang lebih spesifik

Note : untuk membuat komponen form dapat diproses diharapkan pada variabel name isinya sama namun berbeda di variabel value nya

4.   Select

Komponen form berikutnya ialah select. dalam select ini user akan diminta memilih satu pilihan dari beberapa pilihan yang ditampilkan secara dropdown. biasanya berfungi untuk memasukkan tanggal lahir, dll.

Contoh script untuk form tipe radio button

    tanggal lahir : <select name=”tlahir”>
    <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>

    </select>

*Penjelasan :

name                : Jenis identitas yang digunakan untuk diproses selanjutnya

value                : variabel tambahan yang digunakan untuk editing yang lebih spesifik

note : untuk membuat komponen form dapat diproses diharapkan variabel value nya berbeda

5.   Check Box

Komponen form yang selanjutnya ialah Check Box. Check box ini memiliki tampilan yang hampir mirip dengan radio button, namun di check box ini kita dapat memilih lebih dari satu pilihan yang tersedia. Penggunaanya dapat ditemui di isian hobby,dll dalam sebuah form pendaftaran

Contoh script untuk form tipe check box

    <form method=”post” action=”form.php”>

    hobby : <input name=”hobby” type =”checkbox” value=”1”>sepakbola</input>

    <input name=”hobby” type =”checkbox” value=”2”>badminton</input>

    <input name=”hobby” type =”checkbox” value=”3”>tenis</input>

    <input name=”hobby” type =”checkbox” value=”4”>tenis meja</input>

    </form>

*Penjelasan :

name                : Jenis identitas yang digunakan untuk diproses selanjutnya

type                  : jenis komponen form

value                : variabel tambahan yang digunakan untuk editing yang lebih spesifik

Note : mirip dengan radio button, untuk membuat komponen form dapat diproses diharapkan pada variabel name isinya sama namun berbeda di variabel value nya

    6. Button

Komponen form yang terakhir ialah button yang terdiri dari Submit dan Reset. Submit merupakan komponen form yang digunakan untuk mengirim data inputan menuju proses selanjutnya sementara reset ialah komponen form yang digunakan untuk menghapus semua data yang telah dimasukkan oleh user.

Kontoh script untuk form tipe submit dan reset

    <form method=”post” action=”form.php”>

    <input name=”submit” type =”submit” value=”kirim”>

    <input name=”reset” type =”reset” value=”hapus”>

    </form>

*Penjelasan :

name                : jenis identitas yang digunakan untuk diproses selanjutnya

type                 : jenis komponen form

value                : teks yang akan tertampil di button submit dan reset

Contoh Form pada HTML :

<html>
<body>
<p align="center">
<font size="5">Form Registrasi</font></p>
<br><br>
<form>
<table width="100%" border="0">
<tr>
<td width="15%">NAMA</td>
<td width="2">:</td>
<td><input type="text" size="50"></td>
</tr>
<tr>
<td width="15%">TEMPAT/ TGL LHIR</td>
<td width="2">:</td>
<td><input type="text" size="50">,
<input type="text" maxlength="2" size="2">/
<input type="text" maxlength="2" size="2">/
<input type="text" maxlength="4" size="4"></td>
</tr>
<tr>
<td width="15%">ALAMAT</td>
<td width="2">:</td>
<td>
<textarea cols="50" rows="4"></textarea></td>
</tr>
<tr>
<td width="15%">PENDIDIKAN TERAKHIR</td>
<td width="2">:</td>
<td>
<select>
<option>SD</option>
<option>SMP</option>
<option>SMA</option>
<option>S1</option>
<option>S2</option>
<option>S3</option>
</select></td>
</tr>
<tr>
<td width="15%">STATUS</td>
<td width="2">:</td>
<td>
<input type="radio" CHECKED name="1">Kawin
<input type="radio" name="1">Tidak kawin
</td></tr>
<tr>
<td width="15%">HOBI</td>
<td width="2">:</td>
<td>
<input type="checkbox">Memancing<br>
<input type="checkbox">Berenang<br>
<input type="checkbox">Jogging<br>
</td></tr>
<tr>
<td width="15%">PASSWORD</td>
<td width="2">:</td>
<td>
<input type="password" maxlength="10" size="50">
</td></tr>
<tr>
<td width="15%">&nbsp;</td>
<td>&nbsp;</td>
<td>
<input type="submit" value="SETUJU">
<input type="reset" value="BATAL">
</td></tr>
</table>
</form>
</body>
</html>

Nah mungkin itu saja penjelasan tentang Bentuk Dasar Form Pada HTML, jika ada yang kurang paham atau ada pertanyaan bisa anda ajukan di kolom komentar di bawah. Terima Kasih.

Read more »

Kode Dasar Template Blogger Buatan Sendiri

 Kode Dasar Template Blogger Buatan Sendiri - Setelah kemarin anda telah belajar Susunan Dasar Pemrograman HTML Untuk Template Blogger dan telah membuat template anda sendiri sekarang kita akan beri beberapa kode agar template yang tadi anda buat bisa berjalan di blogger. Karena kode-kode di bawah ini sangat sensitif, anda harus teliti dalam menaruhnya dan ikuti semua petunjuk.


Deklarasi xml (eXtensible Markup Language)

XML (eXtensible Markup Language) merupakan sebuah himpunan bagian (subset) dari Standard Generalized Markup Language (SGML), yang bertujuan agar SGML secara generik dapat melayani, menerima, dan memproses dalam Web dengan cara seperti yang dimungkinkan HyperText Markup Language (HTML) saat ini.
XML dirancang untuk kemudahan implementasi dan untuk interoperabilitas dengan SGML dan HTML. Jadi XML adalah bahasa markup yang dirancang khusus untuk penyampaian informasi melalui World Wide Web, persis seperti HTML (Hypertext Markup Language), yang telah menjadi bahasa standar untuk membuat halaman web sejak awal kehadiran web.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

Ketika kita ingin memasukkan daerah geografi atau bahasa yang didukung oleh konten dalam HTML — tidak perlu menambahkan meta — cukup sisipkan tag lang, contoh: lang='id', lang='en', lang='en-us', lang='fr', dan sebagainya.

<html lang='id' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

Kode di atas kita taruh di atas atau sebelum kode <html>.

Elemen Head

Head HTML berisi sejumlah markah yang meliputi script, instruksi kepada peramban untuk menemukan stylesheets, memberikan informasi meta, dan lain-lain.

<head>
  <meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
  <b:if cond='data:blog.isMobile'>
    <meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0' name='viewport'/>
  <b:else/>
    <meta content='width=1100' name='viewport'/>
  </b:if>
  <b:include data='blog' name='all-head-content'/>
  <title>
    <b:if cond='data:blog.homepageUrl == data:blog.url'>
      <data:blog.title/>
    <b:else/>
      <data:blog.pageName/> | <data:blog.title/>
    </b:if>
  </title>
  <meta content='' name=''/>
  <link href='' rel='' type=''/>
  <script src='' type=''/>
  <b:skin><![CDATA[ /* CSS Anda di sini */
body {
  background: #fff;
  color: #000;
  font: .875em/1.7143em Georgia, Times, "Times New Roman", serif;
  text-align: left;
  word-spacing: .075em;
}
… dan seterusnya …
  ]]></b:skin>
 </head>

Elemen Body

Body HTML merupakan tubuh dari HTML (HyperText Markup Language) yang akan menampilkan bentuk pengkodean pada layar peramban. Sedangkan beberapa elemen yang melingkupinya dapat kita uraikan sebagai berikut.

<body expr:class='"loading" + data:blog.mobileClass'>

Navbar

<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
  <b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>
</b:section>

Header

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
  <b:widget id='Header1' locked='true' title='Title Blog (Header)' type='Header'/>
</b:section>

Main (Posting Blog)

<b:section class='main' id='main' showaddelement='no'>
  <b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
</b:section>

Sidebar

<b:section class='sidebar' id='sidebar' preferred='yes'/>

Footer

<b:section class='footer' id='footer' showaddelement='no'>
  <b:widget id='Attribution1' locked='false' title='' type='Attribution'/>
</b:section>

Dari beberapa markah elemen di atas, biasanya untuk menampilkan halaman posting atau halaman statis pada blog, minimal harus ada elemen widget main (posting blog). Sedangkan yang lain dapat dikustomisasi manual, seperti header dapat saja berisi title serta tagline, fungsi fitur navbar dapat kita matikan, dan lain-lain.

Sekian post kali ini, semoga dengan pembelajaran ini dapat memudahkan anda yang sedang belaja membuat template blog sendiri.

Read more »

Susunan Dasar Pemrograman HTML Untuk Template Blogger

Susunan Dasar Pemrograman HTML Untuk Template Blogger - Kali ini Blogger Modis akan share ilmu nih sedikit tentang dasar-dasar Pemrograman HTML.Pemrograman ini sangat penting di dunia Design Web karena memang dalam dasar Design Web Menggunakan HTML yang juga terdapat CSS dan Javascript untuk Blogger. Untuk Web Profesional juga terdapat HTML,CSS dan Javascript namun ditambah dengan PHP dan MySQL.

Pengertian HTML
 
Html adalah singkatan dari HyperText Markup Language, yaitu bahasa standar yang digunakan oleh browser untuk membuat halaman dan dokumen pada sebuah Web yang kemudian dapat diakses dan dibaca layaknya sebuah artikel. Untuk mempelajari web, maka html adalah pelajaran pertama. Tak sulit, cukup menggunakan notepad, atau aplikasi dreamweaver bagi tingkat lanjutan.


Susunan Dasar HTML

<HTML>
<head>
</head>
<body>
</body>
</HTML>

Anda bisa lihat di kode di atas, penjelasannya sangat mudah seperti ini :

1. <HTML> adalah kode identitas dari bahasa pemrograman dari HTML.

2. Setiap kode yang dipanggil pasti mempunyai penutup, contoh lihat di kode <head> atau <body>, bisa kita lihat kode <head> di tutup dengan </head> dan <body> ditutup dengan </body>. Setiap kode penutup menggunakan Slash (/). Ada 2 cara menutup kode, yang pertama adalah cara di atas yang dimana kode pembuka untuk ditutup diberi Slash (/) , yang ke 2 dengan cara memberi slash di akhiran kode pembuka. Contoh saja saya ambil untuk penulisan pencarian source kode Javascript seperti ini <script src='https://deris-cole.googlecode.com/svn/branches/HiglightSyn.js'></script> bisa anda tulis menjadi ini <script src='https://deris-cole.googlecode.com/svn/branches/HiglightSyn.js'/>.

3. Fungsi <head> adalah untuk meletakan CSS style, Meta Tag, dan Title. CSS style adalah setelan untuk bagaimana nanti tampilan dari HTML kita. Untuk Penjelasan lebih rinci tentang CSS bisa nanti anda lihat di postingan selanjutnya. Meta tag adalah suatu kode atau serangkaian kode HTML yang di pasang di dalam template suatu blog yang bertujuan untuk membantu web robot google dalam menganalisa seluruh konten (isi artikel) dari blog. Sehingga akan memudahkan dalam mengindeks / Crawling blog kita. Dan Title adalah judul dari HTML kita.

4. Fungsi <body> berguna untuk tempat dimana kode perintah digunakan, letak dari semua content seperti main post, widget maupun menu navigasi ada disini.

5. Lalu ada yang namanya Javascript, di dalam HTML biasanya terletak di atas kode </body>. JavaScript adalah bahasa scripting yang paling populer di internet dan bekerja pada banyak browser seperti Internet Explorer, Mozilla, Firefox, Netscape, Opera. JavaScript digunakan pada Web pages untuk meningkatkan design, validate forms, detect browsers, create cookies, GUI dsb.Banyak sekali fungsi dari java script. Bagi pemula (seperti saya), mengenal lebih jauh java script adalah program lanjutan, kelak jika akan membuat web provesional

Contoh HTML Sederhana

<HTML>
<head>
<title> Contoh HTML </title>
</head>
<body>
<h1> Ini Contoh Judul Post </h1>
<p> Ini Contoh Isi Postingan yang bisa di isi dengan kemauan penulis. <p>
</body>
</HTML>

Silahkan anda copy kode diatas lalu simpan dengan Notepad. Ingat simpan dengan extension ( .html ) lalu buka dengan browser.

Logika Sederhana HTML

Bermain HTML itu seperti kita menumpuk Kertas.

1. Yang pertama adalah Body, di dalam Body itu terdapat Outer-Wrapper
2. Di dalam Outer-Wrapper terdapat Header-Wrapper dan Main-Wrapper.
3. Di Header-Wrapper terdapat Header ( Judul-Blog ) dan Navigasi atau Menu.
4. Di Main-Wrapper terdapat Main-Post dan Sidebar untuk Widget.

Nah semoga buat anda yang ingin belajar HTML jadi tahu dasar-dasar tentang HTML. Sekian post kali ini, semoga bermanfaat bagi anda.

Read more »

Keunggulan dari Teknologi HTML5 dan CSS3

Keunggulan dari Teknologi HTML5 dan CSS3 - Kali ini Blogger Modis akan berbagi ilmu tentang salah satu bahasa program pendukung design web yaitu HTML5 dan CSS3. Pembahasan kali ini sangat penting jika anda akan belajar bahasa program karena HTLM5 dan CSS3 ini adalah versi terbarunya. Belajar HTML5 yang terbaru bisa anda dapatkan di W3schools.com.

Apa Itu HTML5 dan CSS3

HTML5 merupakan teknologi terbaru dari bahasa program (Hypertext Markup Language) atau HTML yang merupakan salah satu bahasa pemrograman web. HTML 5 mulai diperkenalkan kepada publik sejak tahun 2008 namun HTML5 baru dikenal secara luas dan secara resmi pada tahun 2011.

Saat ini HTML5 sudah dapat dipasangkan dengan CSS3 walaupun belum sempurna. Dari W3C ( World Wide Web Consortium ) yang menaungi Program HTML5 ini tetap berusaha memaksimalkan teknologi baru ini agar lebih stabil.

Keunggulan HTML5 

HTML5 dihadirkan untuk meminimalisir proses pengkodean dan lebih logis. HTML5 sangat dibutuhkan oleh website yang memiliki dasar konten multimedia karena telah banyak kode yang diperuntukkan konten multimedia.Beberapa fitur baru tersebut seperti element <video>, <audio>, dan <canvas>, serta integrasi terhadap Vector Graphics Content (<object> tag). Hal ini menyimpulkan bahwa konten website yang berbasis multimedia dan grafis dapat ditangani oleh HTML5 dan tentunya dapat digunakan dengan mudah dan lebih cepat tanpa harus menggunakan plug-in tambahan atau APIs.

Struktural

Elemen Media

<audio> Mendefinisikan konten suara
<video> Mendefinisikan sebuah video atau film
<source> Mendefinisikan beberapa sumber media <video> dan <audio>
<embed> Mendefinisikan sebuah wadah untuk aplikasi eksternal atau konten interaktif

Plug-in

<track> Mendefinisikan trek teks untuk <video> dan <audio>

Elemen Formulir

<datalist> Menentukan daftar pilihan yang telah ditetapkan untuk kontrol input
<keygen> Mendefinisikan kunci-pair bidang pembangkit (untuk formulir)
<output> Mendefinisikan hasil penghitungan

Semantik / Elemen Struktural

HTML5 menawarkan unsur-unsur baru untuk struktur yang lebih baik antara lain :

<canvas> Digunakan untuk menggambar grafik melalui script (biasanya JavaScript)
<article> Mendefinisikan sebuah artikel
<aside> Mendefinisikan konten selain dari konten halaman
<bdi> Isolat merupakan bagian dari teks yang dapat diformat dalam arah berbeda dari teks lain di luar itu
<command> Mendefinisikan sebuah tombol perintah bahwa seorang pengguna dapat meminta
<details> Mendefinisikan rincian tambahan bahwa pengguna dapat melihat atau menyembunyikan
<dialog> Mendefinisikan sebuah kotak dialog atau jendela
<summary> Mendefinisikan sebuah judul terlihat untuk elemen <details>
<figure> Menentukan konten mandiri, seperti ilustrasi, diagram, foto, daftar kode, dll
<figcaption> Mendefinisikan sebuah caption untuk elemen <figure>
<footer> Mendefinisikan footer untuk dokumen atau bagian
<header> Mendefinisikan sebuah header untuk dokumen atau bagian
<mark> Mendefinisikan ditandai / teks yang disorot
<meter> Mendefinisikan pengukuran skala dalam kisaran yang dikenal
<nav> Mendefinisikan navigasi link
<progress> Merupakan kemajuan tugas
<ruby> Mendefinisikan sebuah penjelasan ruby (untuk tipografi Asia Timur)
<rt> Mendefinisikan penjelasan / pengucapan karakter (untuk tipografi Asia Timur)
<rp> Mendefinisikan apa yang harus ditampilkan di browser yang tidak mendukung

Penjelasan ruby

<section> Mendefinisikan bagian dalam dokumen
<time> Mendefinisikan tanggal / waktu
<wbr> Mendefinisikan garis-break mungkin

Adapun beberapa elemen HTML 4.01 yang telah usang dan penggunaanya telah dihapus pada generasi HTML5 yaitu :

<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<noframes>
<strike>
<tt>

Kita sebagai pengguna teknologi khususnya teknologi internet tentunya tidak ingin tertinggal dengan perkembangan teknologi generasi terbaru, apalagi jika teknologi yang sedang kita gunakan terancam tidak lagi berfungsi pada browser di masa mendatang.

Sekedar informasi browser teratas seperti Chrome, Safari, Firefox, Opera, dan IE telah memberikan kompatibilitas terhadap HTML5, ini membuktikan bahwa generasi HTML5 akan menggantikan generasi sebelumnya HTML 4.01 yang secara tidak langsung akan menghapus fungsi pengoperasianya.

Read more »