Pada materi sebelumnya kita sudah mempelajari cara membuat halaman konten sederhana, kemudian untuk melengkapi bagian situs yang kita buat ada satu halaman yang cukup penting untuk kita letakkan pada halaman situs kita yaitu formulir.
Mungkin ada beberapa jenis form pada situs website, namun secara umum form berisi tentang pertanyaan untuk user yang di tujukan kepada kita sebagai pemilik situs, user bisa menanyakan tentang konten situs kita atau produk yang ada di situs kita atau mungkin untuk memberikan keritik dan saran tentang situs kita.
Sekarang kita lanjut cara membuat formulir pendaftaran.
Pertama kita akan membuat class dengan nama contact-form, pada materi sebelumnya code ini sudah tersedia, Kemudian tambahkan didalamnya tag <h3> dengan nama class section-title dan tambahkan teks "Hubungi Kami. Selanjutnya di bawahnya kita buat tiga paragraf dengan teks email, pesan dan bidang yang wajib diisi contohnya pada gambar dibawah:
Dan hasilnya pada gambar di bawah:
Kemudian untuk mengisi teks dari email kita tambahkan tag <input> tujuannya untuk menerima satu baris teks, tag ini tidak membutuhkan tag penutup.
Selanjutnya untuk menambahkan teks pesan kita tambahkan tag <textarea> tujuannya untuk menerima beberapa baris teks, karna pesan membutuhkan banyak teks.
Terakhir kita akan membuat tombol Submit atau Kirim, caranya adalah dengan menambahkan atribut type ke element <input> jika kita ingin mengubah nama tombol tersebut caranya dengan menambahkan Atribut Nilai yaitu value, dengan atribut ini kita bisa mengubah nama tombol menjadi nama yang kita inginkan seperti kirim.
Kemudian pada CSS kita perlu mengetahui bahwa kita bisa menerapkan CSS yang sama ke beberapa selector, caranya adalah dengan memisahkan selector dengan koma (,) dalam hal ini kita akan menerapkan CSS yang sama untuk tag <input> dan tag <textarea>
Sekarang mari kita terapkan di text editor.
Hal yang perlu kita tambahkan pada code html
Pertama tambahkan tag <input> dibawah "Email (Wajib Diisi)"
Kemudian tambahkan tag <textarea> di bawah "Pesan (Wajib Diisi)"
Kemudian pada pargaraf ketiga "Bidang Wajib Diisi" tambahkan di bawahnya tag <input> dengan dengan type submit dan class contact-submit dan nama value kirim, contoh <input type="submit" class="contact-submit" value="kirim">.
Selanjutnya pada CSS kita perlu mengubah desain formulir, perlu diingat bahwa didalam CSS menerapkan tag tidak perlu menambahkan titik di awal. Yang perlu kita rubah adalah
CSS pada tag <input> dan <textarea>
lebar: 400px
margin atas: 10px
margin bawah: 30px
padding: 20px
ukuran font: 20px
ketebalan: 1px
style: solid
warna: red
CSS pada class contact-submit
warna latar belakang: #a9a9a9
warna: rgb(56, 43, 43)
kalian bisa merubah ukuran dari CSS sesuai dengan keinginan, CSS yang saya tambahkan di atas adalah sebagai contoh.
Sekarang buka text editor dan tambahkan code di bawah:
Code HTML
Code CSS
Kemudian inilah hasil dari tampilan situs yang sudah kita buat mulai dari materi sebelumnya sampai materi ini:
Selamat!! Sekarang kita sudah berhasil membuat tampilan situs sederhana dengan menggunakan bahasa HTML & CSS. Ini adalah tahapan awal untuk kita dalam membuat situs menggunakan bahasa HTML & CSS.
Kita perlu mempelajari lebih lanjut lagi, pada webiste ini andyusuf.site paling tidak kita perlu mempelajari empat tahap dalam mengembangkan kemampuan coding terutama dalam bahasa HTML & CSS, sekarang kita sudah mempelajari tahap pertama pada tahap kedua kita akan mempelajari sejumlah teknik advance HTML & CSS untuk membuat halaman web yang modern.
Terima kasih dan Semangat Belajar.
Hallo teman-teman, terima kasih sudah membaca tulisan saya, semoga apa yang saya tulis di blog ini bisa bermanfaat. 
Hello, perkenalkan saya Andri Yusuf, Saya adalah bagian yang mengelola website ini. website ini saya buat sejak masih kuliah di bagian teknik informatika. Bagi saya menulis diblog adalah salah satu cara untuk menyimpan sekaligus berbagi ilmu yang pernah didapat. Terima Kasih telah berkunjung di Blog saya, mohon maaf jika ada kekurangan dalam penyampaian isi blog ini dan senang jika bisa berteman dengan anda. Sampai Jumpa!
Tidak ada komentar:
Posting Komentar