FORMAT KAITAN DAN FORMAT FORMULIR PADA HALAMAN WEB

bila

pada hari ini saya akan membahas tetang format kaitan dan format formulir pada halaman web, sedikit info dokumen HTML memiliki kemampuan yang membuat mereka dapat terkait dengan dokumen lain, hal itu terjadi karena adanya penghubung yaitu link atau hyperlink.

Apa itu link?





Link merupakan suatu objek  berupa gambar atau teks yang nantinya dapat menghubungkan sebuah halaman web ke halaman web lainnya , elemen gambar atau teks ini dapat di klik , yang nantinya akan membuka halaman lain sesuai URL yang diberikan.

Link pada HTML di tandai dengan tag<a> (Anchor) dimana link ini harus memiliki atribut href  agar nantinya dapat menentukan URL tujuan dari link. Pada web link biasanya diberi garis bawah dengan warna font biru, adapun atribut-atribut untuk mengatur warna link. berikut atribut-atributnya:

 


salain itu ada juga atribut link , diantaranya:


selanjutnya mari kita mengenal tentang jenis -jenis link:
link di bagi menjadi dua yang  dibedakan dari terhubungnya link pertama denga link tujuan 
  • Link Relatif  
yaitu link yang tertuju pada dokumen lain yang masih berada pada satu web yang sama dengan cara memberikan nama file/dokumen yang bersangkutan.
  • Link Absolut
yaitu link yang memungkinkan kita berpindah dari halaman web yang satu dengan halaman lainnya. alamat link absolut di tulisakan secara lengkap  contoh : "http://www" .

contoh sintaks membuat link pada html

<html lang="en">
    <head>
        <title>Membuat link di html</title>
    </head>
    <body>
        <p>Sumber tertera di bawah ini:
            <a href="belajarpintar.html">belajar pintar</a>
        </p>
    </body>
</html>


hasilnya akan seperti ini



Format Formulir Pada Halaman Web

form atau formulir biasanya digunakan untuk keperluan login, transaksi, mengumpulkan informasi atau meminta umpan balik yang nantinya akan diisi oleh pengguna menggunakan data.
Pada Formulir ada dua format atribut yang mendukung di antaranya.
  • Action 
Untuk menentukan tujuan atau aksi sebuah tombol pada formulir yang akan dijalankan.
  • Method
Menentukan teknis penyampaian informasi setelah tombol dijalankan dengan tujuan mengakses atau mengirim sebuah informasi.

Element-Eelement pada form

untuk membuat pengimputan sebuah data diperlukannya atribrut atau elemen, berikut atribut-atributnya:
atribut
  • Element input
   Input Type Text
Digunakan untuk menginput text biasa, pada form biasanya di gunakan untuk meminta data seperti username. contoh syntax:
        <input type="text" name="username ">kolom ini isinya username </input>

Input Type Password
Input password sama dengan input text pada umumnya tapi saat pengguna menginput passwordnya text tidak terlihat. Contoh syntax
        <input type="password" name="password"> ini password</input>

Input Type Date
Input ini berfusngsi untuk menginput, tanggal dan waktu pada formulir, contoh syntax
        <input type="date" name="date"> ini tanggal</input>
  • tag <textarea>
mirip dengan input text namun jauh lebih besar dan mnggunakan banyak baris
 berikut atribut dari textarea


  • tag<select>
berguna untuk inputan yag tersedia,tag select merupakan inputan agar user memilih pilihan yang tersedia, contoh syntax:
<td width="20%">Program Keahian</td>
            <td><select name="Jurusan">
                <option value="TKJ">Teknik Komputer dan Jaringan</option>
                <option value="RPL">Rekayasa Perangkat Lunak</option>
                <option value="MM">MultiMedia</option>
                <option value="Sija"> Sistem Informasi dan Jaringan Aplikasi</option>
            </select>
            </td>

Jenis-Jenis Formulir

  • Format Formulir Harizontal
layout dari form adalah layout harizonta, yakni setiap layout ditempatkan di samping dari label keterangan masing-masing input.

Contoh coding formulir harizotal

  • Format Formulis Vertikal
Format form vertikal biasa digunakan pada aplikasi mobile karena sesuai dengan karakteristik layar yang tidak terlalu besar.
 

Pembuatan form 

<html>
    <head>
        <title>Fromulir harizontal</title>
    </head>
    <body>
        <h5 align="center"> PENDATAAN SISWA SMK PROGRAM KEAHLIAN IT</h5>
<form method="post">
    <table border="0" widht="75%">
        <tr>
            <td widht="20%">NIS</td>
            <td> <input type="text" name="NISN" size="11"></td>
        </tr>
        <tr>
            <td widht="20%">Nama Peserta Didik</td>
            <td> <input Type="text" name="Nama Peserta Didik" size="25"></td>
        </tr>
        <tr>
            <td width="20%">Alamat</td>
            <td> <input Type="text" name="Alamat" size="40"></td>
        </tr>
        <tr>
            <td width="20%">Jenis kelamin</td>
            <td><input Type="radio" name="Jenkel" checked value="laki2">laki-laki
                <input Type="radio" name="Jenkel" checked value="perempuan">perempuan
            </td>
        </tr>
        <tr>
            <td width="20%">Program Keahian</td>
            <td><select name="Jurusan">
                <option value="TKJ">Teknik Komputer dan Jaringan</option>
                <option value="RPL">Rekayasa Perangkat Lunak</option>
                <option value="MM">MultiMedia</option>
                <option value="Sija"> Sistem Informasi dan Jaringan Aplikasi</option>
            </select>
            </td>
        </tr>
        <tr>
            <td width="20%">Keterangan Penerima KJP</td>
            <td><input Type="checkbox"> Sudah Menerima</td>
            </tr>
            <tr>
                <td></td>
            <td><input Type="checkbox"> Belum Menerima</td>
            </tr>
            <tr>
                <td></td>
            <td><input Type="checkbox"> Tidak termasuk kategori penerima</td>
        </tr>
        <td></td>
        <td><input type="submit" value="simpan"> <input type="reset" value="batal"></td>
    </table>

</form>
       
    </body>
</html>




 Referensi:

Buku Pemograman Web dan Perangkat Bergerak SMK/MAK 11 (Patwiyanto,Sri Wahyuni, Sumari Agus)




0 Komentar