PWPB | Pertemuan 8
Form pada HTML
A. Form pada HTML
Form pada HTML biasanya digunakan untuk menginputkan data dari suatu halam web. Contoh penggunaan form pada web yaitu registrasi atau login. dalam tag <form> biasanya didalamnya menggunakan tag lain seperti <textarea> <label> dan <input>. Pada tag <form> memilki attribut "action" fungsinya untuk memberitahu sistem kemana data yang diisi dalam form akan dikirim dan attribut "method" fungsinya untuk memberitahu sistem metode apa yang digunakan untuk mengirimkan data yang diisi dalam form, biasanya attribut "method" ini bersisi get atau post. Untuk get dan post bisa kalian pelajari dalam PHP.
Penggunaan tag <textarea> pada html
tag <textarea> biasanya digunakan untuk mengisi comment atau pun kritik dan saran pada suatu website.
a. TextArea.html
Kodingan Penggunaan tag <textarea>
<!DOCTYPE html>
<html>
<head>
<title>Muhammad Fahru Rozi XI PRL 2</title>
</head>
<body>
<p>
Silahkan diisi pada teks area yang tersedia
</p>
<p>
<textarea name="papantulis" cols="40" rows="6"></textarea>
</p>
</body>
</html>
Hasil Kodingan di atas
Kodingan Penggunaan tag <textarea>
<!DOCTYPE html>
<html>
<head>
<title>Muhammad Fahru Rozi XI RPL 2</title>
</head>
<body>
<p>
SIlahkan diisi pada teks area yang tersedia
</p>
<textarea name="rendah" cols="30" rows="5"></textarea>
<textarea name="sedang" cols="30" rows="10"></textarea>
<textarea name="tinggi" cols="30" rows="20"></textarea>
</body>
</html>
Hasil Kodingan di atas
Kodingan Penggunaan tag <textarea>
<!DOCTYPE html>
<html>
<head>
<title>Muhammad Fahru Rozi XI RPL 2</title>
</head>
<body>
<textarea name="untukdibaca" cols="40" rows="6" readonly>
Tulisan ini tidak dapat diubah tapi bisa disalin
</textarea>
</body>
</html>
Hasil dari kodingan di atas
Kodingan Penggunaan tag <textarea>
<!DOCTYPE html>
<html>
<head>
<title>Muhammad Fahru Rozi XI RPL 2</title>
</head>
<body>
<textarea name="terlarang" cols="40" rows="6" disabled>
Tulisan ini tidak dapat disalin maupun diubah
</textarea>
</body>
</html>
Hasil Kodingan di atas
e. TextAreaPassword.html
Contoh Kodingan
<!DOCTYPE html>
<html>
<head>
<title>Muhammad Fahru Rozi XI RPL 2</title>
</head>
<body>
<form>
<label for="pwd">password :</label>
<input type="Password" name="pwd" id="pwd" maxlength="6">
</form>
</body>
</html>
Hasil Kodingan di atas
Contoh Kodingan
<!DOCTYPE html>
<html>
<head>
<title>Muhammad Fahru Rozi XI RPL 2</title>
</head>
<body>
<form>
Nama : <input type="textarea" name="fnama"><br>
<input type="Hidden" name="negara" value="Indonesia">
<input type="submit" value="submit">
</form>
</body>
</html>
Hasil Kodingan di atas
Contoh Kodingan
<!DOCTYPE html>
<html>
<head>
<title>Muhammad Fahru Rozi XI RPL 2</title>
</head>
<body>
<form>
Nama : <input type="textarea" name="fnama"><br>
<input type="textarea" name="negara" value="Indonesia"><br>
<input type="submit" value="submit">
</form>
</body>
</html>
Hasil Kodingan di atas
h. UploadFile.html
Contoh Kodingan
<!DOCTYPE html>
<html>
<head>
<title>Muhammad Fahru Rozi XI RPL 2</title>
</head>
<body>
<font face="Courier New, Courier, mono">Upload Foto</font>
<form action="">
<input type="file" name="pic" accept="assets/">
</form>
</body>
</html>
Hasil Kodingan di atas
i. RadioButton.html
Contoh Kodingan
<!DOCTYPE html>
<html>
<head>
<title>Muhammad Fahru Rozi XI RPL 2</title>
</head>
<body>
<h1>Radio Button</h1>
<p>Tingkat Pendidikan</p>
<form action="">
<input type="radio" name="pendidikan1">SD <br>
<input type="radio" name="pendidikan2">SMP <br>
<input type="radio" name="pendidikan3">SMA Sederajat <br>
<input type="radio" name="pendidikan4">D3 <br>
<input type="radio" name="pendidikan5">S1 <br>
</form>
</body>
</html>
Hasil Kodingan di atas
j. CheckboxdanImagebutoon.html
Contoh Kodingan
<!DOCTYPE html>
<html>
<head>
<title>Muhammad Fahru Rozi XI RPL 2</title>
</head>
<body>
<form action="">
<table border="0">
<tr>
<td colspan="2" align="center"><h2>Cek Kesehatan</h2></td>
</tr>
<tr>
<td><label for="nama">Nama Lengkap </label></td>
<td><input type="text" name="nama" id="nama"></td>
</tr>
<br><br>
<tr>
<td><label for="alamat">Alamat </label></td>
<td><input type="text" name="alamat" id="alamat"></td>
</tr>
<br><br>
<tr>
<td><label for="">Penyakit Yang Diderita</label></td>
<td>
<input type="checkbox" name="checkbox1">Darah Tinggi <br>
<input type="checkbox" name="checkbox2">Asam Urat <br>
<input type="checkbox" name="checkbox3">Maag <br>
<input type="checkbox" name="checkbox4">Kolestrol <br>
</td>
</tr>
<tr>
<td colspan="2" align="center"><input type="image" src="../img/enter.gif" alt="Submit"></td>
</tr>
</table>
</form>
</body>
</html>
Hasil Kodingan di atas
Contoh Kodingan
<!DOCTYPE html>
<html>
<head>
<title>Muhammad Fahru Rozi XI RPL 2</title>
</head>
<body>
<p>Pilih Jurusan dan Browser</p>
<form action="">
<select name="jurusan" id="jurusan">
<option value="Informatika">Informatika</option>
<option value="Matematika">Matematika</option>
</select>
<br><br>
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Internet Exsplorer">
<option value="Firefox"></option>
</datalist>
<input type="submit">
</form>
</body>
</html>
Hasil Kodingan di atas
Praktikum
Kodingan
<!DOCTYPE html>
<html>
<head>
<title>Muhammad Fahru Rozi XI RPL 2</title>
<style type="text/css">
table {
border: 2px solid#000;
padding: 15px;
background-image: url(../img/bbgg.jpg);
background-size: cover;
}
</style>
</head>
<body>
<form action="">
<table width="400" height="200">
<tr>
<td> <label for="nama">Nama Pengguna</label></td>
<td>:</td>
<td> <input type="text" id="nama" name="nama"></td>
</tr>
<tr>
<td> <label for="sandi">Kata Sandi</label></td>
<td>:</td>
<td> <input type="password" id="sandi" name="sandi"></td>
</tr>
<tr>
<td><label for="jl">Jenis Kelamin</label></td>
<td>:</td>
<td>
<input type="radio" id="jl" name="jl">Laki-Laki
<input type="radio" id="jl" name="jl">Perempuan
</td>
</tr>
<tr>
<td><label for="tl">Tanggal Lahir</label></td>
<td>:</td>
<td>
<select name="tl" id="tl">
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
</select>
<select name="tl" id="tl">
<option value="">Januari</option>
<option value="">Februari</option>
<option value="">Maret</option>
<option value="">April</option>
<option value="">Mei</option>
<option value="">Juni</option>
<option value="">Juli</option>
</select>
<select name="tl" id="tl">
<option value="">1998</option>
<option value="">1999</option>
<option value="">2000</option>
</select>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td>
<input type="submit" value="Submit">
<input type="submit" value="Batal">
</td>
</tr>
</table>
</form>
</body>
</html>
Hasil Kodingan di atas
Sekian Materi Yang Dapat Saya Berikan Terima Kasih (:
0 Comments