Pwdb bab 3

BAB 3 FORMAT KAITAN DAN FORMAT FORMULIR DALAM HALAMAN WEB

A. Format kaitan pada halaman web

Ada beberapa cara (format) untuk menampilkan pranala pada halaman web. Jika pengunjung website sedang mengeklik suatu kata atau gambar yang mengandung hyperlink, ia akan diarahkan untuk menuju ke alamat URL yang ada di dalam hyperlink tersebut. Sebuah embedded link (pranala yang tersimpan) adalah salah satu dari beberapa cara yang biasa digunakan dengan tipe/gaya teks khusus. Hyperlink adalah sebuah fungsi khusus untuk menghubungkan setiap masing-masing halaman website satu sama lainnya atau ke website yang lain.

1. Konsep Hyperlink dalam HTML

Hyperlink adalah suatu fungsi yang ada di dalam halaman HTML yang mampu membantu para pembaca menuju informasi lainnya secara singkat. Umumnya, teks yang disisipkan dengan hyperlink bisa dilihat secara mudah perbedaannya dalam suatu slide presentasi ataupun website.

a. Mengenal jenis link 

Link dalam suatu objek dapat berupa teks atau gambar yang dipakai dalam kode HTML untuk menuju dari suatu bagian ke bagian yang lain pada halaman yang sama atau menuju ke halaman (file) yang berbeda.

1). Link absolut

Link absolut adalah link yang mengarah langsung pada website tertentu, di mana sebuah dokumen dikunci pada alamat valid sebuah website dan tidak tergantung pada direktori lokasi dokumen html berada.

2). Link relatif

Link relatif adalah link yang mengarah langsung pada lokasi path atau direktori tujuan yang tersimpan pada web server atau komputer tanpa diawali dengan alamat domain website tersebut.

2. Tag-tag untuk Hyperlink

HTML menggunakan tag <a> untuk keperluan ini link ditulis Dengan<a> yang merupakan singkatan cari anchor. Setiap tag setidaknya memiliki sebuah atribut href. Dimana href berisi alamat yang dituju

a. <a> 

<a> berfungsi dalam mendefinisikan sebuah hyperlink yang digunakan untuk menghubungkan halaman satu ke halaman lain. Tidak semua elemen yang ditulis antara tag <a> menjadi sebuah hyperlink. Pembuatan link dengan tag <a> ini bergantung pada atribut href.

b. <link>

<link> berfungsi untuk menghubungkan dokumen yang bersangkutan dengan sumber file yang berasal dari luar (external).

c. <nav>

Berfungsi untuk mendefinisikan link navigasi 

B. Format formulir pada halaman web

Form dapat digunakan untuk berbagai keperluan, seperti keperluan login, transaksi penjualan, mengumpulkan informasi atau meminta umpan balik dari user, menawarkan barang/jasa secara online, dan sebagainya.

1. Konsep formulir dalam HTML

Form merupakan salah satu bentuk halaman web yang digunakan untuk menerima perintah masukan dari user, yang selanjutnya diolah menggunakan bahasa pemrograman web, baik secara server side scripting menggunakan PHP atau JSP maupun client-side scripting (javascript).

2. Penggunaan tag form 

Form HTML digunakan untuk memilih berbagai macam inputan yang disediakan. Data bisa dimasukkan dalam bentuk input teks, pilihan radio button, check box, dan lain-lain.

1). <button> merupakan tombol yang dapat diklik

2). <Datalist>daftar/list khusus yang didefinisikan dalam elemen tag <input>dan merupakan elemen baru di HTML 5.

3).<fieldsed>group dengan elemen yang berhubungan satu sama lain di dalam form.

4). <form>mendefinisikan untuk form bagi user

5). <input>mendefinisikan kontrol input pada form

6). <keygen>merupakan generator key-pair field untuk form dan termasuk elemen baru di HTML5

7). <label>mendefinisikan label pada tag elemen <input>

8). <Legend>mendefinisikan judul untuk elemen <fieldset >

9). <outgroup>mendefinisikan group option yang berhubungan satu sama lain dalam bentuk drop-down list.

10). <Option>mendefinisikan option pilihan dalam bentuk drop-down list merupakan bagian dari tag elemen

11). <output>merupakan hasil dari suatu perhitungan dan termasuk elemen baru HTML5

12). <Select>merupakan daftar secara drop-down

13). <textarea>mendefinisikan kontrol input berupa Area teks pada form.

a). Elemen form button

Elemen tag <button> pada HTML digunakan untuk menciptakan suatu tombol yang dapat diklik. Fungsi dari elemen ini tergantung pada jenis (atribut type) dari elemen <button> ini. Elemen ini dapat digunakan untuk melakukan submit (mengirim) data ke server jika memiliki atribut type submit, melakukan reset data yang sudah diketik pada formulir jika memiliki atribut reset, dan jika atributnya button akan melakukan tugas yang berhubungan dengan fungsi dari javascript.

Elemen tag <button> ditulis dengan tag pembuka <button> dan tag penutup </button>. Anda dapat menyisipkan teks untuk memberikan label pada tombol tersebut diantara tag pembuka dan tag penutup. Anda juga dapat menyisipkan elemen <span>, <img> (gambar) ataupun paragraf di antara kedua tag tersebut untuk mempercantik tampilan pada tombol.

b). Elemen form reset dan input submit 

Format tag HTML untuk form reset adalah ;

<INPUT TYPE=RESET>, sedangkan format tag HTML input submit diuraikan sebagai berikut

<Input type=submit>

<input type=name=name>

3. Form option

<Form> merupakan formulir yang digunakan sebagai perantara dalam memasukkan data ke server. Elemen form harus membungkus seluruh elemen masukan informasi agar dapat dibaca oleh aplikasi web.

a. Atribut 

Penulisan form dilengkapi oleh atribut berjumlah sembilan dan dari sembilan atribut, hanya accept yang tidak mendukung pada penerapan HTMLS.

1). Accept

Atribut "accept" mendefinisikan MIME yang diizinkan oleh server yang memuat script untuk memproses form.

2). Accept-charset

Atribut "accept-charset" merupakan atribut untuk menentukan karakter tertentu yang akan digunakan untuk pengiriman formulir. Nilai default string yang diterima adalah "UNKNOWN" karena menunjukkan pengodean sama dengan pengodean dokumen yang mengandung tag elemen <form>.

3. Action

Atribut action digunakan untuk mengirimkan data form ketikaform disubmit atau dapat dikatakan Aksi yang muncul ketika user menekan tombol tertentu.

4. Auto complete

Atribut autocomplete memungkinkan form dapat menentukan untuk memiliki autocomplete on atau off. Atribut autocomplete merupakan atribut baru di HTML5.

5. Method

Atribut method adalah atribut yang wajib dicantumkan saat penulisan <form> karena atribut method merupakan metode untuk pengiriman data ke tujuan, yaitu Get dan Post.

6. Enctype 

Atribut enctype merupakan atribut yang menentukan bagaimana dan form dikirim ke server

7. Name

Format umum penulisan atribut name adalah : <form name="text">dengan nilai dari atribut name berupa text

8. Novalidate 

Atribut novalidate tidak support ketika dijalankan pada browser Internet Explorer versi 9 ke bawah dan safari

9. Target

Atribut target menentukan nama atau keyword yang mengindikasikan dimana respons dari form akan ditampilkan, misalnya tab, window, atau dalam frame.

b. Jenis formulir 

Beberapa hal yang berhubungan dengan jenis format formulir 

1). Format formulir horizontal

Untuk membuat tampilan form tertata rapi, umumnya digunakan elemen HTML <table>. Secara umum, layout dari form adalah layout horizontal, yakni layout setiap input ditempatkan di samping dari label keterangan masing-masing input.

2). Format formulir vertikal

Halaman web berbasis mobile tentu memerlukan form dalam menerima input dari user untuk menyesuaikan ukuran perangkat yang bersangkutan. Oleh sebab itu, layout dari halaman web harus disesuaikan, termasuk untuk layout dari sebuah form.

4. Metode get dan post

Protokol HTTP menyediakan dua metode dalam melakukan permintaan pengiriman data bentuk HTML, yaitu metode GET dan metode POST.

a. Metode GET

Metode GET identik dengan metode yang digunakan oleh browser untuk meminta server mengirim kembali resource yang diberikan.

b. Metode POST 

Motode post sedikit berbeda dengan get karena pada post akan mengirimkan server permintaan respons dengan mem-perhitungkan data yang tersedia.

5. Tipe² inputan dalam format

Form HTML digunakan untuk memilih pelbagai macam data yang disediakan dalam bentuk text area, input teks, pilihan radio button, check box, dan lain-lain. Bentuk input tersebut dikemas elemen dalam tag-tag form.

a. Komponen tertera multiline 

Komponen textarea merupakan area untuk menyimpan text baru atau bisa dikatakan sebuah komponen HTML yang digunakan untuk menampilkan text dalam bentuk dan format text.

b. Komponen input text password

Komponen input text password bertanggung jawab untuk memasukkan data password. Di samping tipe text, terdapat pula tipe input teks yang lain, yakni 'password'. Input tipe 'password' ini akan menghasilkan input dengan notasi .. Input tipe 'password' biasanya digunakan oleh user di dalam form login.

c. Komponen input text

Komponen input text merupakan komponen untuk memasukkan data text ke server dalam bentuk textfield.

d. Form menggunakan input hidden

Formatnya adalah <input type=hidden name=value=value>.

6. Link dalam form 

Penggunaan link pada HTML, yaitu untuk menghubungkan dokumen HTML tersebut ke halaman lain yang merupakan alamat tujuan. Link digunakan sebagai penghubung antara satu halaman dengan halaman lainnya. Link merupakan teks atau gambar yang terkait dengan suatu alamat tertentu.

a. Penggunaan Tag <a>

Penggunaan link pada dokumen HTML ditandai dengan penggunaan elemen anchor, yaitu tag berpasangan <a>. </a>. Pada browser, link umumnya ditandai dengan teks berwarna biru yang memiliki garis bawah. Jika mengeklik teks atau gambar yang mengandung link, path dari link tersebut akan dibuka baik di tab itu. sendiri maupun di tab baru. Adapun atribut yang ada pada tag <a> dapat

b. Atribut Id

Atribut href pada tag <a> digunakan untuk menyatakan suatu file tujuan. Path tujuan HTML yang berada di dalam tag <a> dapat diikuti dengan menggunakan atribut id yang digunakan untuk membawa pembaca ke suatu bagian tertentu dalam dokumen.

c. Atribut title Selanjutnya, jika menggunakan atribut title, akan ditampilkan isi title tersebut sebagai tooltip yang akan muncul jika mengarahkan kursor pada link yang valid.

Sumber : Buku Paket PWdPB Kelas XI program studi Rekayasa perangkat lunak Penulis Patwiyanto S.Kom , Sri wahyuni S.Kom dan Sumari Agus Prasetyo S.kom penerbit ANDI (Kurikulum 2013 Revisi & Terbit 2017)