Banyak browser sanggup melihat elemen <form> dan sanggup menerapkan cara pintas khusus untuk mempermudah penggunaannya. Sadarilah bahwa Anda harus menghindari menciptakan formulir dalam bentuk lain! Formulir berisi kaset, tombol radio, tombol kotak centang, tombol kirim, kotak dialog.
Melalui dua jenis instrumen yang berbeda, yaitu frame dan aplikasi Web, Anda sanggup membangun bentuk yang menakjubkan. Bingkai yaitu struktur berlapis yang memberi kita fungsionalitas dan gaya pra-bangun, memungkinkan kita kebebasan untuk memodifikasi konten yang telah ditetapkan sebelumnya menjadi modifikasi, sesuai dengan kebutuhan masing-masing.
Aplikasi yang dipakai untuk menciptakan formulir Web menyediakan solusi otomatis, menggabungkan layanan yang juga mendapatkan katalog dalam formulir pengiriman. Selama artikel ini, Anda akan mempelajari beberapa alat terpenting yang dipakai untuk menciptakan formulir HTML5. Saya akan memandu Anda melalui beberapa alat desain sumber dan sumber untuk membantu Anda mengoptimalkan desain formulir Web Anda.
Bootstrap
Bentuk HTML5 benar-benar adegan dari halaman Web dan aplikasi, namun terkadang styling komponen form secara manual memakai CSS yaitu pekerjaan yang sangat monoton. Bootstrap yaitu nama resonan dikala harus menciptakan formulir Web. Keuntungan utama memakai perpustakaan ini yaitu Anda tidak perlu menulis isyarat CSS untuk formulir. Keuntungan lain yaitu memungkinkan Anda meletakkan label di dalam formulir dan bidang formulir sanggup diberi bentuk geometris. Bootstrap yaitu library yang sangat berguna, sebab menyederhanakan proses penanganan dan pengaturan bentuk kontrol melalui seperangkat kelas yang telah ditentukan.
Bootstrap menyediakan tiga jenis layout bentuk yang berbeda:
- Bentuk Vertikal (tata letak bentuk default)
- Bentuk Horizontal
- Formulir Inline
Daftar di bawah ini menciptakan form inline login sederhana yang memakai kerangka Bootstrap:
Listing 1. Buat Form Login Sederhana dengan Bootstrap
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h3 align="center">Inline form example</h3> <form class="form-inline" action="/action.php" align="center"> <div class="form-group"> <label for="username">Username:</label> <input type="username" class="form-control" id="username" placeholder="Enter username" name="username"> </div> <div class="form-group"> <label for="pwd">Password:</label> <input type="password" class="form-control" id="pwd" placeholder="Enter password" name="pwd"> </div> <div class="checkbox"> <label><input type="checkbox" name="remember"> Remember me</label> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div> </body> </html> 
Juga, bila Anda tidak ingin memanfaatkan semua manfaat Bootstrap, hapus centang semuanya dari generator download, kecuali modul formulir.
Foundation
Foundation yaitu kerangka kerja front-end responsif. Situs yang dibangun di atas Foundation bekerja dengan baik di banyak perangkat ibarat laptop, desktop, ponsel dan tablet. Foundation menyediakan komponen jaringan dan HTML yang bertanggung jawab, CSS, bentuk, kancing, template, dan cuplikan kode, elemen antarmuka dan elemen navigasi opsional dan fungsionalitas yang disediakan oleh ekstensi JavaScript.Ini telah muncul sebagai proyek Zurb untuk menyebarkan isyarat front-end yang lebih cepat dan lebih baik. Yayasan telah dirancang dan diuji di aneka macam browser dan perangkat. Rangka ponsel responsif ini, memberi desainer praktik terbaik untuk perkembangan pesat.
Foundation yaitu open source, dan pengembang didorong untuk berpartisipasi dalam proyek tersebut dan berkontribusi pada pengembangan platform. Formulir Contoh Foundation (daftar di bawah ini, buat formulir sederhana yang memakai Foundation, dan berisi: tombol, formulir dan template
Listing 2: Buat Form Sederhana dengan Foundation
<html> <head> <title>Form Text Inputs</title> <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/css/foundation.css"> </head> <body> <form> <div class = "row"> <div class = "medium-3 columns"> <h3>Example Form</h3> <label>Email <input type = "email"></label> <label>Password <input type = "password"></label> <a href="#" class="button postfix">Go</a> </div> </div> </form> </body> </html>
52Framework yaitu bingkai pertama yang dibentuk khusus untuk HTML5 dan CSS, mendukung semua browser modern. Ini memakai tag ibarat <div> atau <nav>, <section>, <article> <footer> atau jenis masukan bidang baru, yaitu URL, e-mail, frame mempunyai stylesheet ukuran yang kompatibel dengan HTML.
Beberapa fitur dari kerangka kerja dibulatkan: bayangan teks, bayangan kotak, markup HTML5 dan grid, reset CSS, dan sebagainya. Anda sanggup menerapkan sudut membulat untuk elemen tingkat kunci, bayangan teks untuk item teks, dan banyak lagi. Bingkai ini juga meliputi gaya untuk menciptakan grid: 12 kolom, 52 pixel berbasis selokan 6-pixel. 52 kerangka yaitu sumber bebas yang sanggup dipakai oleh pengguna mana pun, yang memungkinkan mereka memberi donasi konkret pada pengembangan dan peningkatan.
JotForm
JotForm yaitu alat untuk menciptakan formulir online yang memungkinkan pengguna membuat, menerbitkan formulir, dan mendapatkan email untuk setiap respons. JotForm memfasilitasi semua jenis organisasi, institusi pendidikan atau institusi negara, bisnis, organisasi nirlaba, pemilik bisnis, biro independen, perencana program atau perdagangan, untuk mengumpulkan gosip yang berkhasiat dengan formulir online ini. Salah satu hal jago wacana JotForm yaitu memungkinkan Anda menyeret dan menjatuhkan ke formulir, membuatnya sangat gampang digunakan.
Alat pembuatan formulir online ini ditentukan oleh fitur berikut: template yang sangat kondusif dan indah serta alat adaptasi yang canggih, gratis untuk digunakan, layanan pemasaran email, dan yang terakhir namun tidak kalah pentingnya, membantu Anda menciptakan formulir secara online dan untuk pdf.
Aplikasi Wufoo telah menghilangkan kelelahan dan inefisiensi proses pembentukan bangunan. Aplikasi Wufoo telah mengurangi proses pembuatan formulir dari sesuatu yang berlangsung berminggu-minggu sampai sesuatu yang sanggup dilakukan oleh siapa saja dalam hitungan menit. Ini yaitu cara tercepat dan termudah untuk membangun formulir online yang menakjubkan dengan fitur intuitif. Anda tidak perlu memakai kode. Bentuk Wufoo benar-benar dipersonalisasi dan indah, dengan kemungkinan tak terbatas, apakah Anda mengumpulkan pembayaran online, alat pembayaran atau gosip kontak.
Saya sarankan memakai Wufoo sebab Anda sanggup membangun, merancang dan mengumpulkan dengan profesionalisme hanya dalam beberapa menit. Ini memungkinkan Anda untuk menciptakan laporan dan grafik menurut data yang dikumpulkan, intuitif, cepat, portabel, aman, menyenangkan dan gampang diakses. Wufoo juga memperlihatkan solusi copy-and-paste untuk mengintegrasikan formulir Wufoo ke dalam halaman Web.
Fleksibilitas bentuk HTML5 menjadikannya salah satu struktur yang paling rumit namun Anda sanggup menciptakan bentuk dasar apa pun dengan memakai elemen dan atribut dari salah satu alat formulir khusus ini. Anda kini harus mempunyai cukup gosip untuk menciptakan dan menyusun formulir HTLM5 Anda sendiri.
Sumber Artikel : https://www.htmlgoodies.com/html5/5-great-tools-to-help-you-build-your-own-html5-forms.html
Komentar
Posting Komentar