Ada berapa banyak metode berbeda untuk mengirimkan formulir html?

Question

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" />

_0

Ini 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" />

_1

Ketik URL

Saat atribut type dari tag input disetel ke URL, ini menampilkan bidang tempat pengguna dapat memasukkan URL

<input type="text" placeholder="Enter name" />

_2

Ketik Telp

Jenis input tel memungkinkan Anda mengumpulkan nomor telepon dari pengguna

<input type="text" placeholder="Enter name" />

_3

Ketik 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" />

_4

Seperti 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" />

_5

Ketik Minggu

Jenis input minggu memungkinkan pengguna memilih minggu tertentu

<input type="text" placeholder="Enter name" />

_6

Ketik Bulan

Input dengan jenis bulan mengisi bulan untuk dipilih pengguna saat diklik

<input type="text" placeholder="Enter name" />

_7

Textarea

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" />

_8

Kotak 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" />

_9

Cara 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

<input type="password" placeholder="Enter your password" />

0

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" />

_1

Apa 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" />

_2

Apa 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

Kolade Chris

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

Apa perbedaan metode pengiriman formulir dalam HTML?

Atribut metode menentukan cara mengirim data formulir (data formulir dikirim ke halaman yang ditentukan dalam atribut tindakan). Form-data dapat dikirim sebagai variabel URL (dengan method="get" ) atau sebagai HTTP post transaction (dengan method="post" ). Catatan tentang DAPATKAN. Menambahkan formulir-data ke dalam URL dalam pasangan nama/nilai.

Apa itu metode formulir?

Atribut metode elemen formulir memberi tahu browser web cara mengirim data formulir ke server . Menentukan nilai POST berarti browser akan mengirimkan data ke web server untuk diproses. Ini diperlukan saat menambahkan data ke database, atau saat mengirimkan informasi sensitif, seperti kata sandi.

Metode HTTP apa yang digunakan untuk mengirimkan formulir?

Keluaran. Mengirim data formulir menggunakan metode HTTP 'POST' . Metode POST digunakan untuk mengirim data ke server untuk membuat dan memperbarui sumber daya. Data yang diminta menggunakan metode POST ditambahkan ke badan permintaan HTTP, bukan ke URL halaman. Permintaannya tidak memiliki batasan panjang data.

Apa saja metode yang terkait dengan pengiriman formulir Apa perbedaan di antara keduanya?

Dalam HTML, seseorang dapat menentukan dua metode pengiriman yang berbeda untuk sebuah formulir. Metode ditentukan di dalam elemen FORM, dengan menggunakan atribut METHOD. Perbedaan antara METHOD="GET" (default) dan METHOD="POST" terutama ditentukan dalam bentuk penyandian data.

kode html