5 Tools Membantu Anda Membangun Form HTML5 - Peteng Pikir : Artikel Seputar SEO, Film, Webiste, HTML, Gadget, dan Masih Banyak Lagi

Post Top Ad

Wednesday, 25 October 2017

5 Tools Membantu Anda Membangun Form HTML5

Elemen <form> mendefinisikan bentuk dan atribut yang menentukan struktur dari bentuk ini. Bila Anda ingin membuat formulir HTML, Anda harus mulai menggunakan item ini, memasukkan semua konten di dalamnya.
Banyak browser dapat melihat elemen <form> dan dapat menerapkan cara pintas khusus untuk mempermudah penggunaannya. Sadarilah bahwa Anda harus menghindari membuat 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 bisa membangun bentuk yang menakjubkan. Bingkai adalah 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 digunakan untuk membuat formulir Web menyediakan solusi otomatis, menggabungkan layanan yang juga menerima katalog dalam formulir pengiriman. Selama artikel ini, Anda akan mempelajari beberapa alat terpenting yang digunakan untuk membuat 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 bagian dari halaman Web dan aplikasi, namun terkadang styling komponen form secara manual menggunakan CSS adalah pekerjaan yang sangat monoton. Bootstrap adalah nama resonan ketika harus membuat formulir Web. Keuntungan utama menggunakan perpustakaan ini adalah Anda tidak perlu menulis kode CSS untuk formulir. Keuntungan lain adalah memungkinkan Anda meletakkan label di dalam formulir dan bidang formulir dapat diberi bentuk geometris. Bootstrap adalah library yang sangat berguna, karena 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 membuat form inline login sederhana yang menggunakan 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> 
Output dari daftar di atas terlihat seperti ini:


Juga, jika Anda tidak ingin memanfaatkan semua manfaat Bootstrap, hapus centang semuanya dari generator download, kecuali modul formulir.

Foundation

Foundation adalah kerangka kerja front-end responsif. Situs yang dibangun di atas Foundation bekerja dengan baik di banyak perangkat seperti 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 mengembangkan kode front-end yang lebih cepat dan lebih baik. Yayasan telah dirancang dan diuji di berbagai browser dan perangkat. Rangka ponsel responsif ini, memberi desainer praktik terbaik untuk perkembangan pesat.
Foundation adalah 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 menggunakan 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>
Output dari daftar di atas terlihat seperti ini:
52Framework

52Framework adalah bingkai pertama yang dibuat khusus untuk HTML5 dan CSS, mendukung semua browser modern. Ini menggunakan tag seperti <div> atau <nav>, <section>, <article> <footer> atau jenis masukan bidang baru, yaitu URL, e-mail, frame memiliki 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 dapat menerapkan sudut membulat untuk elemen tingkat kunci, bayangan teks untuk item teks, dan banyak lagi. Bingkai ini juga mencakup gaya untuk membuat grid: 12 kolom, 52 pixel berbasis selokan 6-pixel. 52 kerangka adalah sumber bebas yang dapat digunakan oleh pengguna mana pun, yang memungkinkan mereka memberi kontribusi nyata pada pengembangan dan peningkatan.

JotForm
JotForm adalah alat untuk membuat formulir online yang memungkinkan pengguna membuat, menerbitkan formulir, dan menerima email untuk setiap respons. JotForm memfasilitasi semua jenis organisasi, institusi pendidikan atau institusi negara, bisnis, organisasi nirlaba, pemilik bisnis, agen independen, perencana acara atau perdagangan, untuk mengumpulkan informasi yang berguna dengan formulir online ini. Salah satu hal hebat tentang JotForm adalah memungkinkan Anda menyeret dan menjatuhkan ke formulir, membuatnya sangat mudah digunakan.
Alat pembuatan formulir online ini ditentukan oleh fitur berikut: template yang sangat aman dan indah serta alat penyesuaian yang canggih, gratis untuk digunakan, layanan pemasaran email, dan yang terakhir namun tidak kalah pentingnya, membantu Anda membuat formulir secara online dan untuk pdf.
Wufoo

Aplikasi Wufoo telah menghilangkan kelelahan dan inefisiensi proses pembentukan bangunan. Aplikasi Wufoo telah mengurangi proses pembuatan formulir dari sesuatu yang berlangsung berminggu-minggu hingga sesuatu yang bisa dilakukan oleh siapa saja dalam hitungan menit. Ini adalah cara tercepat dan termudah untuk membangun formulir online yang menakjubkan dengan fitur intuitif. Anda tidak perlu menggunakan kode. Bentuk Wufoo benar-benar dipersonalisasi dan indah, dengan kemungkinan tak terbatas, apakah Anda mengumpulkan pembayaran online, alat pembayaran atau informasi kontak.
Saya sarankan menggunakan Wufoo karena Anda bisa membangun, merancang dan mengumpulkan dengan profesionalisme hanya dalam beberapa menit. Ini memungkinkan Anda untuk membuat laporan dan grafik berdasarkan data yang dikumpulkan, intuitif, cepat, portabel, aman, menyenangkan dan mudah diakses. Wufoo juga menawarkan solusi copy-and-paste untuk mengintegrasikan formulir Wufoo ke dalam halaman Web.
Kesimpulan

Fleksibilitas bentuk HTML5 menjadikannya salah satu struktur yang paling rumit namun Anda dapat membuat bentuk dasar apa pun dengan menggunakan elemen dan atribut dari salah satu alat formulir khusus ini. Anda sekarang harus memiliki cukup informasi untuk membuat 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

No comments:

Post a comment

Post Bottom Ad