HTML

Masukan Teks
Jika kita ingin membuat kolom input di <form>, kita memerlukan bantuan <input>elemen.

Elemen <input>tersebut memiliki typeatribut yang menentukan bagaimana tampilannya di

halaman web dan jenis data apa yang dapat diterimanya.

Nilai pertama untuk typeatribut yang akan kita jelajahi adalah "text". Ketika kita membuat
sebuah <input>elemen dengan type="text", elemen tersebut merender bidang teks yang
dapat diketik oleh pengguna. Perhatikan bahwa nilai default dari typeadalah "text". Penting
juga untuk menyertakan nameatribut untuk <input>— tanpa nameatribut, informasi di
dalam <input>tidak akan dikirim saat <form>dikirimkan. Kami akan menjelaskan lebih lanjut
tentang kiriman dan tombol kirim di latihan selanjutnya. Untuk saat ini, mari kita periksa
kode berikut yang menghasilkan kolom input teks

Berikut cuplikan layar tampilan formulir yang dirender pada halaman web
untuk browser Chrome (browser yang berbeda memiliki rendering default
yang berbeda). Saat pertama kali dimuat, itu akan menjadi kotak kosong:

Setelah pengguna mengetik ke dalam <input>elemen, nilai valueatribut menjadi

apa yang diketikkan ke dalam bidang teks. Nilai valueatribut dipasangkan
dengan nilai nameatribut dan dikirim sebagai teks saat formulir
dikirimkan. Misalnya, jika pengguna mengetik "detail penting" di bidang teks
yang dibuat oleh <input>elemen kami:

Saat formulir dikirimkan, teks: "first-text-field=important details"dikirim

ke /example.htmlkarena nilai nameatributnya adalah "first-text-field"dan nilai
dari valueadalah "important details".
Kami juga dapat menetapkan nilai default untuk valueatribut sehingga
pengguna memiliki bidang teks yang sudah terisi saat pertama kali melihat
formulir yang dirender seperti ini:

Menambahkan Label
Pada latihan sebelumnya kita membuat sebuah <input>elemen tetapi kita
tidak menyertakan apapun untuk menjelaskan untuk apa elemen <input>itu
digunakan. Agar pengguna dapat mengidentifikasi dengan
benar, <input>kami menggunakan <label>elemen yang diberi nama dengan
tepat.

Elemen <label>tersebut memiliki tag pembuka dan penutup serta

menampilkan teks yang tertulis di antara tag pembuka dan penutup. Untuk
mengasosiasikan a <label>dan an <input>, <input>dibutuhkan
sebuah idatribut. Kami kemudian menetapkan foratribut <label>elemen
dengan nilai idatribut <input>, seperti:
Lihat, sekarang pengguna tahu untuk apa <input>elemen itu! Manfaat lain
untuk menggunakan <label>elemen adalah ketika elemen ini diklik, elemen
yang sesuai <input>akan disorot/dipilih.

Masukan Kata Sandi

Pikirkan tentang saat-saat kita harus memasukkan informasi sensitif, seperti
kata sandi atau PIN, ke dalam file <form>. Kami tidak ingin informasi kami
dilihat oleh siapa pun yang mengintip dari balik bahu kami! Untungnya,
kami memiliki type="password"atribut untuk <input>!

Elemen <input type ="password">akan mengganti teks masukan dengan karakter

lain seperti tanda bintang (*) atau titik (•). Kode di bawah ini memberikan
contoh cara membuat kolom kata sandi:

Masukan Angka
Pikirkan tentang saat-saat kita harus memasukkan informasi sensitif, seperti
kata sandi atau PIN, ke dalam file type. Kami tidak ingin informasi kami dilihat
oleh siapa pun yang mengintip dari balik bahu kami! Untungnya, kami
memiliki <input>atribut untuk type! "number"!

Elemen type="number"akan mengganti teks masukan dengan karakter lain

seperti tanda bintang (*) atau titik (•). Kode di bawah ini memberikan contoh
cara membuat bidang kata sandi: <input>kita dapat membatasi apa yang
diketik pengguna ke dalam bidang input hanya dengan angka (dan beberapa
karakter khusus seperti -, +, dan .). Kami juga dapat menyediakan stepatribut
yang membuat panah di dalam bidang input untuk menambah atau
mengurangi nilai stepatribut. Di bawah ini adalah kode yang diperlukan untuk
merender kolom input untuk angka:

Masukan Rentang(Range)
Menggunakan an <input type="number"> sangat bagus jika kami ingin
mengizinkan pengguna mengetikkan nomor apa pun yang mereka
pilih. Namun, jika kami ingin membatasi angka yang dapat diketik oleh
pengguna kami, kami mungkin mempertimbangkan untuk
menggunakan typenilai yang berbeda. Opsi lain yang bisa kita gunakan adalah
pengaturan typeyang "range"membuat slider.

Untuk menetapkan nilai minimum dan maksimum penggeser, kami

menetapkan nilai ke atribut mindan dari . Kami juga dapat mengontrol
seberapa halus dan lancar slider bekerja dengan menetapkan nilai atribut. Nilai
yang lebih kecil akan membuat penggeser bergerak lebih lancar,
sedangkan nilai yang lebih besar akan membuat penggeser bergerak lebih
nyata. Lihatlah kode untuk membuat slider:max<input>stepstepstep
Checkbox Input

Sejauh ini jenis input yang kami izinkan semuanya adalah pilihan
tunggal. Namun, bagaimana jika kami menyajikan beberapa opsi kepada
pengguna dan mengizinkan mereka untuk memilih sejumlah opsi? Sepertinya
kita bisa menggunakan kotak centang! Dalam a <form>kita akan
menggunakan <input>elemen dan set type="checkbox". Periksa kode yang digunakan
untuk membuat beberapa kotak centang:

Perhatikan dalam contoh yang diberikan:

 ada nilai yang diberikan ke valueatribut kotak centang. Nilai-nilai ini tidak
terlihat pada formulir itu sendiri, oleh karena itu penting bagi kami untuk
menggunakan yang terkait <label>untuk mengidentifikasi kotak centang.
  masing -masing <input>memiliki nilai yang sama
untuk nameatribut. Menggunakan yang sama nameuntuk setiap kotak
centang mengelompokkan <input>s bersama. Namun, masing-
masing <input>memiliki keunikan iduntuk dipasangkan dengan <label>.

Radio Button Input

Kotak centang berfungsi dengan baik jika kami ingin memberi pengguna
beberapa opsi dan membiarkan mereka memilih satu atau beberapa
opsi. Namun, ada kasus di mana kami ingin menampilkan beberapa opsi dan
hanya mengizinkan satu pilihan — seperti menanyakan pengguna apakah
mereka setuju atau tidak setuju dengan syarat dan ketentuan. Mari kita lihat
kode yang digunakan untuk membuat tombol radio:

Perhatikan dari cuplikan kode,

tombol radio (seperti kotak centang) tidak menampilkan nilainya. Kami
memiliki asosiasi <label>untuk mewakili nilai tombol radio. Untuk
mengelompokkan tombol radio, kami menetapkannya sama namedan hanya
satu tombol radio dari grup itu yang dapat dipilih.

Dropdown list

Tombol radio sangat bagus jika kita ingin pengguna memilih satu opsi dari
beberapa opsi yang terlihat, tetapi bayangkan jika kita memiliki seluruh daftar
opsi! Situasi ini dapat dengan cepat menyebabkan banyak tombol radio untuk
dilacak.

Solusi alternatif adalah dengan menggunakan daftar dropdown untuk

memungkinkan pengguna kami memilih satu opsi dari daftar yang
terorganisir. Berikut kode untuk membuat menu dropdown:

Perhatikan dalam kode bahwa kita menggunakan elemen <select>untuk membuat

daftar tarik-turun. Untuk mengisi daftar dropdown, kami menambahkan
beberapa <option>elemen, masing-masing dengan valueatribut. Secara default,
hanya satu dari opsi ini yang dapat dipilih.

Teks yang dirender adalah teks yang disertakan di antara <option>tag pembuka dan
penutup. Namun, nilai valueatribut yang digunakan dalam <form>penyerahan
(perhatikan perbedaan teks dan valuekapitalisasi). Saat <form>dikirimkan, informasi
dari kolom input ini akan dikirim menggunakan the namedan <select>the valuedari
yang dipilih <option>. Misalnya, jika pengguna memilih Pizza dari daftar tarik-turun,
informasinya akan dikirim sebagai "lunch=pizza".
Datalist Input
Bahkan jika kita memiliki daftar drop-down yang terorganisir, jika daftar tersebut
memiliki banyak opsi, mungkin akan membosankan bagi pengguna untuk menggulir
seluruh daftar untuk menemukan satu opsi. Di situlah menggunakan <datalist>elemen
berguna.

The <datalist>digunakan dengan <input type="text">elemen. Membuat <input>bidang teks

tempat pengguna dapat mengetik dan memfilter opsi dari file <datalist>. Mari kita
bahas contoh konkret:

Sementara <select>dan <datalist>berbagi beberapa kesamaan, ada beberapa

perbedaan utama. Di <input>elemen terkait, pengguna dapat mengetik di kolom
input untuk mencari opsi tertentu. Jika tidak ada <option>s yang cocok,
pengguna masih dapat menggunakan apa yang mereka ketikkan. Saat
formulir dikirimkan, nilai <input>s namedan the valuedari opsi yang dipilih, atau apa
yang diketik pengguna, dikirim sebagai pasangan.

Textarea element
Elemen <input>dengan type="text"membuat bidang input baris tunggal bagi pengguna
untuk mengetikkan informasi. Namun, ada kasus di mana pengguna perlu menulis
lebih banyak informasi, seperti entri blog. Dalam kasus seperti itu, alih-alih
menggunakan <input>, kita bisa menggunakan <textarea>.
Elemen <textarea>ini digunakan untuk membuat bidang teks yang lebih besar bagi
pengguna untuk menulis lebih banyak teks. Kita dapat menambahkan
atribut rowsdan colsmenentukan jumlah baris dan kolom untuk <textarea>. Lihatlah:

Jika kami menginginkan bidang teks yang lebih besar, kami dapat mengklik
dan menyeret di sudut kanan bawah untuk memperluasnya.

Saat kami mengirimkan formulir, nilai dari <textarea>adalah teks yang tertulis di
dalam kotak. Jika kami ingin menambahkan nilai default, <textarea>kami akan
memasukkannya ke dalam tag pembuka dan penutup seperti:

Kode ini akan merender a <textarea>yang berisi teks yang sudah diisi sebelumnya:
"Menambahkan teks default".

Submit Form
Ingat, tujuan dari formulir adalah untuk mengumpulkan informasi yang akan
disampaikan. Itulah peran tombol kirim — pengguna mengkliknya setelah selesai
mengisi informasi di <form>dalamnya dan mereka siap mengirimkannya. Sekarang
setelah kita membahas cara membuat berbagai elemen masukan, sekarang mari kita
membahas cara membuat tombol kirim!

Untuk membuat tombol kirim di <form>, kita akan menggunakan <input>elemen

yang dapat diandalkan dan menyetel typeke "submit". Contohnya:
Perhatikan dalam cuplikan kode yang valueditugaskan untuk <input>muncul sebagai
teks pada tombol kirim. Jika tidak ada valueatribut, teks default Submitakan muncul
di tombol.
Tinjauan
Kerja bagus berinteraksi dengan elemen yang sangat umum dan
berguna <form>!

Dalam pelajaran ini kita membahas:

 Tujuan dari a <form>adalah untuk memungkinkan pengguna

memasukkan informasi dan mengirimkannya.
 Atribut <form>'s actionmenentukan ke mana informasi formulir itu pergi.
 Atribut <form>'s methodmenentukan bagaimana informasi dikirim dan
diproses.
 Untuk menambahkan bidang bagi pengguna untuk memasukkan
informasi, kami menggunakan <input>elemen dan menyetel typeatribut
ke bidang pilihan kami:
o Pengaturan typeuntuk "text"membuat bidang baris tunggal untuk
input teks.
o Pengaturan typeuntuk "password"membuat kolom baris tunggal
yang menyensor input teks.
o Pengaturan typeuntuk "number"membuat bidang baris tunggal
untuk input angka.
o Pengaturan typeuntuk "range"membuat penggeser untuk memilih
dari rentang angka.
o Pengaturan typeuntuk "checkbox"membuat satu kotak centang
yang dapat dipasangkan dengan kotak centang lainnya.
o Pengaturan typeuntuk "radio"membuat tombol radio yang dapat
dipasangkan dengan tombol radio lainnya.
 o Menyetel typeke "text"dan menambahkan listatribut akan
memasangkan the <input>dengan <datalist>elemen
jika listof <input>dan idof <datalist>sama.
o Pengaturan typeuntuk "submit"membuat tombol kirim.
 Elemen <select>diisi dengan <option>elemen dan merender pilihan daftar
dropdown.
 Elemen <datalist>diisi dengan <option>elemen dan bekerja
dengan <input>untuk mencari melalui pilihan.
 Elemen <textarea>adalah kolom input teks yang memiliki area yang
dapat disesuaikan.
 Saat a <form>dikirimkan, namekolom yang menerima input
dan valuekolom tersebut dikirim sebagai name=valuepasangan.

Menggunakan <form>elemen bersama dengan elemen lain yang tercantum

di atas memungkinkan kami membuat situs yang mempertimbangkan
keinginan dan kebutuhan pengguna kami. Ambil kesempatan untuk
mengambil apa yang telah Anda pelajari, dan menerapkannya!
<!DOCTYPE html>

<html lang="en" dir="ltr">

<head>

<meta charset="utf-8">

<link rel="stylesheet" type="text/css" href="style.css">

<link href="https://fonts.googleapis.com/css?family=Rubik" rel="stylesheet">

<title>Forms Review</title>

</head>

<body>

<section id="overlay">

<img src="https://content.codecademy.com/courses/web-101/unit-6/htmlcss1-img_burger-logo.svg" alt="Davie's

Burgers Logo" id="logo">

<hr>

<form action="submission.html" method="POST">

<h1>Create a burger!</h1>

<section class="protein">

<label for="patty">What type of protein would you like?</label>

<input type="text" name="patty" id="patty">

</section>

<hr>

<section class="patties">

<label for="amount">How many patties would you like?</label>

<input type="number" name="amount" id="amount">

</section>

<hr>

<section class="cooked">

<label for="doneness">How do you want your patty cooked</label>

<br>

<span>Rare</span>

<input type="range" name="doneness" id="doneness" value="3" min="1" max="5">

<span>Well-Done</span>

</section>

<hr>

<section class="toppings">

<span>What toppings would you like?</span>

<br>

<input type="checkbox" name="topping" id="lettuce" value="lettuce">

 <label for="lettuce">Lettuce</label>

<input type="checkbox" name="topping" id="tomato" value="tomato">

<label for="tomato">Tomato</label>

<input type="checkbox" name="topping" id="onion" value="onion">

<label for="onion">Onion</label>

</section>

<hr>

<section class="cheesy">

<span>Would you like to add cheese?</span>

<br>

<input type="radio" name="cheese" id="yes" value="yes">

<label for="yes">Yes</label>

<input type="radio" name="cheese" id="no" value="yes">

<label for="no">No</label>

</section>

<hr>

<section class="bun-type">

<label for="bun">What type of bun would you like?</label>

<select name="bun" id="bun">

<option value="sesame">Sesame</option>

<option value="potatoe">Potato</option>

<option value="pretzel">Pretzel</option>

</select>

</section>

<hr>

<section class="sauce-selection">

<label for="sauce">What type of sauce would you like?</label>

<input list="sauces" id="sauce" name="sauce">

<datalist id="sauces">

<option value="ketchup"></option>

<option value="mayo"></option>

<option value="mustard"></option>

</datalist>

</section>

<hr>

<section class="extra-info">
 <label for="extra">Anything else you want to add?</label>

<br>

<textarea id="extra" name="extra" rows="3" cols="40"></textarea>

</section>

<hr>

<section class="submission">

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

</section>

</form>

</section>

</body>

</html>