cara membuat formulir di html

Mastering kode HTML untukmembuatFormulirPendaftaran

Fungsi form secaraumumbanyak di gunakanuntuk proses input ke database, dimanadapatmenyimpannilai-nilai yang di isipengguna, selainitu form memungkinkan user dapatberkomunikasidengan user lain, halinitetap di dasarikomunikasiantara server dengan client biasanya di olahmenggunakanbahasapemrograman server-side entahituphp, phytondan lain-lain, sepertikitajumpaipadasitusjejaringsosialsepertifacebookdan twitter semuaberbasis form untukpengolahan data mulaidaripendaftara, login, update dan lain-lain. Akan tetapiuntukdisinikitahanyamembahasmembuat form di htmlyaitusebatas interface saja, tidakuntukpengolahan data, karnahalitunantiakan di bahaspadamateri PHP.

Atribut Tag Form di HTML

Berikutiniadalahatribut-atribut yang biasa di gunakanuntukmembuat form di html, tabel di bawahinitidaklahlengkap, makadariitudisarankan agar lebihbanyakmencariinformasimengenaiatribut-atributsetiap tag di html danapabilamasihkurang di pahamisecarateori, cobalahpraktekan agar kitatahusetiap proses yang terjadi.

Atribut	Nilai	Keterangan
accept	Tipe file	Untukmenentukan file apasaja yang di ijinkanuntukdapat di upload ke server.
action	URL	Untukmenentukan proses mengiriman data form ke server.
enctype	application/x-www-form-urlencoded, multipart/form-data, text/plain	Untukmenentukanbagaimanainformasi form harus di encode oleh browser. Hanyaberlakuuntukmetodepengirimantipe POST.
method	get, post	Menentukanmetodepengiriman data
name	text	Menentukannama form.

Dari atribut di atasseluruhnyadapatkitagunakansesuaikebutuhan, misalnyapenggunaanenctype, atributinikebanyakan di gunakanapabiladidalam form menyediakantipe file, dimanaakanada file yang di upload ke server, ingat! tanpaadaatributenctype form file upload tidakakanbekerjasamasekali.

Contoh Cara Membuat Form di HTML

Sebenarnya tag form inisepertimelakukan grouping elemen di dalamnyauntukmembuat form di html, maksudnyaadalahapabilaandamemasukanelemen form di dalam tag form makasetiapelemen form yang adadidalam tag form akan di proses selamaelementersebutberada di dalamnya, dansebaliknya, elemen form tidakakandapatbekerjauntukmengirimkan data ke server apabilatidakmenggunakan tag form, berikutcontohpenulisanuntukmembuat form di html.

<form method="POST" action="URL" name="FORM">

    .....

</form>

Perhatianmetodepengiriman, di tabelatasterdapatduatipemethodepengiriman, yaitu POST dan GET, laluapabedanya POST dan GET? perbedaanmethod POSTdanmethod GETadalahterletakpada proses pengirman data dimanapadamengambilanvariabel yang terdapatpada form denganmetode POST tidakakanterlihat di proses, sedangkanjika GET apabila proses pengirimandilakukanmakanilaidarivariabel form akanditampilanpada URL di browser.

Macam-macamElemen Tag Form di HTML

Tag	Tipe	Keterangan
<textarea>	–	Textareadigunakanuntukmenangani input text yang membutuhkanbanyakkarakter di tulisdidalamnya, layaknyaseperti text editor.
<select>	–	Tag select biasanyauntukmenanganiinputan yang nilainyasudahtersediadanhanyabolehmemilihsatunilai.
<input>	text	Biasanyadigunakanuntukmenangani text hanyajumlahnyatidakbanyak.
	checkbox	Digunakanuntukmenangani input yang sudahtersedianilainyadandapatmemilihlebihdarisatupilihan
	radio	Digunakanuntukmenangani input yang sudahtersedianilainyadapathanyadapatmemilihsatusaja, dimanauntuk grouping elemeninimelaluiatribut name yang berisinilaisama.
	hidden	Digunakanuntukmenangani input yang tidakinginditampilkan di browser.
	submit	Untukmenampilkantombol, yang akanberfungsimenjalankan proses form.
	button	Untukmenampilkantombol, yang akanberfungsimenjalankan proses form bedanyadengan submit harusadabahasapihakketigauntukdapatmelakukan proses input data, misalnyajavascript.
	file	Digunakanuntukmelakukan proses upload data yang akandikirimke server

Penulisan Elemen Tag Form di HTML

Setelahkitamengenaliapasajamacam-macam tag form di html, makasekarangmulaiuntukmembuat form di html sesuaidengan yang tertera di tabelatas.

MembuatTextarea di HTML

Textareabiasanyadigunakanuntukpengolahanteks yang jumlahnyalebihbanyak, sehinggamemudahkan user dalammenginput data teks, berikutinicontohpenulisantextarea di html.

Buka Notepad andadansalin scrip dibawahini.!

<html>

<head>

<title>Contoh Form Textarea di HTML</title>

</head>

<body>

<h1>Contohtextarea</h1>

<textarea>Loremipsum dolor sit amet, consecteturadipisicingelit, sed do eiusmodtemporincididuntutlabore et dolore magna aliqua. Utenim ad minim veniam, quisnostrud exercitation ullamcolaboris nisi utaliquip ex eacommodoconsequat. Duisauteirure dolor in reprehenderit in voluptatevelitessecillumdoloreeufugiatnullapariatur. Excepteursintoccaecatcupidatat non proident, sunt in culpa qui officiadeseruntmollitanim id estlaborum.</textarea>

</body>

</html>

Dari kode html diatasmakaakantampilsepertigambardibawahini.

Sepertigambardiatas, textareamenyimpanisiteksdidalamnyasebagaielemen tag tidakmenggunakanatribut value untukmenentukanisitekstersebut, dankalaudiperhatikan, ukurantextareadiatastidak ideal karenaterlalukecildanuntukmemperbesarnyatambahkanatribut colsdanatribut rows, seperticontohdibawahini.bukakembali notepad andadanketikkodedibawahini.

<html>

<head>

<title>Contoh Form Textarea di HTML</title>

</head>

<body>

<h1>Contohtextarea</h1>

<textarea cols="70" rows="10">Loremipsum dolor sit amet, consecteturadipisicingelit, sed do eiusmodtemporincididuntutlaboreetdolore magna aliqua. Utenim ad minim veniam, quisnostrud exercitation ullamcolaboris nisi utaliquip ex eacommodoconsequat. Duisauteirure dolor in reprehenderit in voluptatevelitessecillumdoloreeufugiatnullapariatur. Excepteursintoccaecatcupidatat non proident, sunt in culpa qui officiadeseruntmollitanim id estlaborum.</textarea>

</body>

</html>

Makakuranglebihakantampilsepertigambar di bawahini.

Membuat Select di HTML

Tag select adalahsebuah tag yang nilainyasudahtersedia, danhanyadapatmemilihsatunilaidiantarabanyaknilai yang tersedia, nilai-nilai tag select tersebuttersimpan di tag <option></option>dimananilaitersebutbisaberupaelemendari tag option ataudimasukankedalamatribut value di tag option, contohpenggunaan tag select.

<html>

<head>

<title>Contoh Form Select di HTML</title>

</head>

<body>

<h1>Contoh Select</h1>

<select>

      <option>Nilai 1</option>

      <option>Nilai 2</option>

      <option>Nilai 3</option>

</select>

</body>

</html>

Dari kode di atasmakaakantampilseperti di bawahini.

Seperti yang sudahdikatakanbahwanilaidari tag select adalahelemen tag option yang, tetapiapabila tag option memilikiatribut value makanilaiberada di value, atribut value initidaktampil di browser, danelemen tag option hanyaakanmenjadi placeholder atauteksbiasa, contohpenggunaanatribut value.

<html>

<head>

<title>Contoh Form Select di HTML</title>

</head>

<body>

<h1>Contoh Select</h1>

<select>

      <option value="Nilai 1">Nilai 1</option>

      <option value="Nilai 2">Nilai 2</option>

      <option value="Nilai 3">Nilai 3</option>

</select>

</body>

</html>

Membuat Input Elemen di HTML

Tag input umumnya yang paling banyak di gunakandalammembuat form di html dan yang memilikitipe paling banyakdiantara tag form yang lainnya, bentuk-bentuk tag input hanyadibedakanmelaluiatribut type untukmenentukan input sepertiapa yang ingin di tampilkandanatribut input iniadalahsalahsatu tag tunggudimanapenulisannyatidakmembutuhkan tag penutup, seluruh tag input biasanyamenampungnilai tag tersebut di dalamatribut value.

Dalam proses phpketikanilai-nilaidarielemen form ini di olah, seluruhnilai di tangkapmelaluiatribut name padasetiap tag, atribut name inisepertivariabel, tetapiuntukpembahasan kali inikitahanyamengulastentang interface saja, tidakuntukprosesnya, contohpenggunaan tag name.

<input type="text" name="username" value="AladinTo be Continued">

Dari tag input di atasterlihatbahwanamadari tag tersebutadalah username danmemilikinilai “bahasaweb”, sehingga yang akan di tangkapolehkodephpdenganmetode get atau post adalahkuranglebihsepertivariabel “username” bernilai “bahasaweb”, contohlengkappenulisan form input.

<html>

<head>

<title>Contoh Form Input di HTML</title>

</head>

<body>

<h3>Input Text</h3>

<input type="text" value="Iniadalahnilai input teks">

<h3>Input Password</h3>

<input type="text" value="Password">

<h3>Input Checkbox</h3>

<input type="checkbox" value="Nilai checkbox"> Checkbox 1

<input type="checkbox" value="Nilai checkbox"> Checkbox 2

<input type="checkbox" value="Nilai checkbox"> Checkbox 3

<h3>Input Checkbox</h3>

<input type="radio" value="Nilai radio"> Radio 1

<input type="radio" value="Nilai radio"> Radio 2

<input type="radio" value="Nilai radio"> Radio 3

<h3>Input Submit</h3>

<input type="submit" value="Tombol input submit">

<h3>Input File</h3>

<input type="file">

</body>

</html>

Contohkode html di ataskuranglebihakantampilsepertigambar di bawahini.

Contoh form Lengkap

Berikutiniadalahcontohlengkap yang bisa di gunakanuntukmembuat form di html yaitu pengisianformulirbukuInduk, tidakada proses php di dalamnya, hanyasebatas interface saja.

<html>

<head>

<title>Contoh Form Lengkap di HTML</title>

</head>

<body>

<h1>BukuInduk</h1>

<form name="bukuinduk" method="POST">

<p>

<label>Nama</label>

<input type="text" name="nama" value="AladinTo Be Continued.com">

</p>

<p>

<label>Email</label>

<input type="email" name="contoh@aladintobecontinued.com">

</p>

<p>

<label>Pesan</label>

<textarea cols="50" rows="5">Iniadalahcontohpesandalambukuinduk</textarea>

</p>

<p>

<input type="submit" value="Kirim">

</p>

</form>

</body>

</html>

Berikutiniadalahtampilandarikode form bukuinduk di atas.

Dari contohsederhanadiatassilahkanberkreasisesuaidengankeinginansehinggadapatmenciptakan form-form yang lengkapsesuaikebutuhan.

Keterangan:

1.Bacadanpahamilahsetiapkalimat yang adadalamdokumenini agar andalebihmudahuntukmemahaminya.

2.ikutisetiaplangkahkode html denganbenar,agartidakterjadikesalahan.

                                                                                   

• Tweet
• Share
• Share
• Share
• Share

About Admin MC3

This is dummy text. It is not meant to be read. Accordingly, it is difficult to figure out when to end it. But then, this is dummy text. It is not meant to be read. Period.

Related Post