Inputs
Basics
Input adalah elemen HTML yang digunakan untuk menerima data dari pengguna. Input biasanya digunakan dalam formulir.
Input memiliki beberapa jenis, seperti text, password, email, number, checkbox, radio, file, submit, reset, button, dll.
banyak diantaranya hanya berupa <input/> yang memiliki type attribute yang berbeda untuk membedakan jenis input
<input type="text" placeholder="username" />
<input type="password" placeholder="password" />
<input type="email" placeholder="email" />
<input type="number" placeholder="number" />
<input type="checkbox" id="checkbox" />
<div>
<input type="radio" id="radio" name="jenis-kelamin" value="laki-laki" />
<input type="radio" id="radio" name="jenis-kelamin" value="perempuan" />
</div>
<input type="file" />input lainnya
textarea
Textarea adalah elemen HTML yang digunakan untuk menerima data dalam bentuk teks yang lebih panjang.
<textarea placeholder="masukkan alamat"></textarea>select
Select adalah elemen HTML yang digunakan untuk membuat dropdown list.
<select>
<option value="1">Pilihan 1</option>
<option value="2">Pilihan 2</option>
<option value="3">Pilihan 3</option>
</select>label
ketika kita membuat input seperti text, password, email, checkbox, radio, file, select, dll, kita bisa memberikan label pada input tersebut.
kegunaannya adalah sebagai penanda input tersebut untuk apa.
<label for="username">Username</label>
<input type="text" id="username" name="username" placeholder="username" required />"kenapa engga pakai <p> aja?" karena label ini bisa di klik dan langsung fokus ke inputnya. dengan menggunakan for dan id attribute yang valuenya sama pada inputnya.
sekarang coba klik Username pada website yang telah kamu buat. hasilnya akan membuat input dengan id username menjadi fokus.
placeholder
placeholder adalah attribute yang digunakan untuk memberikan informasi pada input, apa yang diharapkan dari input tersebut.
<input type="text" placeholder="username" />
<input type="password" placeholder="password" />
<input type="email" placeholder="email" />ketika input di tampilkan di browser dan belum di isi, maka placeholder akan muncul di dalam input tersebut, dan user sudah mulai mengetik, placeholder akan hilang.
name
ketika kamu mengirim data form lewat input input ini, tidak semerta-merta server akan mengetahui jenis data apa yang sedang dikirimkan
<input type="text" placeholder="username" />yang server tau dari kode di atas adalah okay ada input masuk yang isinya text
tapi jika
<input type="text" name="username" placeholder="username" />maka server akan tau okay ada input masuk yang isinya text, dan ini adalah username
server akan membaca seperti ini
username=ini-username-yang-di-inputkan
value
value adalah attribute yang digunakan untuk memberikan nilai pada input.
<input type="text" value="ini value" /><input type="radio" name="jenis-kelamin" value="laki-laki" />
<input type="radio" name="jenis-kelamin" value="perempuan" />input diatas adalah type radio, selama namenya sama, maka hanya bisa dipilih satu.
dan server akan membaca nilai yang ada di value itu
final code
<h2>sign up</h2>
<form action="/submit-form" method="post">
<input
type="text"
id="username"
name="username"
placeholder="username"
required
/>
<input
type="password"
id="password"
name="password"
placeholder="password"
required
/>
<input type="email" id="email" name="email" placeholder="email" required />
<input type="radio" id="radio" name="jenis-kelamin" value="laki-laki" />
<input type="radio" id="radio" name="jenis-kelamin" value="perempuan" />
<p>menikah?</p>
<input type="checkbox" id="checkbox" />
<textarea placeholder="masukkan alamat"></textarea>
<select>
<option value="1">SD</option>
<option value="2">SMP</option>
<option value="3">SMA</option>
<option value="4">D3</option>
<option value="5">S1</option>
<option value="6">S2</option>
<option value="7">S3</option>
</select>
<button type="submit">Kirim</button>
</form>