Skip to main content

Entri Teks pada HTML - P8

 Komponen Entri Teks

Pembahasan di blog ini diantaranya:
1 Teks Area
2 Radio Button
3 Check Box
4 Option Value
5 Entri Teks 

          TextArea merupakan komponen entri teks yang digunakan untuk memasukan teks yang tersusun lebih dari 1 baris.
Cara menggunakannya yaitu textarea disisipkan diantara tag pembuka <textarea> dan tag penutup </textarea> sebagai awal konten.

1. Text Area


Attribut Teks Area:

Dan contoh Codingnya:


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<html>
<head>
 <title>cek form</title>
</head>
<body>
 <h2>Dibuat Oleh: Muhamad Alfi R.</h2>
 <h2>Kelas     :XI RPL 1</h2>
 <p>Silahkan isi pada teks area yang tersedia</p>
 <p><textarea NAME="papantulis" COLS=40 rows="6">
</textarea></p>
</body>
</html>

Hasilnya:


Contoh teks area dengan attribute kolom:


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
 <title>textArea dengan Cols</title>
</head>
<body>
 <h2>Dibuat Oleh: Muhamad Alfi R.</h2>
    <h2>Kelas     :XI RPL 1</h2>
 <p>Silahkan diisi pada teks 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>

Hasilnya:


Text area read Only:


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
 <title>cek form</title>
</head>
<body>
 <h2>Dibuat Oleh: Muhamad Alfi R.</h2>
 <h2>Kelas     :XI RPL 1</h2>
 <textarea name="untuk dibaca" cols="40" rows="6" readonly>
  Tulisan ini tidak dapat diubah tapi bisa disalin.
 </textarea>

</body>
</html>

Hasilnya:
text area READONLY

Dibuat Oleh: Muhamad Alfi R.

Kelas :XI RPL 1




Text area menggunakan atribut disable:


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
 <title>Text arae disabled</title>
</head>
<body>
 <h2>Dibuat Oleh: Muhamad Alfi R.</h2>
 <h2>Kelas     :XI RPL 1</h2>
 <textarea name="terlarang" cols="40" rows="6" disabled>
  Tulisan ini tidak dapat disalin maupun diubah.
 </textarea>

</body>
</html>

Hasilnya:


Text Area dengan atribut Password:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
<!DOCTYPE html>
<html>
<head>
 <title>penulisan password</title>
</head>
<body>
 <h2>Dibuat Oleh: Muhamad Alfi R.</h2>
 <h2>Kelas     :XI RPL 1</h2> 
 <form>
  Password: <input type="password" name="pwd" maxlength="6">
 </form>

</body>
</html>

Hasilnya:



Text area menggunakan atribut hidden:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
 <title>hidden input file</title>
</head>
<body>
 <h2>Dibuat Oleh: Muhamad Alfi R.</h2>
 <h2>Kelas     :XI RPL 1</h2>
 <form>
  Nama : <input type="textarea" name="fnama"><br>
<input type="hidden" name="negara" value="indonesia">
<input type="submit" value="Submit">

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

Hasilnya:

Text area menggunakan atribut upload file:


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html>
<head>
 <title>Input file atau foto</title>
 <link rel="stylesheet" href="">
</head>
<body>
 <h2>Create by : Muhamad Alfi R.</h2>
 <h2>Kelas     : XI RPL 1</h2>
 <font face="Calibry body">
  Upload foto
 </font>
 <form>
  <input type="file" name="pio" accept="image/*">
 </form>
</body>
</html>

Hasilnya:

2. Radio Button

  Radio button adalah salah satu elemen form dasar dalam dunia html. Mereka biasa digunakan pada saat ada 2 atau lebih pilihan yang eksklusif, dan user diharuskan dan hanya diperbolehkan untuk memilih hanya salah satu dari pilihan tersebut.
Dengan kata lain, Jika memilih salah satu pilihan dalam form radio button tersebut, maka secara otomatis akan mengeliminasi pilihan lain yang mungkin dipilih sebelumnya.
Fungsi dari button ini sangatlah membantu dalam tujuan menghindarkan user memasukan data yang rentan salah, karena dalam form tersebut hanya ditampilkan pilihan yang valid.
 Contoh:


 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
<head>
 <title>radio button</title>
</head>
<body>
 <h2>Dibuat Oleh: Muhamad Alfi R.</h2>
 <h2>Kelas     :XI RPL 1</h2>
 <p>Tingkat Pendidikan :
  <form>
   <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>
 </p>
</body>
</html>

Hasilnya:



3. Check Box

  Tag Input type checkbox berfungsi untuk membuat checkbox atau kotak isian yang diisi dengan cara menceklist kotak tersebut. checkbox biasa digunakan untuk pilihan yang dapat dipilih dengan lebih dari 1 pilihan.
Dalam penggunaan checkbox HTML, kita hanya memerlukan tag input dengan sebuah atributtype=”checkbox”. Berikut contoh checkbox dalam HTML:
Contoh:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
 <title>Cek Kesehatan</title></head>
     <body>
          <h2>Dibuat Oleh: Muhamad Alfi R.</h2>
          <h2>Kelas     :XI RPL 1</h2>
      <p>Penyakit yang diderita :</p>
      <form>
       <p>Nama Depan : <input type="text" name="fname"></p>
       <input type="checkbox" name="checkbox1">Darah Tinggi</input><br>
       <input type="checkbox" name="checkbox2">Asam urat</input><br>
       <input type="checkbox" name="checkbox3">Maag</input><br>
       <p><input type="image" src="tombol.gif" alt="Submit"width="100"></p>
      </form>

</body>
</html>

Hasilnya:


4.Option Value


HTML <option> element merepresentasikan sebuah opsi (pilihan dari daftar alternatif). Jadi, opsi ditulis lebih dari satu sebagai daftar untuk memilih pilihan yang diinginkan oleh user.

<option> element ditulis sebagai anak element dari <select>, <datalist> dan <optgroup>.
Contoh:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
 <title>Browser favorit Jurusan</title>
</head>
<body>
 <h2>Dibuat Oleh: Muhamad Alfi R.</h2>
 <h2>Kelas     :XI RPL 1</h2>
 <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 Edge">
  <option value="Firefox">
  </datalist>
  <input type="submit">
</form>
</body>
</html>

Hasilnya:


Form

Setelah tahu penggunaan text Box dan Pilihan,Ini Form buatan saya:

Codingnya:




 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<html>
<head>
<title>Masuk</title>
</head>
<body background="latar.jpg">
 <font face="Calibry body">
 <br><br><br><br><br><br>
 <table border="0" cellspacing="5" align="center" width="400" height="490">
<body>
<form>
<center><h1><br><br><br><br>Akun Pendaftaran</h1>
Username :<input type="text" name="username"><br><br>
Password :<input type="password" name="pass"><br><br>
Jenis Kelamin   :<input type=Radio name=Gender value=M>Pria  <input type=Radio name=Gender value=F>Wanita <br><br>
Tanggal lahir    :<select name="day"> <option value="1">1 <option value="2">2 <option value="3">3 <option value="4">4 <option value="5">5 <option value="6">6 <option value="7">7 <option value="8">8 <option value="9">9 <option value="10">10 <option value="11">11 <option value="12">12 <option value="13">13 <option value="14">14 <option value="15">15 <option value="16">16 <option value="17">17 <option value="18">18 <option value="19">19 <option value="20">20 <option value="21">21 <option value="22">22 <option value="23">23 <option value="24">24 <option value="25">25 <option value="26">26 <option value="27">27 <option value="28">28 <option value="29">29 <option value="30">30 </select>
          <select name="month"> <option value="1">Januari <option value="2">Februari <option value="3">Maret <option value="4">April <option value="5">Mei <option value="6">Juni <option value="7">Juli <option value="8">Agustus <option value="9">September <option value="10">Oktober <option value="11">November <option value="12">Desember</select>
          <select name="year"> <option value="1989">1989 <option value="1990">1990 <option value="1991">1991 <option value="1992">1992 <option value="1993">1993 <option value="1994">1994 <option value="1995">1995 <option value="1996">1996 <option value="1997">1997 <option value="1998">1998 <option value="1999">1999 <option value="2000">2000 <option value="2001">2001 <option value="2002">2002 <option value="2003">2003 <option value="2004">2004 <option value="2005">2005 <option value="2006">2006 <option value="2007">2007 <option value="2008">2008 <option value="2009">2009 <option value="2010">2010 <option value="2011">2011 <option value="2012">2012 <option value="2013">2013 <option value="2014">2014 <option value="2015">2015 <option value="2016">2016 <option value="2017">2017 <option value="2018">2018 </select>
          
   <br><br><button type=Button>Masuk</button>
    <button type=Button>Batal</button>
<hr width="100" align="left" color="black"> Dibuat Oleh:Muhamad Alfi
</form>
</body>
</html>

hasilnya:

Comments

Post a Comment

Popular posts from this blog

Membuat Anak Tangga menggunakan PHP - P24

Cara Membuat Anak Tangga menggunakan Array 2 Dimensi & Looping  Kali ini saya akan menunjukan kepada kalian cara membuat Anak Tangga di PHP menggunakan Array 2 dimensi & Looping dengan menyesuaikan Input dan pilihan warna dari User. Semoga bermanfaat~ <?php error_reporting ( 0 ); $jumlah = $_POST [ 'anakTangga' ]; $warna = $_POST [ 'warnaTangga' ]; for ( $i = 0 ; $i < $jumlah ; $i ++) { for ( $j = 0 ; $j < $i ; $j ++) { echo "<div class='kotak' style='background-color:$warna'></div>" ; } echo "<div class='kotak' style='background-color:$warna'></div><br>" ; } ?> Dan ini hasilnya Keterangan: Bahwa dalam menggunakan Array 2 Dimensi & Looping akan terus menerus mengulang sesuai dengan Input User <!DOCTYPE html> <html> <head> <title> Tangga Berwarna </title> </head> &
Post a Comment
Read more

Komponen Audio,Video & Flash - P7

Menyediakan komponen, Audio, Video & Flash Format Tampilan Video Kita dapat menampilkan format audio pada halaman web, untuk menampilkannya dapat digunakan format seperti ini  Hasilnya: Source Code: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <!DOCTYPE html> <html> <head> <title> cek video </title> </head> <body> <video width= "999" height= "540" controls poster= "gambarku/cute-030.jpg" > <source src= "This Is Me.mkv" type= "video/mp4" > browser anda tidak mendukung format video ini </video> </body> </html> Format Tampilan Audio  Hasilnya: Format Tampilan Flash 1 2 3 4 5 6 7 8 <html> <head> <title> Animasi </title> </head> <body> <embed src= "media/Strong.swf" > </body> </html> Hasilnya: Aud
4 comments
Read more

List dan List Kombinasi - P4

Pemrograman Web-List Jenis List Ada 3 Macam Listing di HTML diantaranya: 1. Ordered List: Sebagai Penanda secara Terurut 2. Unordered List: Untuk membuat Penanda secara Tak Terurut 3. Definiton List: Sebagai Daftar Definisi Untuk Ordered List biasanya menggunakan angka 1,2,3 atau huruf Romawi I,II,III. Juga dengan Alfabet a,b,c,d atahupun dengan huruf "i"(i,ii,iii).Ordered List ini cocok sebagai urutan, Membuat Teks Prosedur untuk membuat sesuatu seperti langkah langkah,Komposisi makanan,Cara membuat,dan lain sebagainya. Ordered List: Ordered List perlu memakai Tag <ol>bdi bagian awal dan Tag</ol> di bagian akhir. Dan kita huga harus menambahkan Tag<ii> dan </ii> di bagian yang diberi Tanda. Contoh Penulisan Ordered List: <ol> <li> Urutan Pertama </li> <li> Urutan Kedua </li> </ol> Itu adalah contoh penulisan Ordered List.Ordered List bisa ditampilkan dengan huruf, angka, angka Romaw
Post a Comment
Read more