FORMULIR HTML

Formulir html yang biasa disingkat form html merupakan salah satu fitur yang dibutuhkan website untuk mengumpulkan informasi. Dengan HTML form memungkinkan audiens untuk memasukkan data dan berinteraksi dengan website. Form html biasanya digunakan untuk pendaftaran, login, pencarian, dan banyak lagi.

A. Elemen Form HTML

Form HTML dapat dibuat dengan tag <form> </form>. beberapa atribut yang digunakan

• Action : menentukan nama file yang akan memproses data yang akan dikirim
• Metod : mengatur metode pengiriman data, bisa diberi get atau post, Get (mengirim data kecil, data akan ditampilkan pada addres bar browser, post dapat mengirim data lebih besar, data tidak ditampilkan dalam adressbar)
• Name : mengatur nama form

Form dalam html memiliki beberapa elemen

Input:
Elemen < input > elemen ini membuat pengunjung bisa memasukkan data, seperti teks, angka, atau bahkan file. Jenis jenis input: ‘text’, ‘password’, dan ‘checkbox’ yang bisa kamu gunakan sesuai kebutuhan.
Input digunakan dengan tag < input > dan tipe yang sesuai, misalnya < input type=”text” > untuk bidang teks.

Label:
Label berfungsi untuk memberikan keterangan atau judul pada input. Label membantu audiens memahami apa yang harus dimasukkan di kolom tertentu. Misalnya, label “Nama” menunjukkan bahwa audiens harus memasukkan namanya di kolom tersebut.
Labels dideklarasikan dengan tag < label >, seperti < label for=”nama”>Nama.

Button:
label < button > dalam form HTML digunakan untuk mengirimkan form. Ada beberapa jenis buttons, seperti ‘submit’ yang digunakan untuk mengirimkan data atau ‘reset’ yang akan mengosongkan semua bidang input.
Buttons dapat dibuat dengan < input type=”submit” > atau < button type=”submit”>Kirim.

Select
Elemen < select > memungkinkan audiens memilih beberapa daftar opsi yang disediakan. Select bisa berbentuk dropdown menu atau list yang dapat dipilih lebih dari satu. Elemen ini dideklarasikan dengan < select > dan di dalamnya terdapat opsi yang didefinisikan dengan < option >, seperti < select> < option > Pilihan 1 .

Textarea
Jika kamu ingin audiens dapat menulis teks dalam beberapa baris, seperti komentar atau alamat, kamu bisa menggunakan elemen < textarea >.Textarea dipakai untuk input teks multi-baris, ditulis sebagai < textarea> .

Fieldset dan Legend
Fieldset digunakan untuk mengelompokkan elemen-elemen terkait dalam form. Di sisi lain, legend berfungsi sebagai judul untuk grup tersebut. Kedua elemen ini membantu dalam membuat form yang terstruktur dan mudah dipahami. Fieldset dideklarasikan dengan < fieldset > dan judul grup didefinisikan dengan < legend >, seperti < fieldset > < legend > Judul Grup< /legend >< /fieldset >.

Radio Buttons
Radio buttons membuat audiens bisa memilih salah satu dari beberapa opsi, Radio buttons ditulis menggunakan < input type=”radio” >, di mana setiap pilihan memiliki tipe “radio“.

B. Cara Membuat Form HTML

Langkah-langkah membuat form

• Buat tag form
  Pertama, mulailah dengan tag < form >.
• Tambahkan elemen input yang diperlukan
• menambahkan tombol submit
• menutup tag form
  Terakhir, tutup tag form dengan < /form >.

<form action="daftar.php" method="post">
  <label for="nama">Nama:</label>
  <input type="text" id="nama" name="nama"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br><br>
  <label for="password">Kata Sandi:</label>
  <input type="password" id="password" name="password"><br><br>
  <input type="submit" value="Daftar">
</form>

C. Contoh-contoh Form html

Contoh form dengan html dan css

Buat file index.html

<div class="container"> 
<form id="contact" action="" method="post">
<h3>Questions Form</h3>
<h4>Isikan data dengan lengkap</h4>
<fieldset>
<input placeholder=Nama" type="text" tabindex="1" required autofocus>
</fieldset>
<fieldset>
<input placeholder="Email" type="email" tabindex="2" required>
</fieldset>
<fieldset>
<input placeholder="Phone (optional)" type="tel" tabindex="3" required>
</fieldset>
<fieldset>
<input placeholder="WebSite (optional)" type="url" tabindex="4" required>
</fieldset>
<fieldset>
<textarea placeholder="isikan pesan anda disini" tabindex="5" required></textarea>
</fieldset>
<fieldset>
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Kirim Pesan</button>
</fieldset>

</form>
</div>

Buat file style.css

*, *:before, *:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

body {
font-family: 'Nunito', sans-serif;
color: #384047;
}

form {
max-width: 300px;
margin: 10px auto;
padding: 10px 20px;
background: #f4f7f8;
border-radius: 8px;
}

h1 {
margin: 0 0 30px 0;
text-align: center;
}

input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
textarea,
select {
background: rgba(255,255,255,0.1);
border: none;
font-size: 16px;
height: auto;
margin: 0;
outline: 0;
padding: 15px;
width: 100%;
background-color: #e8eeef;
color: #8a97a0;
box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
margin-bottom: 30px;
}

input[type="radio"],
input[type="checkbox"] {
margin: 0 4px 8px 0;
}

select {
padding: 6px;
height: 32px;
border-radius: 2px;
}

button {
padding: 19px 39px 18px 39px;
color: #FFF;
background-color: #4bc970;
font-size: 18px;
text-align: center;
font-style: normal;
border-radius: 5px;
width: 100%;
border: 1px solid #3ac162;
border-width: 1px 1px 3px;
box-shadow: 0 -1px 0 rgba(255,255,255,0.1) inset;
margin-bottom: 10px;
}

fieldset {
margin-bottom: 30px;
border: none;
}

legend {
font-size: 1.4em;
margin-bottom: 10px;
}

label {
display: block;
margin-bottom: 8px;
}

label.light {
font-weight: 300;
display: inline;
}

.number {
background-color: #5fcf80;
color: #fff;
height: 30px;
width: 30px;
display: inline-block;
font-size: 0.8em;
margin-right: 4px;
line-height: 30px;
text-align: center;
text-shadow: 0 1px 0 rgba(255,255,255,0.2);
border-radius: 100%;
}

@media screen and (min-width: 480px) {

form {
max-width: 480px;
}

}

Letakkan kedua file dalam satu folder, buka dengan browser hasilnya seperti berikut