Menyajikan Komponen Entri Teks | Nassya Putri R

Assalamualaikum wr.wb teman-teman, kali ini saya kembali untuk membagikan beberapa informasi mengenai penyajian komponen entri teks pada html.
Berikut hal hal yang akan saya jelaskan :

1. Pengkodean Text Area A
2. Pengkodean Text Area dengan Atribut Cols (kolom)
3. Pengkodean Text Area dengan Atribut READONLY
4. Pengkodean Text Area dengan Atribut Disabled
5. Pengkodean Textfield dengan Atribut Password
6. Text Area Hidden 1
7. Text Area Hidden 2
8. Upload File
9. Radio Button
10. Checkbox and Image Button
11. Option Value and Data List
12. Tugas Membuat Halaman Web

Jangan lupa untuk menyimpan file dengan eksistensi .html menggunakan aplikasi editor html. Saya menggunakan sublime text.

Pengkodean Text Area A

1 (a)

1 (b)

Fungsi tag dan atribut :
1. <textarea> ... </textarea> : Digunakan untuk membuat text inputan yang bisa menampung lebih dari 1 baris inputan. Biasanya digunakan untuk inputan yang panjang, seperti komentar, keterangan, atau catatan.
2. NAME="" : Berfungsi sebagai identitas dari tag textarea tersebut.
3. cols & rows : Berfungsi untuk membatasi tampilan lebar kolom (cols) dan tinggi baris (rows).

Pengkodean Text Area dengan Atribut Cols (kolom)

2 (a)

2 (b)

Atribut dan tag yang digunakan, sama dengan no 1.

Pengkodean Text Area dengan Atribut READONLY dan DISABLED

3 (a)

3 (b)

4 (a)

4 (b)

Atribut disabled dan readonly digunakan untuk membuat textarea tidak bisa digunakan. Penggunaan atribut ini biasanya di kombinasikan dengan javascript agar berfungsi maksimal.  Kedua atribut ini hanya memiliki 1 nilai, yaitu dirinya sendiri. Walaupun kedua textarea yang memiliki atribut ini tidak bisa digunakan, namun keduanya akan memiliki tampilan yang berbeda. Atribut disabled akan membuat kotak text berwarna abu-abu, sedangkan atribut readonly tampak seperti kotak text biasa.

Pengkodean Textfield dengan Atribut Password

5 (a)

5 (b)

- type=password, text isian tidak akan ditampilkan, namun diganti dengan karakter khusus.

Text Area Hidden 1

6 (a)

6 (b)

Fungsi Tag dan Atribut :
- type="hidden" : Input hidden tidak tampil pada halaman HTML. Biasanya digunakan untuk meneruskan atau menyimpan variabel dari server pada halaman client. Karena digunakan untuk menyimpan nilai, biasanya tipe input ini selalu disertai atribut name dan value.- type="submit" : Input submit akan mengirimkan isi form ke server, ke alamat yang tertera pada atribut action pada elemen form. Nilai pada atribut value akan menjadi tulisan yang tampil pada tombol submit.

Text Area Hidden 2

7 (a)

7 (b)

Upload File

8 (a)

8 (b)

Fungsi Tag dan Atribut :
- type="file" : Berguna untuk memilih dan mengirimkan file ke server.

Radio Button

9 (a)

9 (b)

Fungsi Tag dan Atribut :
- type="radio" :  Berfungsi untuk memilih satu di antara banyak.

Checkbox and Image Button

10 (a)

10 (b)

Fungsi Tag dan Atribut :
- type="checkbox" : Berfungsi untuk membuat kotak isian yang diisi dengan cara mencentang kotak tersebut. Checkbox biasanya  digunakan untuk pilihan yang dapat dipilih dengan lebih dari 1 pilihan.- type="image" : Fungsi utamanya adalah memasukkan gambar ke dalam form. Gambar tersebut akan berfungsi sebagai objek form yang bisa di-klik oleh user. Ketika user men-klik gambar tersebut, web browser akan mengirimkan koordinat titik dimana gambar di-klik.

Option Value and Data List

11 (a)

11 (b)

Fungsi Tag dan Atribut :- <select>...</select> = Digunakan untuk memilih di antara beberapa pilihan. Pilihan di dalam elemen select dinyatakan dengan elemen option. Teks yang tampil diapit oleh tag option, sedangkan nilai yang dikirim ke server dinyatakan dalam atribut value pada elemen option.

- <datalist>...</datalist> : Digunakan untuk merepresentasikan daftar opsi (pilihan) yang diberikan pada sebuah input control dengan daftar pilihan (masukkan) yang sebelumnya sudah terdefinisikan 

HTML element <datalist> merupakan element tersembunyi yang tidak ditampilkan secara langsung pada jendela browser.

<datalist> element ditulis bersamaan dengan element <input> sebagai pilihan masukkan yang diberikan dari daftar option di dalam <datalist> tersebut. Sehingga, pada <input> control tersebut tersedia daftar pilihan otomatis yang dapat dipilih tanpa mengetik ulang.

Dalam penggunaannya, <datalist> element harus ditulis dengan nama id tertentu yang nantinya nama id tersebut digunakan sebagai value dari attribute list di dalam <input>

Berikut merupakan penjelasan dari bagian bagian textarea

Tugas Membuat Halaman Web

12 (a)

12 (b)

12 (c)

12 (d)

Fungsi Tag dan Atribut :
- <pre>...</pre> : Digunakan untuk merepresentasikan sebuah blok teks preformat (preformatted text). Teks yang ditulis didalam <pre> elemen memiliki struktur berdasarkan ketetapan tifografi, artinya teks ditulis apa adanya sesuai format yang ditulis didalam file (dokumen HTML).

Nah, sekian informasi yang dapat saya sampaikan. Tunggu post terbaru dari saya ya teman-teman! Mohon maaf apabila ada kata kata yang tidak enak, ataupun sulit dimengerti. Terima kasih, Wassalamualaikum wr wb.🌸❤