{"id":9447,"date":"2019-09-23T06:25:52","date_gmt":"2019-09-23T06:25:52","guid":{"rendered":"https:\/\/www.webhozz.com\/blog\/?p=9447"},"modified":"2019-09-23T06:28:56","modified_gmt":"2019-09-23T06:28:56","slug":"belajar-web-design-membuat-form","status":"publish","type":"post","link":"https:\/\/www.webhozz.com\/blog\/belajar-web-design-membuat-form\/","title":{"rendered":"Belajar Web Design : Membuat Form"},"content":{"rendered":"\n
Elemen HTML mendefinisikan formulir yang digunakan untuk mengumpulkan input data pengguna. Mungkin biasanya kita melakukan registrasi ke dalam suatu sistem dari sebuah website. Hal ini dengan tujuan bahwa, supaya kita bisa akses berbagai fitur web tersebut jika kita sudah terdaftar. <\/p>\n\n\n\n
Form HTML berisi beberapa elemen formulir. Elemen formulir adalah berbagai jenis elemen input, seperti bidang teks, kotak centang, tombol radio, tombol kirim, dan banyak lagi.<\/p>\n\n\n\n
Input Element<\/h5>\n\n\n\n
Untuk form ini, menggunakan tag <form> <\/form>. Dan dalam ke dua tag tersebut ditambahkan lagi dengan tag elemen <input>. <\/p>\n\n\n\n
Elemen <input> adalah bentuk elemen yang paling penting.<\/p>\n\n\n\n
Elemen <input> dapat ditampilkan dalam beberapa cara, tergantung pada atribut type.<\/p>\n\n\n\n
Berikut ini beberapa contohnya:<\/p>\n\n\n\n
<input type = “text”><\/em><\/strong>, yaitu menentukan bidang input jenis teks satu baris.<\/li>
<input type = “checkbox”><\/em><\/strong>, yaitu menentukan bidang input jenis ceklist (untuk memilih lebih dari satu pilihan).<\/li>
<input type = “password”><\/em><\/strong>, yaitu menentukan bidang input jenis teks password yang tersembunyi saat diisi nilai.<\/li>
<input type = “radio”><\/em><\/strong>, yaitu menentukan tombol radio (untuk memilih satu dari banyak pilihan).<\/li>
<input type = “submit”><\/em><\/strong>, menentukan tombol kirim (untuk mengirimkan formulir atau menyimpan data).<\/li><\/ul>\n\n\n\n
Dan masih banyak lagi beberapa contoh atribut lainnya. Jadi, pada contoh di atas kita bisa lihat semua elemen hampir sama. Hanya saja yang membedakan tipenya.<\/p>\n\n\n\n
Oke, langsung aja kita mulai script kodenya.<\/p>\n\n\n
Maka, seperti inilah hasilnya di browser.<\/p>\n\n\n\n<\/figure>\n\n\n\n
Deskripsi<\/h5>\n\n\n\n
<form action=”nama_file.php” method=”post”><\/em><\/strong>, yaitu ada tambahan action, tujuannya adalah untuk menuju file tersebut. <\/p>\n\n\n\n
Lalu ada method=”post”<\/em><\/strong>, yang artinya untuk mengirim data ke file yang akan dituju pada atribut action.<\/p>\n\n\n\n
<select><\/em><\/strong> dan <option><\/em><\/strong>, untuk menampilkan berbagai pilihan.<\/p>\n\n\n\n
<textarea><\/em><\/strong>, untuk elemen input dengan takaran pengisian data yang lebih besar. Dilengkapi dengan atribut row dan cols untuk mengatur lebar dan tingginya.<\/p>\n\n\n\n
Atribut value=””<\/em><\/strong>, untuk mengisi nilai pada elemen input yang bersipat optional, seperti radio, <select><\/em><\/strong>, dan lain sebagainya.<\/p>\n\n\n\n
Nah Demikianlah untuk pembuatan form kita kali ini, semoga bermanfaat ya.<\/p>\n","protected":false},"excerpt":{"rendered":"
Elemen HTML mendefinisikan formulir yang digunakan untuk mengumpulkan input data pengguna. Mungkin biasanya kita melakukan registrasi ke dalam suatu sistem dari sebuah website. Hal ini<\/p>\n","protected":false},"author":15,"featured_media":9452,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-9447","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-belajar-web-design"],"yoast_head":"\n
Belajar Web Design : Membuat Form - WebHozz Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webhozz.com\/blog\/belajar-web-design-membuat-form\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Belajar Web Design : Membuat Form - WebHozz Blog\" \/>\n<meta property=\"og:description\" content=\"Elemen HTML mendefinisikan formulir yang digunakan untuk mengumpulkan input data pengguna. Mungkin biasanya kita melakukan registrasi ke dalam suatu sistem dari sebuah website. Hal ini\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webhozz.com\/blog\/belajar-web-design-membuat-form\/\" \/>\n<meta property=\"og:site_name\" content=\"WebHozz Blog\" \/>\n<meta property=\"article:published_time\" content=\"2019-09-23T06:25:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-09-23T06:28:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2019\/09\/1.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"750\" \/>\n\t<meta property=\"og:image:height\" content=\"400\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/belajar-web-design-membuat-form\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/belajar-web-design-membuat-form\\\/\"},\"author\":{\"name\":\"admin\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#\\\/schema\\\/person\\\/c14789b713aefdff4189815a3655a941\"},\"headline\":\"Belajar Web Design : Membuat Form\",\"datePublished\":\"2019-09-23T06:25:52+00:00\",\"dateModified\":\"2019-09-23T06:28:56+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/belajar-web-design-membuat-form\\\/\"},\"wordCount\":325,\"publisher\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/belajar-web-design-membuat-form\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/09\\\/1.jpg\",\"articleSection\":[\"Belajar Web Design\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/belajar-web-design-membuat-form\\\/\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/belajar-web-design-membuat-form\\\/\",\"name\":\"Belajar Web Design : Membuat Form - WebHozz Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/belajar-web-design-membuat-form\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/belajar-web-design-membuat-form\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/09\\\/1.jpg\",\"datePublished\":\"2019-09-23T06:25:52+00:00\",\"dateModified\":\"2019-09-23T06:28:56+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/belajar-web-design-membuat-form\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/belajar-web-design-membuat-form\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/belajar-web-design-membuat-form\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/09\\\/1.jpg\",\"contentUrl\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/09\\\/1.jpg\",\"width\":750,\"height\":400},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/belajar-web-design-membuat-form\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Belajar Web Design : Membuat Form\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/\",\"name\":\"WebHozz Blog\",\"description\":\"Kursus Web & Android di Jakarta Bandung\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#organization\",\"name\":\"WebHozz\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/04\\\/logo-persegi.jpg\",\"contentUrl\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/wp-content\\\/uploads\\\/2018\\\/04\\\/logo-persegi.jpg\",\"width\":442,\"height\":442,\"caption\":\"WebHozz\"},\"image\":{\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/#\\\/schema\\\/person\\\/c14789b713aefdff4189815a3655a941\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g\",\"caption\":\"admin\"},\"url\":\"https:\\\/\\\/www.webhozz.com\\\/blog\\\/author\\\/farry\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Belajar Web Design : Membuat Form - WebHozz Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webhozz.com\/blog\/belajar-web-design-membuat-form\/","og_locale":"en_US","og_type":"article","og_title":"Belajar Web Design : Membuat Form - WebHozz Blog","og_description":"Elemen HTML mendefinisikan formulir yang digunakan untuk mengumpulkan input data pengguna. Mungkin biasanya kita melakukan registrasi ke dalam suatu sistem dari sebuah website. Hal ini","og_url":"https:\/\/www.webhozz.com\/blog\/belajar-web-design-membuat-form\/","og_site_name":"WebHozz Blog","article_published_time":"2019-09-23T06:25:52+00:00","article_modified_time":"2019-09-23T06:28:56+00:00","og_image":[{"width":750,"height":400,"url":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2019\/09\/1.jpg","type":"image\/jpeg"}],"author":"admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"admin","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webhozz.com\/blog\/belajar-web-design-membuat-form\/#article","isPartOf":{"@id":"https:\/\/www.webhozz.com\/blog\/belajar-web-design-membuat-form\/"},"author":{"name":"admin","@id":"https:\/\/www.webhozz.com\/blog\/#\/schema\/person\/c14789b713aefdff4189815a3655a941"},"headline":"Belajar Web Design : Membuat Form","datePublished":"2019-09-23T06:25:52+00:00","dateModified":"2019-09-23T06:28:56+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webhozz.com\/blog\/belajar-web-design-membuat-form\/"},"wordCount":325,"publisher":{"@id":"https:\/\/www.webhozz.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.webhozz.com\/blog\/belajar-web-design-membuat-form\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2019\/09\/1.jpg","articleSection":["Belajar Web Design"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.webhozz.com\/blog\/belajar-web-design-membuat-form\/","url":"https:\/\/www.webhozz.com\/blog\/belajar-web-design-membuat-form\/","name":"Belajar Web Design : Membuat Form - WebHozz Blog","isPartOf":{"@id":"https:\/\/www.webhozz.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webhozz.com\/blog\/belajar-web-design-membuat-form\/#primaryimage"},"image":{"@id":"https:\/\/www.webhozz.com\/blog\/belajar-web-design-membuat-form\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2019\/09\/1.jpg","datePublished":"2019-09-23T06:25:52+00:00","dateModified":"2019-09-23T06:28:56+00:00","breadcrumb":{"@id":"https:\/\/www.webhozz.com\/blog\/belajar-web-design-membuat-form\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webhozz.com\/blog\/belajar-web-design-membuat-form\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webhozz.com\/blog\/belajar-web-design-membuat-form\/#primaryimage","url":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2019\/09\/1.jpg","contentUrl":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2019\/09\/1.jpg","width":750,"height":400},{"@type":"BreadcrumbList","@id":"https:\/\/www.webhozz.com\/blog\/belajar-web-design-membuat-form\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webhozz.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Belajar Web Design : Membuat Form"}]},{"@type":"WebSite","@id":"https:\/\/www.webhozz.com\/blog\/#website","url":"https:\/\/www.webhozz.com\/blog\/","name":"WebHozz Blog","description":"Kursus Web & Android di Jakarta Bandung","publisher":{"@id":"https:\/\/www.webhozz.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webhozz.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webhozz.com\/blog\/#organization","name":"WebHozz","url":"https:\/\/www.webhozz.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webhozz.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2018\/04\/logo-persegi.jpg","contentUrl":"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2018\/04\/logo-persegi.jpg","width":442,"height":442,"caption":"WebHozz"},"image":{"@id":"https:\/\/www.webhozz.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.webhozz.com\/blog\/#\/schema\/person\/c14789b713aefdff4189815a3655a941","name":"admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bff35e4083f3870e2f911c4437e788147d340f274268d361dd7e1cf20bebb156?s=96&d=mm&r=g","caption":"admin"},"url":"https:\/\/www.webhozz.com\/blog\/author\/farry\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts\/9447","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/comments?post=9447"}],"version-history":[{"count":2,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts\/9447\/revisions"}],"predecessor-version":[{"id":9454,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/posts\/9447\/revisions\/9454"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/media\/9452"}],"wp:attachment":[{"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/media?parent=9447"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/categories?post=9447"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webhozz.com\/blog\/wp-json\/wp\/v2\/tags?post=9447"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
![\"\"](\"https:\/\/www.webhozz.com\/blog\/wp-content\/uploads\/2019\/09\/form-1-1024x547.png\")
<\/figure>\n\n\n\n