Tutorial Membuat Form Dengan XHTML

Komponen halaman web yang memiliki kontrol-kontrol formulir, diantaranya: text area, text field, button, radio button, check box, dll

Langkah penulisan: Penulisan User Interface (UI), Implementasi pemrosesan Service-Side, Konfigurasi UI untuk berkomunikasi dengan user, dengan demikian tampak bahwa User dapat berinteraksi dengan form.

Form menyediakan data yang dapat dikirim ke server untuk diproses lebih lanjut.

Penulisan UI dalam HTML:

Setiap form dimulai dengan elemen <form>, yang didalamnya terdapat elemen-elemen control:

  • <input> /* Untuk satu baris text field
  • <label> /* Untuk member label pada control
  • <p> /* tiap bagian form dianggap sebagai satu paragraph>

Contoh Form Pendaftaran:

—————————————

<form>

<p>

Nama: <br/>

<input type=”text” name=”nama”/></p>

<p>

Email: </br>

<input type=”email” name=”email”/></p>

<p>

<input type=”submit” value=”Daftar” /></p>

<form>

 

Kodingan diatas akan mengasilkan:

Elemen Kontrol <input>

Elemen multiguna untuk representasi kontrol input.

Atribut name digunakan untuk pemrosesan form.

Berbagai macam tipe, ditambah tipe baru untuk HTML5 yang belum didukung oleh semua browser

http://www.w3.org/TR/html-markup/spec.html#input

  • input type=”text”
  • input type=”password”
  • input type=”checkbox”
  • input type=”radio”
  • input type=”button”
  • input type=”submit” → tombol submit form
  • input type=”reset” → tombol reset form
  • input type=”file” → file upload dialog
  • input type=”hidden”
  • input type=”image”
  • input type=”date”
  • input type=”datetime”
  • input type=”number”
  • input type=”range”
  • input type=”email”
  • input type=”url”
  • input type=”search”
  • input type=”tel”
  • input type=”color”
  • etc.

Elemen Kontrol <label>

Coba kita perhatikan kodingan dibawah ini.

<form>

<p>

<label for=”nama”>Nama:</label><br />

<input type=”text” id=”nama” name=”nama” /></p>

<p>

<label for=”email”>Email:</label><br />

<input type=”email” id=”email” name=”email” /></p>

<p>

<input type=”submit” value=”Daftar” /></p>

</form>

Kodingannya akan menghasilkan seperti dibawah ini

 

 

 

 

Loh, kok sama aja seperti yang contoh pertama dibuat?, bedanya dikodingan ada tambahan elemen <label>. Ok sekarang kita akan bahas elemen <label>.

Sebenarnya apabila kita buat form harus selalu tambahkan elemen <label>, karena fungsi dari elemen <label> sendiri menghubungkan label dengan control.

Contoh:

<label for=”nama”>Nama:</label><br />

<input type=”text” id=”nama” /></p>

 

Hal ini dilakukan karena screen reader membaca label dengan tepat untuk tiap control, memberikan arti dan struktrur yang tepat untuk label control, area klik yang lebih besar untuk radio button dan check box.

Radio Button

Radio button memiliki atribut <input type=”radio”>, terdiri dari dua atau lebih control radio button, memiliki atribut name yang sama. Hanya satu control yang bisa diaktifkan (jika salah satu aktif yang lainnya non-aktif). Harus ada salah satu yang aktif (gunakan atrribut checked untuk mengaktifkannya), langsung saja contohnya:

<form>

<p>

Jenis Kelamin:<br />

<input type=”radio” id=”laki-laki” name=”jkelamin” value=”L” checked=”checked” />

<label for=”laki-laki”>Laki-laki</label>

<input type=”radio” id=”perempuan” name=”jkelamin” value=”P” />

<label for=”perempuan”>Perempuan</label></p>

</form>

 

Hasil kodingannya akan tampak seperti dibawah:

\

 

Check Box

Check box memiliki atribut <input type=”checkbox”>, terdiri dari satu atau lebih control Check box (memiliki atribut name yang sama). Tiap control bisa diaktifkan tanpa mempengaruhi control lain.

Text Area

Text Area memiliki atribut <input type=”textarea”>, sama seperti input teks biasa, tetapi memiliki beberapa baris, bentuk input yang memerlukan isi teks yang banyak misalkan alamat dan komentar.

Contohnya nih:

<form>

<p>

<label for=”alamat”>Alamat:</label><br />

<textarea id=”alamat” name=”alamat”></textarea></p>

<p>

<input type=”checkbox” id=”langganan” name=”langganan” />

<label for=”langganan”>Langganan berita?</label></p>

</form>

 

 

Text Area

Hasil Kodingannya nih:

 

 

 

 

Tabindex

Memiliki atribut <input tabindex=”1”, fungsinya untuk memudahkan navigasi dengan keyboard (tombol TAB), juga menentukan urutan focus elemen secara manual.

Fieldset

Elemen ini berfungsi membuat kelompok control form kedalam satu bagian. Deskripsi dengan elemen <legend>

<form>

<fieldset>

<legend>Pendaftaran</legend>

</fieldset>

</form>

 

Maka kodingan tersebut akan mencetak:

 

Lebih jelasnya bisa download pdf di http://www.mediafire.com/view/?d4vfdyrgdgo2u44

Pertanian Indonesia

Indonesia adalah negara agraris menurut masyarakat terdahulu, karena memang dahulu walaupun 1/3 dari luas wilayah indonesia adalah daratan dan sisanya yang 2/3 itu wilayah lautan, Indonesia masih bisa swasembada beras, rakyatnya makmur, begitupun dengan faktor lain iklim belum berubah seperti saat ini, bercocok tanam pun bisa diperkirakan kapan panennya, belum terjadi intensifikasi pertanian yang menggunakan pupuk, benih, pestisida, dan peralatan pertanian yang mengandung bahan kimia yang dapat merusak ekosistem yang ada didalam tanah walaupun memang berpengaruh positif kepada hasil produksi dan produktivitas pertanian dari segi kuantitas maupun kualitas. Masih sedikitnya jumlah masyarakat indonesia pula mempengaruhi pertanian indonesia pada jaman dahulu, sehingga kebutuhan pangan di negri tercinta ini pada jamannya masih bisa surplus pangan. Walaupun demikian pada jaman dahulu mempunyai beberapa kelemahan, yakni hanya terfokus pada usaha tani, lemahnya dukungan kebijakan makro, serta pendekatannya yang sentralistik. Akibatnya usaha pertanian di Indonesia sampai saat ini masih banyak didominasi oleh usaha dengan: Read the rest of this entry »

Selamat datang di Blog Mahasiswa IPB. Ini adalah postingan pertamamu. Edit atau hapus postingan ini dan mulailah menulis blog sekarang juga!