Formulir adalah salah satu bagian terpenting dari web. Tanpa mereka, tidak akan ada cara mudah untuk mengumpulkan data, mencari sumber daya, atau mendaftar untuk menerima informasi berharga
Anda dapat menyematkan formulir di situs web dengan elemen HTML <input type="password" placeholder="Enter your password" /> 3. Di dalam elemen form, beberapa input bersarang. Input ini juga dikenal sebagai kontrol formulir
Dalam tutorial ini, kita akan menjelajahi elemen formulir HTML, berbagai jenis input yang diperlukan, dan cara membuat tombol kirim dengan data yang dikirimkan
Pada akhirnya, Anda akan mengetahui cara kerja formulir dan Anda akan dapat membuatnya dengan percaya diri
Sintaks Formulir HTML Dasar
<form action="mywebsite.com" method="POST"> <!--Input of any type and textareas goes in here--> </form> _Jenis Input Formulir HTML
Anda menggunakan tag <input type="password" placeholder="Enter your password" /> 4 untuk membuat berbagai kontrol formulir di HTML. Ini adalah elemen sebaris dan mengambil atribut seperti <input type="password" placeholder="Enter your password" /> 5, <input type="password" placeholder="Enter your password" /> 6, <input type="password" placeholder="Enter your password" /> 7, <input type="password" placeholder="Enter your password" /> 8, <input type="password" placeholder="Enter your password" /> 9, dan seterusnya. Masing-masing memiliki nilai khusus yang mereka ambil
Atribut <input type="password" placeholder="Enter your password" /> 9 penting karena membantu pengguna memahami tujuan bidang input sebelum mereka mengetik apa pun
Ada 20 jenis masukan yang berbeda, dan kita akan melihatnya satu per satu
Ketik Teks
Jenis input ini mengambil nilai "teks", sehingga menghasilkan satu baris input teks
<input type="text" placeholder="Enter name" /> _Masukan dengan jenis teks terlihat seperti tangkapan layar di bawah ini
Ketik kata sandi
Sesuai namanya, input dengan jenis kata sandi membuat kata sandi. Secara otomatis tidak terlihat oleh pengguna, kecuali jika dimanipulasi oleh JavaScript
<input type="password" placeholder="Enter your password" />Ketik Email
Masukan apa pun dengan jenis email menentukan bidang untuk memasukkan alamat email
<input type="email" placeholder="Enter your email" />Ketik Nomor
Jenis masukan ini memungkinkan pengguna memasukkan angka saja
<input type="number" placeholder="Enter a number" />Ketik Radio
Terkadang, pengguna harus memilih satu dari banyak pilihan. Bidang input dengan atribut tipenya disetel ke "radio" memungkinkan Anda melakukan ini
<input type="radio" />Ketik Kotak centang
Jadi, dengan jenis masukan radio, pengguna akan diizinkan untuk memilih salah satu dari banyak pilihan. Bagaimana jika Anda ingin mereka memilih opsi sebanyak mungkin?
<input type="checkbox" />Ketik Kirim
Anda menggunakan jenis ini untuk menambahkan tombol kirim ke formulir. Ketika pengguna mengkliknya, secara otomatis mengirimkan formulir. Dibutuhkan atribut nilai, yang mendefinisikan teks yang muncul di dalam tombol
<input type="submit" value="Enter to Win" />Tombol Ketik
Input dengan tipe yang diatur ke tombol membuat tombol, yang dapat dimanipulasi oleh tipe event listener onClick JavaScript. Itu membuat tombol seperti jenis input pengiriman, tetapi dengan pengecualian bahwa nilainya kosong secara default, jadi harus ditentukan
<input type="button" value="Submit" />Ketik Berkas
Ini mendefinisikan bidang untuk pengiriman file. Saat pengguna mengkliknya, mereka diminta untuk memasukkan jenis file yang diinginkan, yang mungkin berupa gambar, PDF, file dokumen, dan sebagainya.
<input type="file" />Hasil dari jenis input file terlihat seperti ini
Ketik Warna
Ini adalah tipe input mewah yang diperkenalkan oleh HTML5. Dengan itu, pengguna dapat mengirimkan warna favorit mereka misalnya. Hitam (#000000) adalah nilai default, tetapi dapat diganti dengan menyetel nilai ke warna yang diinginkan
Banyak pengembang telah menggunakannya sebagai trik untuk memilih nuansa warna berbeda yang tersedia dalam format RGB, HSL, dan alfanumerik
<input type="text" placeholder="Enter name" /> _0Ini adalah hasil dari input jenis warna
Ketik Cari
Input dengan tipe pencarian mendefinisikan bidang teks seperti halnya tipe input teks. Tapi kali ini tujuannya hanya untuk mencari info. Ini berbeda dari mengetik teks, tombol batal muncul setelah pengguna mulai mengetik
<input type="text" placeholder="Enter name" /> _1Ketik URL
Saat atribut type dari tag input disetel ke URL, ini menampilkan bidang tempat pengguna dapat memasukkan URL
<input type="text" placeholder="Enter name" /> _2Ketik Telp
Jenis input tel memungkinkan Anda mengumpulkan nomor telepon dari pengguna
<input type="text" placeholder="Enter name" /> _3Ketik Tanggal
Anda mungkin telah mendaftar di situs web tempat Anda meminta tanggal acara tertentu. Situs tersebut mungkin menggunakan input dengan nilai tipe yang ditetapkan hingga saat ini untuk mencapainya
<input type="text" placeholder="Enter name" /> _4Seperti inilah tampilan input dengan tipe tanggal
Ketik Datetime-local
Ini berfungsi seperti tanggal tipe input, tetapi juga memungkinkan pengguna memilih tanggal dengan waktu tertentu
<input type="text" placeholder="Enter name" /> _5Ketik Minggu
Jenis input minggu memungkinkan pengguna memilih minggu tertentu
<input type="text" placeholder="Enter name" /> _6Ketik Bulan
Input dengan jenis bulan mengisi bulan untuk dipilih pengguna saat diklik
<input type="text" placeholder="Enter name" /> _7Textarea
Ada kalanya pengguna perlu mengisi beberapa baris teks yang tidak sesuai dengan jenis input teks (karena ini menentukan bidang teks satu baris)
<input type="email" placeholder="Enter your email" /> _2 memungkinkan pengguna melakukan ini karena mendefinisikan beberapa baris input teks. Dibutuhkan atributnya sendiri seperti <input type="email" placeholder="Enter your email" /> _3 – untuk jumlah kolom, dan <input type="email" placeholder="Enter your email" /> 4 untuk jumlah baris
<input type="text" placeholder="Enter name" /> _8Kotak Pilih Ganda
Ini seperti tombol radio dan kotak centang dalam satu paket. Itu disematkan di halaman dengan dua elemen – elemen <input type="email" placeholder="Enter your email" /> 5 dan <input type="email" placeholder="Enter your email" /> 6, yang selalu bersarang di dalam <input type="email" placeholder="Enter your email" /> 5
Secara default, pengguna hanya dapat memilih salah satu opsi. Namun dengan banyak atribut, Anda dapat membiarkan pengguna memilih lebih dari satu opsi
<input type="text" placeholder="Enter name" /> _9Cara Memberi Label Input HTML
Menetapkan label untuk membentuk kontrol adalah penting. Ketika mereka terhubung dengan benar ke bidang input melalui atribut <input type="email" placeholder="Enter your email" /> 8 dan atribut <input type="email" placeholder="Enter your email" /> 9 input, lebih mudah bagi pengguna untuk menggunakannya karena mereka cukup mengeklik label itu sendiri untuk mengakses input
Cara Kerja Formulir HTML
Saat pengguna mengisi formulir dan mengirimkannya dengan tombol kirim, data dalam kontrol formulir dikirim ke server melalui <input type="number" placeholder="Enter a number" /> 0 atau <input type="number" placeholder="Enter a number" /> 1 metode permintaan HTTP
Jadi bagaimana server ditunjukkan? . Ini juga membutuhkan atribut metode, di mana metode HTTP yang digunakannya untuk menyampaikan nilai ke server ditentukan
Metode ini bisa <input type="number" placeholder="Enter a number" /> _0 atau <input type="number" placeholder="Enter a number" /> 1. Dengan metode <input type="number" placeholder="Enter a number" /> _0, nilai yang dimasukkan oleh pengguna terlihat di URL saat data dikirimkan. Tetapi dengan <input type="number" placeholder="Enter a number" /> _1, nilai dikirim dalam header HTTP, sehingga nilai tersebut tidak terlihat di URL
Jika atribut metode tidak digunakan dalam formulir, secara otomatis diasumsikan bahwa pengguna ingin menggunakan metode GET, karena ini adalah defaultnya.
Jadi, kapan sebaiknya Anda menggunakan metode <input type="number" placeholder="Enter a number" /> _0 atau <input type="number" placeholder="Enter a number" /> 1? . Gunakan permintaan <input type="number" placeholder="Enter a number" /> _1 saat mengirimkan file atau data sensitif
Proyek Mini. Bangun Formulir Kontak Dasar
Mari ambil apa yang telah kita pelajari tentang formulir dan gunakan untuk membuat formulir kontak sederhana. Saya juga akan memperkenalkan beberapa konsep baru saat kita menyempurnakannya
Ini HTMLnya
<input type="password" placeholder="Enter your password" /> _1Apa yang terjadi dalam kode HTML ini?
Pertama, elemen <input type="password" placeholder="Enter your password" /> _3 membungkus setiap elemen lainnya. Ini memiliki tindakan yang diatur ke <input type="radio" /> 1 server tiruan tempat data formulir akan diterima
Setelah elemen form, setiap elemen lainnya juga dikelilingi oleh elemen <input type="radio" /> 2 dengan tag <input type="radio" /> 3 tepat di bawahnya
Kami menggunakan elemen <input type="radio" /> _2 untuk mengelompokkan input terkait bersama-sama, dan tag <input type="radio" /> 3 berisi keterangan yang menyampaikan tentang formulir tersebut
Input <input type="password" placeholder="Enter your password" /> 6, <input type="radio" /> 7, dan <input type="email" placeholder="Enter your email" /> 2 semuanya dalam <input type="radio" /> 9 dengan kelas form-control. Jadi mereka berperilaku seperti elemen blok, untuk mempermudah penataan dengan CSS
Mereka juga divalidasi dengan atribut <input type="checkbox" /> _0, sehingga formulir gagal dikirimkan saat bidang tersebut kosong atau saat pengguna gagal mengetikkan nilai dalam format yang sesuai
Setelah semua itu, kita akan mendapatkan hasilnya di tangkapan layar di bawah ini
Seberapa jelek itu?
Berikut CSSnya
<input type="password" placeholder="Enter your password" /> _2Apa yang dilakukan kode CSS di sini?
Kami memusatkan semua yang ada di bodi secara horizontal dengan Flexbox, dan secara vertikal dengan ketinggian viewport 100%. Kami menggunakan keluarga font kursif
Kami memberikan input dan <input type="email" placeholder="Enter your email" /> _2 lebar 100% sehingga semuanya masuk. Label mendapat ketinggian garis minimal 1. 9rem (30. 4px), sehingga mereka tidak berada terlalu dekat dengan masukan masing-masing
Kami secara khusus menata tombol (tombol tipe input) dengan properti transform untuk mendorongnya ke tengah karena sedikit keluar dari tengah. Kami memberinya padding 3px untuk jarak yang lebih banyak di sekitarnya. Kami kemudian memilih font-family kursif untuk itu dengan bobot tebal
Karena tombolnya terlalu dekat dengan <input type="email" placeholder="Enter your email" /> 2, kami menetapkan margin-top 0. 6rem untuk menekannya sedikit
Kami memberi elemen fieldset kami padding 20px di bagian atas dan bawah, dengan 40px di kiri dan kanan untuk memisahkan perbatasan yang dibuatnya di sekitar <input type="password" placeholder="Enter your password" /> 3 elemen yang dibungkusnya
Pada akhirnya, kami memiliki bentuk yang indah di bawah ini
Kesimpulan
Saya harap tutorial ini membantu Anda memahami cara kerja formulir. Sekarang Anda harus memiliki pengetahuan yang Anda perlukan untuk mengintegrasikan formulir ke dalam situs web Anda sehingga Anda dapat mulai mengumpulkan data
Terima kasih telah membaca, dan terus coding
IKLAN
IKLAN
IKLAN
IKLAN
IKLAN
IKLAN
IKLAN
IKLAN
IKLAN
IKLAN
IKLAN
IKLAN
Pengembang web dan penulis teknis yang berfokus pada teknologi frontend
Jika Anda membaca sejauh ini, tweet ke penulis untuk menunjukkan bahwa Anda peduli. Tweet terima kasih
Belajar kode secara gratis. Kurikulum open source freeCodeCamp telah membantu lebih dari 40.000 orang mendapatkan pekerjaan sebagai pengembang. Memulai