Pengenalan Code HTML Form. Hai ! Tutorial lalu kita sudah mempelajari tentang Pengenalan Code HTML Membuat Teks Code, jika anda ingin lebih jelas mengenal HTML anda bisa mengunjungi halaman berikut : https://www.dicloud.id/tutorial/categories/perkenalan-html, disini kita akan mempelajari tentang Pengenalan Code HTML Form , berikut penjelasannya :
Pengenalan Code HTML Form
disini kita akan mempelajari tentang Pengenalan Code HTML Form , berikut penjelasannya :
Code HTML Form
Disini saya akan memberikan contoh code HTML untuk menambahkan sebuah HTML Form sederhana pada web, berikut contoh nya :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 |
<!DOCTYPE html> <html> <head> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Libre+Franklin" rel="stylesheet"> <style type="text/css"> .bg { font-family: 'Libre Franklin', sans-serif; font-size: 30px; background-color: #28e9ed; color: black; padding: 10px; text-align: justify; } .gd { border: 2px solid; border-color: #28e9ed; padding: 100px; color: #ffffff; background-image: url(text.jpg); } .btn { background-color: #292cc6; padding: 10px; color: #ffffff; border: 14px; size: 13px; } .cmark{ background-color: #292cc6; } table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td, th { border: 10px solid #dddddd; text-align: left; padding: 8px; } caption { border:5px solid #000000; text-shadow: 2px 2px #000000; color: #292cc6; font-size: 34px; font-family: 'Libre Franklin', sans-serif; } code { border:5px solid #000000; align-items: center; align-content: center; font-size: 15px; } legend { color: #1fb1bf; font-family: 'Libre Franklin', sans-serif; font-size: 30px; } </style> <title>Test</title> </head> <body> <h3 align="center"><i class="bg">What is Lorem Ipsum?</i></h3> <p align="center"><i class="material-icons" style="font-size: 70px">wb_sunny</i></p> <form> <fieldset> <legend align="center">User Login</legend> Nama : <input type="text" placeholder="Nama"><br> Password : <input type="Password" placeholder="Password"> </fieldset> </form> <blockquote class="gd"><h1>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.<small>It has survived not only five centuries, <sup>but also the leap into electronic typesetting, remaining essentially unchanged.</small></sup>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</h1> </blockquote> </body> </html> |
Dan akan menampilkan hasil seperti gambar dibawah ini :
Disini kita menggunakan elemen baru yaitu <fieldset> , elemen ini digunakan untuk membuat sebuah kotak form dan setelah elemen tersebut berisi judul form yaitu <legend> , elemen ini digunakan untuk membuat sebauh judul dari form tersebut , kita menambahkan input type Nama dan Password dan belum ada proses nya .
Kesimpulan
Jika anda ingin membuat sebuah form yang berisi pengisian data seperti nama , alamat , atau login , anda bisa menggunakan elemen <fieldset> dan <legend> untuk judul form.
Sekian Terima Kasih.
Technical Support in dicloud.id