Membuat Form HTML
Assalamu'alaikum teman-teman KWP semua🙏😊,
Salam sejahtera bagi kita semua, Semoga kita tetap dalam lindungan Tuhan Yang Maha Esa.
Diartikel kali ini saya ingin berbagi satu materi tentang HTML yaitu Cara Membuat Form HTML. Pastinya pada setiap website kita pernah melihat sebuah form yang berada pada website itu, entah itu form Search, Form Login, From Button, dan masih banyak lagi form yang biasa ditampilkan pada halaman website. Banyak sekali kegunaan form untuk sebuah website, mulai dari untuk melakukan pencarian artikel dengan menuliskan keyword yang kita cari, untuk melakukan login, untuk mengirim pesan, untuk melakukan pemilihan, dan lain-lain.
Untuk itu diartikel kali ini saya ingin memberikan kalian tutorial Cara Membuat Form Dengan HTML.
Pertama yang akan kita buat adalah Form Field Text.
- Siapkan terlebih dahulu bahan-bahannya, yaitu text editor dan Web Servernya Atau klik disini untuk melihat bahan-bahannya.
- Start Apache pada XAMPP dan Sublime Text atau text editor kalian. Klik disini untuk melihat langka melakukan start apache dan sublime text.
- Silahkan ketikkan Code HTML dibawah ini
<html>
<head>
<title>Form Field Text</title>
</head>
<body>
<h1>Form Field Text</h1>
<p>
<form>
Nama Depan : <input name="nama_depan" type="text" id="nama_depan" /><br>
Nama Belakang : <input name="nama_belakang" type="text" id="nama_belakang" />
</form>
</p>
</body>
</html>
Keterangan: type="text" berguna sebagai tulisan yang akan ditampilkan pada form tersebut yaitu sesuatu dalam bentuk text yang akan ditampilkan.
- Simpan dan jalankan pada browser kalian. Maka, tampilannya seperti gambar dibawah ini
Ke dua kita akan membuat Form Field Text And Password yang dimana kita akan membuat sebuah form yang akan menampilkan text dalam bentuk text biasa dan text dalam bentuk tampilan input sebuah password.
- Silahkan ketikkan code HTML dibawah ini
<html>
<head>
<title>Form Field Text And Password</title>
</head>
<body>
<h1>Form Field Text And Password</h1>
<p>
<form>
Username : <input name="username" type="text" id="username" /><br>
Password : <input name="password" type="password" id="password" />
</form>
</p>
</body>
</html>
- Simpan dan jalankan pada browser kalian. Maka, tampilannya akan seperti gambar dibawah ini
- Ketikkan code HTML dibawah ini
<html>
<head>
<title>Form Checkbox</title>
</head>
<body>
<h1>Form Checkbox</h1>
<p>
Cewe idaman anda :<br>
<form>
<input name="cantik" type="checkbox" id="cantik" value="cantik">Cantik<br>
<input name="glowing" type="checkbox" id="glowing" value="glowing">Glowing<br>
<input name="pintar" type="checkbox" id="pintar" value="pintar">Pintar Masak
</form>
</p>
</body>
</html>
- Simpan dan jalankan pada browser kalian. Maka, tampilannya akan seperti gambar dibawah ini
Ke empat kita akan membuat Form Radio Button yaitu sebuah form yang berguna sebagai alat untuk memilih sesuatu seperti memilih ketua osis.
- Silahkan ketikkan code HTML dibawah ini
<html>
<head>
<title>Form Radio Button</title>
</head>
<body>
<h1>Form Radio Button</h1>
<p>
Calon Ketua OSIS : <br>
<form>
<input name="calon" type="radio" value="H">Haidar<br>
<input name="calon" type="radio" value="M">Moreno<br>
<input name="calon" type="radio" value="F">Faiq
</form>
</p>
</body>
</html>
Keterangan: Radio Button harus memiliki name yang sama supaya bisa memilih satu calon saja.
- Simpan dan jalankan pada browser kalian. Maka, tampilannya akan seperti gambar dibawah ini
Ke lima kita akan membuat Form Drop Down Menu yaitu sebuah form yang berguna untuk memilih sebuah menu seperti tanggal lahir, pilih jurusan, dan menu-menu pilihan lainnya.
- Silahkan ketikkan code HTML dibawah ini.
<html>
<head>
<title>Form Drop Down Menu</title>
</head>
<body>
<h1>Form Drop Down Menu</h1>
<p>
Pilih Jurusan :
<form>
<select name="select">
<option value="informatika">Informatika</option>
<option value="ilmu komputer">Ilmu Komputer</option>
<option value="teknik elektro">Teknik Elektro</option>
<option value="Pilih Jurusan" selected>Pilih Jurusan</option>
</select>
</form>
</p>
</body>
</html>
Keterangan : Selected berguna sebagai option awal yang akan ditampilkan sebelum memilih jurusan.
- Simpan dan jalankan pada browser kalian. Maka, tampilannya akan seperti gambar dibawah ini
Selanjutnya kita akan membuat Textarea yang berguna sebagai form untuk memasukkan komentar, memasukkan pesan, menulis artikel berita, dan lain-lain.
- Silahkan ketikkan code HTML dibawah ini.
<html>
<head>
<title>Textarea</title>
</head>
<body>
<h1>Textarea<h1>
<p>
<form>
<textarea name="textarea" cols="50" rows="5" placeholder="Isikan komentar anda"></textarea>
</form>
</p>
</body>
</html>
- Simpan dan jalankan pada browser kalian. Maka, tampilannya akan seperti gambar dibawah ini
Selanjutnya kita akan membuat Form File Upload yaitu sebuah form untuk mengupload sebuah file dari komputer kita.
- Silahkan ketikkan code HTML dibawah ini
<html>
<head>
<title>Form File Upload</title>
</head>
<body>
<h1>Form File Upload</h1>
<p>
<form>
<input type="file" name="file">
</form>
</p>
</body>
</html>
- Simpan dan jalankan pada browser kalian. Maka, tampilannya akan seperti gambar dibawah ini
Yang terakhir kita akan membuat Form Button yaitu sebuah button yang diklik untuk diarahkan kepada sebuah halaman lain atau yang jika kita klik akan melakukan tindakkan sesuai dengan arahan dan fungsi button tersebut.
- Ketikkan code HTML dibawah ini.
<html>
<head>
<title>Form Button</title>
</head>
<body>
<h1>Form Button</h1>
<p>
<form>
<input type="submit" value="Klik" />
</form>
</p>
</body>
</html>
- Simpan dan jalankan pada browser kalian. Maka, tampilannya akan seperti gambar dibawah ini
Oke teman-teman, itulah beberapa materi kita tentan form.
Semoga bermanfaat buat kalian semua,
Jika ada pertanyaan, kritik, dan komentar lainnya silahkan berkomentar dibawah yah, karena tanpa komentar kalian saya tidak tau kesalahan saya dibagian mana dan bisa mempelajari pertanyaan-pertanyaan dari kalian semua.
Terimakasih,
Semangat Otodidak💪
Komentar
Posting Komentar