Formulir Pendaftaran Online
Proyek ini adalah proyek ketiga untuk Kursus Pengembangan Frontend Team Treehouse.
Dalam proyek ini, Anda akan membangun formulir pendaftaran yang responsif dan ramah seluler menggunakan berbagai jenis input dan atribut Formulir HTML. Menggunakan file mockup yang disediakan, Anda akan membangun versi seluler dan desktop dari formulir menggunakan kueri media, dan pendekatan "mobile-first".
Tautan langsung untuk proyek ini dapat ditemukan di sini
Tangkapan layar
Instruksi
- Bangun tata letak menggunakan desain pertama seluler :
- Pastikan file HTML menyertakan tag meta viewport di kepala dokumen, lihat Mengkonfigurasi Viewport untuk memahami mengapa dan bagaimana menambahkan tag ini.
- Lihatlah mockup yang disediakan (Mobile-Form.png) dan tambahkan konten yang sama ke file index.html Anda.
- Buat struktur formulir: Hanya gunakan satu tag
<form> . Tag <form> harus berisi semua elemen formulir. Tambahkan fieldset dan legend untuk masing -masing bagian berikut:
- Bagian "Informasi Kontak" dari Halaman, dan
- Bagian "Newsletter" halaman
- Pastikan Anda menyertakan tipe bidang formulir berikut:
- input teks
- input email
- input telepon
- Pilih Menu
- kotak centang
- tombol radio
- TexTarea
- Kirim tombol
- Bidang bentuk harus menyertakan atribut berikut:
-
input : Harus menyertakan Atribut id , type dan name . -
select DAN textarea : Harus menyertakan atribut id dan name .
- Tambahkan label ke setiap elemen bentuk menggunakan tag HTML
<label> . Teks di dalam label harus cocok dengan nama -nama bidang formulir di mockup.
- Pastikan Anda dengan benar memasangkan setiap elemen
<label> dengan kontrol formulir yang sesuai melalui atribut for . Lihat tautan di atas untuk contoh. Dan jangan lupa tentang elemen TextArea. Yang membutuhkan label yang berfungsi juga.
- Gunakan atribut
placeholder bidang input untuk menambahkan teks "diperlukan" ke:
- bidang nama lengkap
- bidang alamat email
- Setelah Anda memiliki segalanya untuk tata letak seluler, gunakan kueri media untuk menambahkan breakpoint untuk menyesuaikan tata letak untuk tablet dan layar desktop yang lebih luas.
- Cocokkan desain seperti yang harus dilihat pada tablet atau desktop yang selebar 768px menggunakan mockup desktop-form.png.
- Gunakan pendekatan mobile-first dengan menulis kueri media Anda menggunakan properti
min-width di CSS Anda.
- Setelah semua breakpoint Anda ada, periksa dua tata letak Anda cocok dengan kedua mockup.
- Periksa apakah posisi teks label cocok dengan kedua mockup:
- Ponsel : Teks harus di atas bidang formulir.
- Desktop : Teks harus ke sisi kiri bidang formulir.
Gunakan font google untuk teks
Tambahkan :focus status ke formulir saat pengguna mengklik atau tab ke bidang teks.
Pastikan untuk memeriksa kode Anda valid dengan menjalankannya melalui validator HTML dan CSS.
- Tautan ke validator dapat ditemukan di sumber daya proyek. Ini akan membantu Anda menemukan kesalahan yang mungkin ada dalam kode Anda.
- Ada beberapa pengecualian yang tidak perlu Anda perbaiki:
- Jangan khawatir tentang peringatan apa pun, kami hanya perlu Anda memeriksa kesalahan yang mungkin ada.
- Jika CSS Validator Bendera Penggunaan Calc, awalan vendor atau elemen semu/kelas pseudo kesalahan ini harus diabaikan.
- Jika Bendera Validator HTML Penggunaan pipa ('|') di Google Font Links/URL Kesalahan ini juga dapat diabaikan.
