Formulir HTML

Pada titik ini kami memiliki beberapa petunjuk tentang apa tag dan atribut HTML itu dan bagaimana cara kerjanya. Kami tidak takut melangkah lebih jauh.

Dalam pelajaran ini kita akan belajar bagaimana membangun formulir HTML, yang memungkinkan bagi pengguna untuk mengirimkan data ke server. Misalnya formulir kontak dengan bidang input tunggal dan multiline, dropdown, kotak centang, dan lainnya.

Formulir kontak HTML bergaya

Contoh di bawah ini menunjukkan bentuk HTML minimalis dan tidak terhalang dengan bidang input, area teks dan tombol kirim. Ketika pengguna mengisi kolom dan mengklik tombol Kirim, data akan dikirim ke file send.php melalui metode posting.

< Bentuk  tindakan = "/send.php"  metode = "post" > 
    Nama: < masukan  nama = "nama"  jenis = "text" />  < br />  
    < textarea  cols = "20"  nama = "comments"  baris = "5" > Pesan </ textarea > < br /> 
    < masukan  jenis = "submit" value = "Kirim" /> 
</form >

 

Nama: 

Melangkah lebih jauh kita dapat membangun bentuk yang lebih rumit yang berisi beberapa elemen baru: fieldset, menu dropdown (pilih dan opsi) dan label.

< form  class = "inlineBlock"  action = "/ html / tutorial /"  method = "post" > 
    < fieldset > 
        < legenda > Detail pribadi: </ legenda > 
        Nama: < input  name = "name"  type = "text" / >  < br />  
        Umur: < masukan  max = "100"  min = "1" name = "age"  step ="1"  jenis = "angka"  value = "18" />  < br />  
        Jenis Kelamin: < masukan  diperiksa = "diperiksa"  nama = "gender"  jenis = "radio"  value = "laki-laki" /> Pria 
                 < masukan  nama = "gender"  jenis = "radio"  value = "perempuan" /> perempuan < br /> 
        Email: < nama input = "Yourmail"  jenis = "email" />  
    </ fieldset > 
    HP: < masukan  max = "300"  min = "50"  nama = "myrange"  langkah = "5"  jenis = "range" />  < br />  
    Mobil: < select  name = "gender" > 
            < option  selected = "selected"  value = "male"> Volkswagen </ opsi> 
            < Option  value = "skoda" > Skoda </ option > 
            < option  value = "volvo" > Volvo </ option > 
        </ pilih > < br />  
    Warna: < masukan  nama = "carcolor"  jenis = "warna" / >  < br />  
    < label > 
        < masukan  nama = "istilah" type = "checkbox" value = "tnc" /> Saya menerima persyaratan.
    </ Label > < br /> 
    < masukan  jenis = "submit"  value = "Kirim" /> 
</ bentuk >

 

Data pribadi:

Nama: 
Usia: 
Jenis kelamin:  Pria 
Email Wanita :

HP: 
Mobil:  Volkswagen  Skoda  Volvo 
Warna: 
Saya menerima persyaratan. 

Bidang input

Komponen paling umum dari setiap bentuk HTML adalah kotak teks baris tunggal, tetapi bidang input jauh lebih fleksibel dari itu. Ini bisa berupa kotak centang, tombol radio, warna atau pemilih tanggal dan banyak lagi. Lihat contoh di bawah ini.

< Bentuk  tindakan = "/action.php"  metode = "post" > 
    text: < masukan  jenis = "text"  nama = "NamaAnda"  maxlength = "10"  size = "12"  diperlukan />  < br />  
    Nomor: < tipe input  = "number" name = "no" min = "0" max = "100"step = "10" value = "30"     >  < Br />  
    centang: < masukan  jenis = "checkbox"  nama = "istilah"  value = "tandc" > Saya accpept istilah < br /> 
    radio:   < masukan  jenis = "radio"  nama = "jenis kelamin"  value = " laki-laki "  diperiksa > Laki-laki 
             < input  type = " radio "  name = " gender " value = "female" >Perempuan < br > 
    email: < masukan  jenis = "email"  nama = "yourmail" >  < br />  
    password: < masukan  jenis = "password"  nama = "sandi batasan" >  < br /> 
    warna: < masukan  jenis = "warna "  nama = "yourcolor" >  < br />  
    tanggal: <input  type = "date"  name= "Ulang tahun"  min = "1900/01/01"  max = "2010/01/01" >  < br />  
    Waktu: < masukan  jenis = "waktu"  nama = "MyTime" >  < br />  
    tanggal dan waktu: < masukan  jenis = "datetime-lokal"  nama = "time" >  < br />  
    minggu: < masukan  jenis = "minggu" name = "yourweek" >  <br />  
    bulan: < masukan  jenis = "bulan"  nama = "yourmonth" >  < br />  
    kisaran: < masukan  jenis = "range"  nama = "myrange"  min = "0"  max = "100" >  < br / >  
    pencarian: < masukan  jenis = "search"  nama = "MySearch" >  < br /> 
    tel: < input ketik = "tel"  nama = "myphone" >  < br />  
    url: < masukan  jenis = "url"  nama = "situs" >  < br />  
    < masukan  jenis = "submit"  value = "Submit" />  < masukan  type = "reset" > 
</ form >

 

teks: 
jumlah: 
kotak centang: Saya menerima istilah 
radio: Pria 
Email wanita :
kata sandi: 
warna: 
tanggal: 
waktu: 
tanggal dan waktu:
minggu: 
bulan: 
jarak: 
pencarian: 
tel: 
url: 
 

Textarea

Tambahkan bidang input multi-baris ke formulir. Itu dapat menampung jumlah karakter yang tidak terbatas.

< textarea  rows = "3"  cols = "40"  placeholder = "Ketikkan di sini" >
Nama: 
</ textarea >

 

Kustomisasi area teks dengan atribut di bawah ini:

Atribut	Nilai	Deskripsi
fokus otomatis	fokus otomatis	Area teks secara otomatis mendapatkan fokus saat halaman dimuat
cols	jumlah	Lebar terlihat dari area teks
dirname	textareaname .dir	Arah teks dari textarea akan dikirimkan
cacat	cacat	Area teks yang dinonaktifkan tidak dapat digunakan dan kontennya tidak dapat dipilih
bentuk	form_id	Bentuk area teks milik
panjang maksimal	jumlah	Jumlah karakter maksimum yang diperbolehkan dalam area teks
nama	teks	Nama untuk area teks
placeholder	teks	Petunjuk singkat ditampilkan saat area teks kosong
dibaca saja	dibaca saja	Input tidak dapat diubah ketika disetel ke true
wajib	wajib	Area teks diperlukan / harus diisi
baris	jumlah	Jumlah garis yang terlihat di area teks
membungkus	keras / lunak	Bagaimana teks akan dibungkus ketika dikirimkan dalam formulir

Dropdown

Tag <select> dapat digunakan untuk menambahkan menu dropdown ke formulir HTML kami yang dapat berisi beberapa opsi.

< form  action = "/ html /"  method = "post" > 
    < pilih  nama = "gender" > 
        < opsi yang  dipilih = "terpilih"  nilai = "html" > HTML </ option > 
        < opsi  nilai = "css" > CSS </ option > 
        < option  value = "js" > JavaScript </ option >
    </ pilih >< Br />  
    < masukan  jenis = "submit"  value = "Submit" /> 
</ bentuk >

 

         HTML         CSS         JavaScript     

Mirip dengan textarea, Anda dapat menggunakan atribut berikut: fokus otomatis, dinonaktifkan, formulir, banyak, nama, wajib, ukuran .