FORM HTML

FORM HTML

Form dalam html adalah input atau masukan dari pengguna yang kemudian diproses untuk mendapatkan hasil yang diinginkan pengguna, seperti proses penyimpanan, proses sunting atau edit, proses hapus dan browse. Sintak dari form adalah sebagai berikut:

<form name=”nama_form” Mehode=”post|get” action=”URL”>

.................

<form>

Ket:

1. Nama form adalah nama form yang sedang digunakan

2. Methode adalah metode yang digunakan dalam penyimpanan ke dalam server.

3. Action adalah alamat yang digunakan untuk pemrosesan input form di dalam server

Form memiliki kontrol form yang digunakan untuk mengklasifikasikan input atau masukan dari pengguna.

Kontrol form terdiri dari :

1. kontrol text

2. Kontrol Password

3. Kontrol radio button

4. Kontrol checkbox

5. Kontrol Select

6. Kontrol Text Area

7. Kontrol button

8. Kontrol Image

1.  Kontrol Text

Kontrol text digunakan untuk memberikan input atau masukan berupa kotak isian. Sintaknya dalah sebgai berikut :

<input type=”text” [properti]>

Tag <INPUT>

Tag <INPUT> digunakan untuk membuat komponen-komponen yang digunakan untuk meminta informasi dari user, misalnya kotak teks, kotak pilihan, tombol dan lain-lain. Tag ini tidak memerlukan tag penutup. Tag ini mempunyai beberapa atribut, yaitu :

ATRIBUT KETERANGAN

NAME Mendefinisikan nama dari objek input. Atribut ini harus dituliskank ecuali untuk tipe submit dan clear

SIZE Menentukan ukuran kotak teks

MAXLENGTH Menentukan jumlah maksimum karakter yang dapat dimasukkan pada kotak teks

VALUE Untuk kotak teks, menentukan teks yang tertulis. Untuk check box atau radio, menentukan nilai item yang dipilih. Untuk Submit dan Reset, menentukan teks yang tertulis pada tombol

CHECKED Hanya digunakan untuk check box atau radio. Menentukan pilihan yang

terpilih secara default.

TYPE Menentukan tipe input yang dibuat Tipe input yang dapat dibuat adalah :

-        Text, digunakan untuk membuat kotak teks

-        Password, digunakan untuk membuat kotak teks, tetapi semua karakter akan ditampilkan dengan tanda *.

-        Check Box, digunakan untuk membuat suatu daftar pilihan yang dapat dipilih lebih dari satu.

-        Radio, digunakan untuk membuat suatu daftar pilihan yang hanya dapat dipilih satu saja.

-        Reset, digunakan untuk membuat tombol yang fungsinya untuk menghapus semua isian form yang telah diberikan.

-        Submit, digunakan untuk membuat tombol yang fungsinya untuk mengirimkan data form agar diolah.

2. Kontrol Password

Kontrol password adalah sebuah kontrol html yang penggunaan mirip dengan kontrol text, hanya bedanya pada saat tampilan kontrol text akan tampil dengan text biasa, sedangkan kontrol password akan ditampilkan dengan tanda asteris(*). Sintaknya adalah sebagai berikut :

<input type=”password”[properti]>

3. Kontrol radio

Kontrol radio digunakan untuk menampilkan salah satu pilihan dari satu kumpulan/grup pilihan. Sintaknya adalah sebagai berikut :

<input type=”radio”[properti]>

4. Kontrol checkbox

Kontrol checkbox digunakan untuk memilih beberapa pilihan yang tersedia. Penggunaannya hampir sama dengan kontrol radio, perbedaannya terletak pada pilihan yang dimungkinkan lebih dari satu. Sintaknya adalah sebagai berikut :

<input type=”checkbox”[properti]>

5. Kontrol Select

Kontrol select digunakan untuk membuat sebuah daftar pilihan. Sintaknya adalah sebagai berikut :

<select [properti]>

<option>item 1

<option>item 2

.

.

</select>

6. Kontrol Textarea

Kontrol text area merupakan kontrol text yang dapat menuliskan text lebih banyak karena memiliki ruang/kapasitas lebih besar digandingkan dengan kontrol text. Sintaknya adalah sebagai berikut :

<textarea[properti]>

...isi text....

</textarea>

7. Kontrol Button

Kontrol button digunakan untuk mengontrol suatu aksi atau menjalankan sebuah prosedur/event. Ada tiga type yang termasuk kontrol button, yaitu button, submit dan reset. Button digunakan untuk mengontrol atau menjalankan suatu prosedur atau event dari vbscript, submit digunkaan untuk mengirim data-data ke server (lebih banyak berhubungan dengan pemograman yang berbasis server side seperti ASP), sedangkan reset digunakan untuk menghapus data-data yang ada pada suatu form. Sintaknya adakah sebagai berikut :

<input type=”button”[properti]>

<input type=”submit”[properti]>

<input type=”reset”[properti]>

8. Kontrol Image

Kontrol image digunakan untuk mengelola/mengolah gambar. Sintaknya adalah sebagai berikut :

           <input type=”image”[properti]>

CSS  dalam HTML

Dasar CSS

Untuk dapat mengerti bagaimana menggunakan CSS, terlebih dahulu kita harus mengerti tiga istilah dasar yang digunakan dalam CSS, yaitu selector, property, dan value. Pembahasan mengenai makna dari ketiga istilah tersebut akan dilakukan pada bagian selanjutnya. 

Selector 

Sebagai bahasa yang digunakan untuk memberikan gaya tampilan, CSS menggunakan metode deklaratif untuk menspesifikasikan bagian HTML yang ingin diberikan gaya tampilan. Pemilihan elemen HTML dilakukan dengan menspesifikasikan selector. Kode di bawah memberikan contoh dari sebuah selector, yang dapat digunakan untuk memberikan gaya tampilan terhadap seluruh elemen p yang ada pada dokumen HTML: 

p { 

 ....

 } 

Pada kode di atas, yang dikatakan selector ialah kode “p”. Singkatnya, sebuah selector merupakan seluruh kode yang berada sebelum “{}”. 

Selector yang diberikan pada kode di atas melakukan pemberian gaya pada seluruh elemen p yang ada dalam dokumen. Selain memberikan desain pada seluruh elemen seperti ini, selector juga dapat memberikan desain secara lebih spesifik: melalui klasifikasi, identitas, ataupun berbagai atribut lainnya dari sebuah elemen. Pembahasan selector secara mendalam dapat ditemukan pada bab. 

Property 

Sebuah properti menentukan berbagai parameter desain yang dapat diubah dari sebuah elemen yang dipilih oleh selector. Untuk lebih mudahnya, perhatikan kode di bawah: 

p { color: ...; 

    font-size: ...; 

} 

Pada kode di atas, yang dikatakan property ialah kode yang berada sebelum titik dua (“:”). 

Kegunaan dari kedua properti tersebut tentunya cukup jelas dari nama yang diberikan, yaitu color untuk memberikan warna pada elemen p, dan font-size untuk mengubah ukuran teks. Terdapat sangat banyak properti yang dapat digunakan, tetapi pembahasan mengenai detil pengunaan tiap-tiap properti tidak akan dilakukan pada buku ini. Jika terdapat pengunaan properti baru, penjelasan akan diberikan pada bagian yang relevan.Daftar properti sendiri dapat dibaca di. 

Value 

Value merupakan nilai dari property yang ingin kita berikan. Nilai yang dapat diberikan sendiri berbeda-beda, tergantung dengan jenis property-nya. Misalnya, jika ingin memberikan nilai warna, kita harus memberikan nilai dalam format #RRGGBB (kombinasi nilai heksa merah-hijau-biru yang biasa digunakan pada program pengolah grafis seperti Photoshop). 

Ketika ingin memberikan nilai ukuran, kita dapat memberikan nilai dalam format nilai px atau nilai em. Untuk lebih jelasnya, kode berikut memberikan contoh value dari properti yang ada pada kode sebelumnya: 

p { color: #FFFF00; 

    font-size: 50px; 

} 

Sintaks CSS 

Setelah mengerti makna dari Property, Value, dan Selector, kita dapat melihat bahwa sintaks dari CSS adalah seperti yang ditampilkan pada gambar berikut: 

Sintaks CSS

Ingat, bahwa pada satu selector dapat diaplikasikan banyak property, dan masing-masing property akan memiliki value yang berbeda-beda, bergantung kepada apa yang direpresentasikan oleh property tersebut. Penyingkatan Nilai dari Property Ketika memberikan nilai untuk property, sintaks CSS memungkinkan kita untuk menyingkat nilai yang diberikan. Untuk lebih jelasnya, perhatikan kode berikut: 

/* Bentuk Panjang 

*/ 

p {  

margin-top : 10px; 

margin-right : 20px; 

margin-bottom : 10px; 

margin-left : 20px; } 

/* Bentuk Singkat (1) 

*/ 

p { margin: 10px 20px;  

}

 /* Bentuk Singkat (2) 

*/ 

p { margin: 10px; 

} 

Pada bentuk panjang pada kode di atas, nilai margin atas, kanan, bawah, dan kiri diberikan satu per satu, sesuai dengan property yang ada. Penulisan ini dapat kita singkat dengan menggunakan hanya property margin dan dua value, yang secara otomatis akan mengisikan nilai top dan right, kemudian bottom dan left. Bentuk singkat kedua memberikan nilai keempat margin dengan satu value. 

Perlu diingat bahwa tidak semua property dapat diisikan dengan menggunakan penulisan singkat ini. Beberapa (tetapi tidak semua) property yang dapat dituliskan secara singkat misalnya: margin, padding, border, dan background. Untuk mendapatkan informasi lebih lanjut mengenai property tersebut silahkan baca dokumentasi property CSS yang bersangkutan. 

Mengimplementasikan CSS pada HTML 

Setelah HTML selesai dituliskan, kita dapat mereferensikan CSS kepada HTML yang ada agar desain yang dispesifikasikan oleh CSS dapat diaplikasikan pada HTML. Terdapat tiga cara untuk memberikan referensi CSS, yaitu: Referensi ke File Eksternal Kita dapat memberikan referensi ke sebuah file CSS yang berada di luar HTML. 

Cara referensi CSS seperti ini seringkali dianggap sebagai best practice dalam pengembangan web. Penulisan CSS pada Elemen Head CSS yang ingin diaplikasikan pada sebuah dokumen HTML dapat juga dituliskan pada bagian head dari sebuah dokumen. 

Penulisan CSS seperti ini tidak disarankan, karena umumnya elemen-elemen yang ada dalam sebuah dokumen akan digunakan kembali pada dokumen lain. Penulisan CSS langsung pada bagian head akan menyebabkan elemen-elemen yang berulang harus dituliskan ulang pada dokumen lain juga. CSS di dalam Atribut style pada Elemen Menuliskan CSS di dalam atribut style pada elemen HTML (atribut ini dimiliki oleh semua elemen) merupakan cara terakhir, yang juga tidak disarankan karena penulisan seperti ini akan “mengotori” kode HTML. 

HTML dibuat dengan tujuan untuk memberikan makna semantik untuk konten, bukan desain. Begitupun, metode ini biasanya digunakan untuk manipulasi gaya yang dilakukan secara dinamis, melalui Javascript (yang tidak mengotori kode HTML, karena biasanya atribut baru diisikan setelah HTML selesai dibaca oleh browser). Untuk lebih jelasnya, kode di bawah memberikan contoh cara melakukan referensi CSS pada sebuah dokumen HTML: 

Berita Utama

Elemen h1 digunakan untuk menandakan sebuah header dari teks (h1 == header 1). Konten teks ini sendiri berada di dalam sebuah paragraf, yang ditandai oleh elemen p.

Paragraf kedua.

Mari kita coba jalankan kode yang ada pada kode di atas! Sebelum menjalankan kode tersebut, tentunya kita harus membuat file style.css yang direferensikan oleh elemen link pada kode di atas terlebih dahulu. Simpan kode di atas pada sebuah file bernama referensi-css.html, dan kemudian buat sebuah file baru dengan nama style.css di dalam direktori yang sama dengan referensi-css.html. Isikan file style.css dengan kode berikut: 

p { font-size: 50px;

 } 

Sedikit catatan untuk mereferensikan file CSS eksternal, pada kode di atas, file style.css harus berada di dalam direktori yang sama karena atribut href diisikan tanpa penunjuk direktori. Jika misalnya kita ingin menyimpan file pada direktori yang berbeda, maka kita dapat menambahkan direktori sebelum nama file. Misalnya jika file disimpan dalam subdirektori “style”, kita dapat mengisikan style/style.css pada atribut href. Setelah selesai menyimpan referensi-css.html dan style.css, jalankan referensi-css.html dan lihat hasilnya, seperti pada gambar berikut: Hasil Eksekusi referensi-css.html Perhatikan bagaimana CSS mempengaruhi penampilan dari HTML, hanya dengan sedikit deklarasi kode. Gambar berikut menunjukkan perbandingan dokumen HTML yang memiliki CSS dan tidak memiliki CSS: 

Perbandingan Dokumen HTML dengan CSS dan Tanpa CSS Perhatikan bagaimana setiap CSS mempengaruhi elemen-elemen yang bersangkutan pada gambar Perbandingan Dokumen HTML dengan CSS dan Tanpa CSS. 

Teks pada elemen h1 berubah menjadi warna merah karena CSS yang berada pada bagian atas dokumen, paragraf memiliki teks yang sangat besar (50px) karena CSS dari file style.css, dan paragraf kedua (dan hanya paragraf kedua) dicetak tebal karena CSS yang berada di atribut style pada paragraf kedua. Ketiga CSS yang terpisah tersebut berjalan dengan baik. Yang juga perlu diingat, cara terbaik dalam mereferensikan CSS ialah dengan referensi ke file eksternal. Cara ini memungkinkan kita hanya menggunakan satu file CSS untuk seluruh web yang dikembangkan. Perubahan desain juga dapat dilakukan dengan mudah, hanya mengubah satu buah file saja. Pengguna juga hanya perlu melakukan sedikit download (karena seluruh file berada di satu tempat, dan seringkali browser akan menggunakan teknologi caching untuk tidak melakukan download berulang kali pada file yang sama).

Cara Membuat Frame HTML

Frame adalah teknik yang digunakan untuk membagi window menjadi beberapa bagian. Setiap bagian kita isi dengan sebuah halaman web yang sesuai. Keuntungan dari penggunaan frame adalah mudahnya pengaturan hubungan antar satu halaman dengan halaman lainnya.
Frame dapat digunakan untuk berbagai macam keperluan, antara lain:
1. Membuat suatu daftar isi pada suatu sisi frame, sedangkan sisi frame yang lain menampilkan isinya
2. Membuat suatu judul atau logo yang tidak berubah-ubah pada suatu sisi frame, sedangkan sisi frame yang lain menampilkan isis dokumen
3. Membuat suatu dokumen tanya jawab, dll.

Untuk membuat halaman web yang menggunakan frame kita perlu membuat beberapa file html, yaitu:
• Sebuah pendefinisi file. File tersebut kita butuhkan untuk menampilkan halaman web dengan bentuk frame
• Beberapa file pengisi frame, yang jumlahnya tergantung dari berapa bagian yang akan kita buat pada frame tersebut
Sama halnya seperti membuat tabel, dalam mendefinisikan frame, hal pertama yang harus dilakukan adalah mendefinisikan dahulu bentuk frame yang akan dibuat, misalnya bentuk frame pada contoh berikut:




Untuk membuat frame seperti Frame A2, sebuah halaman kita bagi menjadi dua bagian terlebih dahulu secara horizontal seperti Frame A1, kemudian dibagi lagi hingga seperti Frame A2. Demikian pula untuk membuat Frame B2 harus melalui bentuk Frame B1. Urutan ini akan sangat memengaruhi bentuk frame yang akan kita bangun.
Tag untuk membuat frame diawali dengan menggunakan dan diakhiri dengan . Pada file pendefinisi frame kita tidak lagi memerlukan tag , sehingga struktur dasar pendefinisi frame adalah sebagai berikut:


Pada file pendefinisi frame ini, setiap kita akan membagi menjadi beberapa bagian, maka kita gunakan tag . Atribut-atribut yang dapat menyertai tag ini adalah:
• BORDER, untuk menentukan tebal garis pemisah antar frame
• ROWS, untuk menentukan berapa baris bagian yang akan dibentuk
• COLS, untuk menentukan berapa kolom yang akan dibentuk

Jika kita tidak akan membagi lagi frame yang ada, maka selanjutnya kita definisikan frame tersebut dengan tag . Atribut-atribut yang dapat menyertai tag ini adalah:
• NAME, untuk memberi identitas/nama bagi frame tersebut. Fungsinya adalah ketika frame tersebut dijadikan target untuk menampilkan suatu halaman.
• SRC, menunjukkan file yang mengisi frame tersebut.
• SCROLLING, untuk menunjukkan apakah kita akan menggunakan scrolling bar di samping atau di bawah halaman, opsi inputnya adalah "YES, NO atau AUTO".
Yang perlu diperhatikan saat membuat file pendefinisi frame adalah bahwa kita telah mempunyai file yang akan digunakan untuk mengisi frame tersebut.