Cara Mudah Membuat Form dan Tipe-Tipenya di HTML

-

Form dalam HTML

Saat kita ingin mendaftar didalam suatu contoh Sosial Media pasti kita akan diperlihatkan dengan sebuah form-form yang harus kita isi. Sebagai masukkan atau inputan kedalam dokumen dari pengguna. Inputan data tersebut akan dapat diproses lebih lanjut menjadi informasi yang dibutuhkan oleh pengguna maupun pemilik situs tersebut.
Untuk media input/masukan tersebut ada beberapa jenis diantaranya berupa Text, Radio Button, CheckBox,  DrodownList dan Submit. Nah, disini kita hanya akan membahas cara membuat form-form tersebut berupa text dengan tipe-tipe form text nya.
Cara Penulisan Form dalam HTML adalah :

<form action="URL" method="get/post">Isi Form</form>
  • form action adalah alamat atau bisa juga yang digunakan adalah file untuk memproses input dari form kedalam server.
  • method yaitu cara yang digunakan untuk menyimpan data ke server, bisa diisi dengan get atau pun post. Jika kita isi dengan get maka data form yang diisi akan tampil pada URL Web browser. Sedangkan jika kita mengisi dengan post, maka data hasil form tidak akan tampil di Web browser.
Form dalam bentuk text di HTML dapat dilakukan dengan menggunakan 2 buah elemen yaitu sebagai berikut :
  1. Textarea
    Textarea digunakan jika kita ingin memasukan teks lebih dari satu baris. Dan untuk penggunaannya pun sangat mudah kita hanya memberikan tag <textarea> dan </textarea> untuk penutup tag nya.
    Contoh :
    1. Textarea dengan isi kosong.
      <textarea></textarea>

      Hasil :

    2. Textarea dengan berisi.
      <textarea>Contoh isi textarea</textarea>

      Hasil :
    3. Textarea dengan ukuran tertentu.
      <textarea cols="5" rows="5"></textarea>

      Hasil :

  2. Input
    Input digunakan untuk masukan teks yang terdiri dari satu baris saja. Input ini sering kali digunakan jika pengguna hanya mengisi data dengan singkat. Tag yang digunakan adalah <input type="atribut">. Untuk atribut, kita ganti dengan tipe-tipe data berikut sesuai dengan fungsinya masing-masing.
    3.       Tipe                   Fungsi                        Contoh

      

    1. color                  Input berupa warna             
      2. 

    2. date                   Input berupa tanggal           
      3. 

    3. datetime-local         Input berupa tanggal lokal     
      4. 

    4. datatime               Input berupa waktu & tanggal   
      5. 

    5. email                  Input berupa email             
      6. 

    6. file                   Input berupa file    
      7. 

    7. month                  Input berupa bulan             
      8. 

    8. number                 Input berupa nomor             
      9. 

    9. password               Input berupa sandi             
      10. 

    10. range                  Input berupa range             
      11. 

    11. search                 Input berupa pencarian         
      12. 

    12. tel                    Input berupa nomor telepon     
      13. 

    13. text                   Input berupa Teks              
      14. 

    14. time                   Input berupa waktu             
      15. 

    15. url                    Input berupa alamat URL        
      16. 

    16. week                   Input berupa mingguan          
      17.
    Untuk fungsi atribut lainnya seperti  value/nilai, size/ukuran, maxlength/maksimal panjang karakter dan lain-lain, dapat ditambahkan kedalam tipe-tipe input berupa alfabet. Sedangkan pada tipe-tipe input  nomor seperti time, date dan lainnya kita juga bisa menambahkan fungsi atribut seperti min dan max, value/nilai serta lainnya.
    Contoh :
    <input type="text" value="Masukkan Teks" size="10" maxlength="7"> 
    Hasil :
    <input type="date" min="2018-11-01" max="2018-11-15" value="2018-11-09"> 
     Hasil :


Demikian postingan saya kali ini, semoga berguna dan bermanfaat bagi kita semua. Kekurangan dan kesalahan saya mohon maaf, dan jika belum paham atau ingin bertanya berikanlah komentar dibawah. Atas kunjungannya saya ucapkan Terima Kasih

Comments

Post a Comment

Popular posts from this blog

Pengertian dan Contoh Sederhana tentang Stack dan Queue

-
Image
STACK (Tumpukan) dan Queue (Antrian) Pada kesempatan kali ini, kita akan belajar bersama tentang Stack atau Tumpukan dan Queue atau Antrian. Stack dan Queue ini, berkaitan dengan Struktur Data  dalam sebuah aplikasi namun bisa juga dalam kehidupan sehari-hari kita. Stack dan Queue merupakan fungsi yang biasanya diimplementasikan pada program, tidak terkecuali Pemrograman Java. Untuk itu, sebelum membahas program sederhana Stack dan Queue menggunakan Pemrograman Java, kita simak terlebih dahulu pengertian dan penjelasan dari kedua fungsi tersebut dibawah ini.  STACK/Tumpukkan Stack adalah kumpulan suatu elemen dimana hanya elemen yang baru dimasukkan yang dapat diakses atau dilihat. Stack merupakan perintah pengumpulan data secara linear yang menyusun data seperti tumpukan dan bersifat Last In First Out(LIFO) yang berarti data yang terakhir masuk adalah data yang pertama keluar. Contoh dalam Kehidupan sehari-hari : Setumpuk koran, dimana koran yang paling terakhir ditamb
Read more

Permainan Logika tentang Algoritma

-
Image
3 Permainan Logika Tes IQ Pada kesempatan waktu ini, saya akan memberikan atau membahas tentang sebuah Game atau Permainan yang berkaitan dengan Tes IQ, karena Permainan ini harus dilakukan menggunakan akal, nalar dan logika kita. Karena Permainan ini berkaitan Algoritma, yang menyelesaikan masalah dengan logika, maka dalam postingan ini saya bahas bagaimana Algoritma dalam Game tersebut. Baik, langsung saja kita bahas dibawah bagaimana penyelesaiannya. Game Wolf, Sheep & Cabbage (Petani, Domba, Serigala dan Sayuran)  Pada permainan ini, terdapat Seorang Petani dengan membawa seekor Serigala, seekor kambing, dan rumput yang terkira beratnya tidak jauh berbeda. Untuk pergi ke kota di tengah perjalanan, Petani tersebut harus meyeberangi sungai dengan perahu. Namun kapasitas perahu, tidak memungkinkan untuk Petani tersebut membawa semuanya. Ia harus membawa satu persatu bawaannya. Tetapi ketika Petani tersebut menyeberangkan, sisa bawaannya harus tidak saling berhu
Read more

Cara Menyisipkan Tanggal (JCalender) di Java NetBeans dan di Simpan dalam Database

-
Image
JCalender di Java Netbeans Artikel ini adalah kelanjutan dari artikel sebelumnya tentang database yaitu Contoh Database dengan XAMPP dan Java Netbeans yang tidak menyisipkan komponen tanggal. Maka untuk kali ini, Firman akan memberikan Contoh Program Database dari Java yang dapat memasukkan data tanggal. Biasanya digunakan saat kita membuat program untuk memasukkan tanggal lahir, tanggal saat kita melakukan penjualan pada aplikasi atau lainnya. Lalu bagaimana cara membuat program yang dapat memasukkan data tanggal dan disimpan didalam Database. Baiklah langsung saja kita simak berikut dibawah ini. Saat kita ingin memasukkan tanggal di JFrame Form, kita harus mempunyai sebuah komponen yang dapat menampilkan data tanggal. Oleh karena itu, kita membutuhkan sebuah library (pustaka) untuk mengolah data tanggal tersebut. Library tersebut adalah JCalender   yang mempunyai format .jar . Secara default Library tersebut tidak ada di dalam Palette bawaan Netbeans. Jadi, kita bisa menamb
Read more