Haikal PG - XI RPL 1 - PWPB Sesi 8

Assalamualaikum Warahmatullahi Wabarakatuh

Kembali lagi dengan saya,Haikal Putra Gustiansyah. Pada sesi ke 8 ini kita akan membahas textarea, form, dan input tag. Langsung saja ke pembahasan kali ini :

Pada HTML, terdapat komponen entri teks yang fungsinya berbeda-beda salah satunya yang belum dipelajari adalah textArea. TextArea merupakan komponen entri teks yang digunakan untuk memasukan teks yang tersusun lebih dari 1 baris. Untuk menggunakannya textarea disisipkan pada tag form layaknya komponen form lain yang biasa digunakan.
Format umum pengkodean TextArea : <textarea atribute=”value">
Terdapat beberapa atribut dari text area, diantaranya row,col dan lain sebagainya. Pada HTML 5 menyediakan banyak 6 atribut baru textarea.

textArea.html

Tampilan text area

Kita buat text area seperti diatas dengan tag <textarea></textarea> dan berikan kolom juga baris dengan atribut rows dan cols didalamnya. Codenya agar lebih jelas :

<!DOCTYPE html>
<html>
<head>
<title>cek form</title>
</head>
<body>
<p>Silahkan diisi pada teks area yang tersedia</p>
<p><textarea name="papantulis" cols="40" rows="6"></textarea></p>
</body>
</html>

textAreaCols.html

Kita buat textarea dengan bentuk yang beragam seperti ini :

yang kita butuhkan adalah membuat 3 tag textarea dan membedakan attribut cols dan rows nya agar
bentuknya seperti diatas. Code nya :

<!DOCTYPE html>
<html>
<head>
<title>Haikal Putra Gustiansyah XI RPL 1 textArea dengan Cols</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>

textAreaReadOnly.html

Kita gunakan atteibut readonly agar hanya bisa di baca saja dan tidak bisa di ubah. dengan menambahkan attribut readonly didalam text area. Tampilannya jika menggunakan attribut readonly :

ini codenya :

<!DOCTYPE html>

<html>

<head>

<title>Haikal Putra Gustiansyah XI RPL 1 textAreaReadOnly</title>

</head>

<body>

Tulisan ini tidak dapat diubah tapi bisa disalin.

</textarea>

</body>

</html>

textAreaReadDisabled.html

Attribut disabled ini bisa membuat isi text area ini tidak dapat diubah ataupun disalin. Tampilannya :

Code nya :

<!DOCTYPE html>

<html>

<head>

<title>Haikal Putra Gustiansyah XI RPL 1 textAreaReadDisabled</title>

</head>

<body>

<textarea name="terlarang" cols="40" rows="6" disabled>Tulisan ini tidak dapat disalin maupun diubah</textarea>

</body>

</html>

Pengkodean textfield dengan attribut password

textAreaPassword.html

kali ini kita akan membuat sebuah form seperti form pengisian sandi. Tampilannya :

Form

dengan tag <form></form> dan didalamnya terdapat <input type="password" maxlenght="6"></input>. Untuk lebih jelasnya lihat code berikut :

<!DOCTYPE html>
<html>
<head>
	<title>Haikal Putra Gustiansyah XI RPL 1 textAreaPassword</title>
</head>
<body>
	<form>
		Password: <input type="Password" name="pwd" maxlength="6"/>
	</form>
</body>
</html>

textAreaHidden1.html

hidden berfungsi untuk menyembunyikan. Jika kita membuat <input type="hidden"> maka jika kita jalankan tidak akan terlihat apapun. Kita akan buat sebuah form seperti tampilan berikut :

Hidden

Code :

<!DOCTYPE html>
<html>
<head>
	<title>Haikal Putra Gustiansyah XI RPL 1 textAreaHidden1</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>

Jika kita perhatikan codenya ada 2 buah 3 buah input tag namun kenapa hanya ada 2 yang muncul di browser? karena hidden inilah yang menyembunyikannya.

textAreaHidden2.html

Ini adalah lanjutan dari textAreaHidden1.html. Kita coba ubah value code di textAreaHtml1 yang hidden menjadi text area. Maka tampilannya akan seperti ini :

Codenya :

<!DOCTYPE html>
<html>
<head>
	<title>Haikal Putra Gustiansyah XI RPL 1 textAreaHidden2</title>
</head>
<body>
	<form>
		Nama : <input type="textarea" name="fnama"><br>
		<input type="textarea" name="negara" value="Indonesia" />
		<input type="submit" value="submit" />
	</form>
</body>
</html>

UploadFile.html

kita akan menggunakan tag <input type"file" accept="image/*">. type 'file' ini digunakan untuk mengupload sebuah file baik gambar sesuai keinginan. dan attribut accept ini adalah file yang harus dipenuhi seperti contoh diatas adalah image maka jika kita akan mengupload video maka tidak akan bisa. Contoh :

Upload File

Codenya :

<!DOCTYPE html>
<html>
<head>
	<title>Haikal Putra Gustiansyah XI RPL 1 Uploadfile</title>
</head>
<body>
	<font face="Courir New,Courir, mono">Upload foto</font>
	<form>
		<input type="file" name="pic" accept="image/*">
	</form>
</body>
</html>

radioButton.html

Radio ini berfungsi untuk memberikan opsi/pilihan. 'radio' ini disimpan didalam tag input dan didalam attribut type seperti ini : <input type="radio"> Contoh tampilannya :

Radio Button

Codenya :

<!DOCTYPE html>
<html>
<head>
	<title>Haikal Putra Gustiansyah radiobutton</title>
</head>
<body>
	<p>
Tingkat Pendidikan :
		<form>
			<input type="radio" name="pendidikan1">SD<br>
			<input type="radio" name="pendidikan1">SMP<br>
			<input type="radio" name="pendidikan1">SMA<br>
			<input type="radio" name="pendidikan1">D3<br>
			<input type="radio" name="pendidikan1">S1<br>

		</form>
</p>
</body>
</html>

checkBoxdanImageButton.html

Mirip dengan radio, checkbox ini memberikan opsi pilihan berbentuk 'square'/kotak. Dan kita akan mengubah tombol submit dengan sebuah image namun fungsinya tetap sama untuk men-submit. Tampilannya :

Checkbox and Submit Images

Codenya :

<!DOCTYPE html>
<html>
<head>
	<title>Haikal Putra Gustianysah XI RPL 1 Checknoxanimagebutton</title>
</head>
<body>
	<form>
		<p>
Nama depan : <input type="text" name="fname"/></p>
<p>
Nama Belakang : <input type="text" name="lname"></p>
<input type="checkbox" name="checkbox1">Darah Tinggi</input><br>
		<input type="checkbox" name="checkbox1">Asam Urat</input><br>
		<input type="checkbox" name="checkbox1">Maag</input><br>
		<p>
<input type="image" src="gambar/sad.png" alt="submit"></p>
</form>
</body>
</html>

optionDanDataList.html

kita akan membuat menu option dropdown dengan tag form,select,option,input,datalist. Pertama kita buat dulu sebuah tag form <form> </form> dan didalamnya ada tag <select name="jurusan"> </select> dan di dalam tag select kita tambahkan tag <option value="Informatika">Informatika </option>. Untuk lebih jelas lihat codingan berikut :

<!DOCTYPE html>
<html>
<head>
	<title>Haikal Putra Gustiansyah XI RPL 1 OptionValuedanDatalist</title>
</head>
<body>
	<p>
Pilih jurusanmu : </p>
<form>
		<select name="jurusan">
			<option value="informatika">informatika</option>
			<option value="matematika">matematika</option>
		</select><br>
		<input list="browsers" name="browser">
		<datalist id="browsers">
			<option value="Internet Exploler">
			<option value="Firefox">
		</datalist>
		<input type="submit" />
	</form>
</body>
</html>

Jika kita jalankan di browser maka hasilnya akan menjadi :

Hasilnya

PENDAFTARAN.html

kali ini kita coba buat form dengan desain menggunakan tabel dan form yang telah kita pelajari tadi. Tampilannya sepeti ini :

Codenya :

<!DOCTYPE html>
<html>
<head>
	<title>Haikal Putra Gustiansyah PENDAFTARAN</title>
</head>
<body>
		<table border="0" align="center" background="images.jpg">
<tr>
				<td colspan="2" align="center" >Penfdaftaran</td>
			</tr>
<tr>
				<td width="40%">Nama</td>
				<td>:<input type="text"/></td>
			</tr>
<tr>
				<td>Sandi</td>
				<td>:<input type="password"/></td>
			</tr>
<tr>
				<td>Jenis Kelamin</td>
				<form >
				<td>
					:<input type="radio" name="gender" value="Pria" />Pria
					<input type="radio" name="gender" value="Wanita"/>Wanita
				</td>
				</form>
</tr>
<tr>
				<td>Tanggal Lahir</td>
				<td>
					:<select>
						<option>1</option>
						<option>2</option>
						<option>3</option>
						<option>4</option>
						<option>5</option>
						<option>6</option>
						<option>7</option>
						<option>8</option>
						<option>9</option>
						<option>10</option>
						<option>11</option>
						<option>12</option>
						<option>13</option>
						<option>14</option>
						<option>15</option>
						<option>16</option>
						<option>17</option>
						<option>18</option>
						<option>19</option>
						<option>20</option>
						<option>21</option>
						<option>22</option>
						<option>23</option>
						<option>24</option>
						<option>25</option>
						<option>26</option>
						<option>27</option>
						<option>28</option>
						<option>29</option>
						<option>30</option>
						<option>31</option>
					</select>
					<select>
						<option value="January">January</option>
						<option value="February">February</option>
						<option value="Maret">Maret</option>
						<option value="April">April</option>
						<option value="Mei">Mei</option>
						<option value="June">Juni</option>
						<option value="Juli">Juli</option>
						<option value="Agustus">Agustus</option>
						<option value="September">September</option>
						<option value="Oktober">Oktober</option>
						<option value="November">November</option>
						<option value="Desember">Desember</option>
					</select>
					<select>
						<option>1999</option>
						<option>2000</option>
						<option>2001</option>
						<option>2002</option>
						<option>2003</option>
						<option>2004</option>
						<option>2005</option>
						<option>2006</option>
						<option>2007</option>
						<option>2008</option>
						<option>2008</option>
						<option>2010</option>
						<option>2011</option>
						<option>2013</option>
						<option>2014</option>
						<option>2015</option>
						<option>2016</option>
						<option>2017</option>
						<option>2018</option>
						<option>2019</option>
						<option>2020</option>
					</select>
				</td>
			</tr>
<tr>
				<td></td>
				<td>
					<input type="submit" name="" value="Simpan" />
					<input type="reset" name="" value="Batal" />
				</td>
			</tr>
</table>
</body>
</html>

Sekian pembahasan pada sesi kali ini, semoga bermanfaat

Wassalamualaikum Warahmatullahi Wabarokatuh

Pemrograman Web Dan Perangkat Bergerak

Cari Blog Ini

Haikal PG - XI RPL 1 - PWPB Sesi 8

Komentar

Posting Komentar

Postingan populer dari blog ini

Haikal PG - XI RPL 1 - PWPB Sesi 25

Haikal PG - XI RPL 1 - PWPB Sesi 7

Haikal PG - XI RPL 1 - PWPB Sesi 19