Scribd
Unggah
41 tayangan

Form HTML

Tag <input> digunakan untuk membuat berbagai jenis elemen form seperti teks, password, checkbox, radio, dan tombol submit dengan menggunakan atribut type. Tag <textarea> mirip dengan input teks namun ukurannya lebih besar. Tag <select> memberikan pilihan data kepada pengguna melalui tag <option>.

Diunggah oleh

Muhammad Riski Anugrah
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
41 tayangan

Form HTML

Tag <input> digunakan untuk membuat berbagai jenis elemen form seperti teks, password, checkbox, radio, dan tombol submit dengan menggunakan atribut type. Tag <textarea> mirip dengan input teks namun ukurannya lebih besar. Tag <select> memberikan pilihan data kepada pengguna melalui tag <option>.

Diunggah oleh

Muhammad Riski Anugrah
Hak Cipta
© © All Rights Reserved
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 10

FORM HTML

Tag <input>

Tag <input> adalah tag yang digunakan dalam form pengisian dan memiliki
banyak bentuk, mulai dari isian text biasa, text password, checkbox, radio,
sampai dengan tombol submit, semuanya diatur pada tag <input>.
Bentuk-bentuk dari keluarga tag input ini dibedakan berdasarkan atribut type:
 <input type=”text” /> atau bisa juga <input /> adalah textbox inputan
biasa yang menerima input berupa text, contohnya digunakan untuk inputan
nama, username, dan inputan yang berupa teks pendek. Input type text ini
juga bisa memiliki atribut value yang bisa diisi nilai tampilan awal dari text.
 <input type=”password” /> tampilan inputan teks pada typer
password sama seperti type text, namun teks yang diinput tidak akan
terlihat, tetapi akan berupa bintang atau titik. Textbox ini biasanya
digunakan pada inputan password.
 <input type=”submit” /> tipe inputan ini akan menampilkan tombol
(button) untuk memproses data inputan form.
 <input type=”checkbox” />
Contohnya:
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Mengenal Form Nusantech Academy</title>

<body>

<form action="latihan.html" method="get">

<p>Silahkan isi data berikut :</p>

Nama : <input type="text" name="nama"> <br />


Jenis Kelamin :

<input type="radio" name="jenkel" value="laki-laki">Laki-laki

<input type="radio" name="jenkel" value="perempuan">Perempuan

<br />

Username : <input type="text" name="username"> <br />

Password : <input type="password" name="password"> <br />

Course yang diikuti:

<input type="checkbox" name="html">HTML & CSS

<input type="checkbox" name="javascript">Javascript

<input type="checkbox" name="react">React JS

<input type="checkbox" name="node">Node Js

<br /><br />

<button type="submit" name="submit" value="simpan">Simpan</button>

</form>

</body>

</html>

Hasilnya seperti ini:


Tag <textarea>

Tag <textarea> ini sama dengan input Type Text, namun ukurannya lebih besar
dari form text biasa dan dapat berisi banyak baris. Panjang dan banyak baris
untuk text area bisa diatur melalui atribut Rows dan Cols, atau melalui CSS.
Contohnya :
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Mengenal Form Nusantech Academy</title>

<style>

#alamat{

font-size: 10px;

color: red;

font-style: normal;

</style>
<body>

<form action="latihan.html" method="get">

<p>Alamat:</p>

<textarea name="alamat" id="alamat" cols="30" rows="10"></textarea>

</form>

</body>

</html>

Hasilnya seperti ini:

Dari hasil tersebut, saya menambahkan Style CSS pada inputan alamatnya,
tetapi jika teman-teman tidak ingin menambahkan style CSS pada input nya,
maka tidak usah memanggil atribut ID atau atribut id nya dihapus saja.

Tag <select>

Tag <select> ini digunakan untuk memberikan pilihan pada user dari data yang
sudah tersedia. Dalam tag <select> terdapat tag <option> yang digunakan untuk
membuat pilihan data.
Contohnya :
<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Mengenal Form Nusantech Academy</title>

<body>

<form action="latihan.html" method="get">

<p>Pilih Course:</p>

<select name="select">

<option value="html">HTML</option>

<option value="javascript">Javascript</option>

<option value="react">React JS</option>

<option value="node">Node JS</option>

</select>

</form>

</body>

</html>

Hasilnya seperti ini:

Untuk lebih jelasnya lagi saya akan membuah sebuah form registrasi peserta
course Nusantech Academy. Form ini berisi :
 Inputan nama lengkap.
 Inputan username.
 Inputan password.
 Inputan jenis kelamin.
 Inputan tanggal lahir.
 Inputan pilih course.
 Inputan agama.
 Inputan email.
 Inputan alamat.
Langsung saja kita buat form nya.
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Mengenal Form Nusantech Academy</title>

<body>

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

<fieldset>

<legend><h1>Formulir Peserta Nusantech Academy</h1> </legend>

<p>

<label>Nama :</label>

<input type="text" name="nama" placeholder="Masukan nama lengkap">

</p>

<p>

<label>Username :</label>

<input type="text" name="username" placeholder="Masukan username">

</p>
<p>

<label>Password :</label>

<input type="text" name="password" placeholder="Masukan password">

</p>

<p>

<label>Jenis Kelamin :</label>

<input type="radio" name="jenkel" value="laki-laki">Laki-laki

<input type="radio" name="jenkel" value="perempuan">Perempuan

</p>

<p>

<label>Tanggal Lahir :</label>

<input type="date" name="tanggal">

</p>

<p>

<label>Agama :</label>

<select name="agama">

<option value="budha">Budha</option>

<option value="hindu">Hindu</option>

<option value="islam">Islam</option>

<option value="katholik">Kristen Katholik</option>

<option value="protestan">Kristen Protestan</option>

</select>

</p>

<p>
<label>Email :</label>

<input type="email" name="email" placeholder="Masukkan email">

</p>

<p>

<label>Pilih Course:</label>

<input type="checkbox" name="html">HTML & CSS

<input type="checkbox" name="javascript">Javascript

<input type="checkbox" name="react">React JS

<input type="checkbox" name="node">Node Js

</p>

<p>

<p>Alamat :</p>

<textarea name="alamat"cols="50" rows="10"></textarea>

</p>

<p>

<input type="submit" name="submit" value="Daftar">

</p>

</fieldset>

</form>

</body>

</html>

Hasilnya seperti ini:


Dan ini hasil yang sudah diisi datanya :

Anda mungkin juga menyukai