Lompat ke konten Lompat ke sidebar Lompat ke footer

Menentukan Ukuran HTML Menggunakan Atribut Size

Atribut size pada html digunakan untuk menentukan inisialisasi width untuk field input dan jumlah baris visible untuk elemen yang dipilih pada dokumen html.


3 Contoh Penerapan Atribut Size pada Elemen HTML
Ilustrasi Atribut Size HTML

Sebelum memahami lebih dalam materi tentang Menentukan Ukuran HTML Menggunakan Atribut Size, terlebih dahulu pelajari materi tentang: Menyeleksi Elemen HTML Menggunakan Atribut Selected [klik], Menggabungkan Baris Tabel HTML Menggunakan Atribut Rowspan [klik], dan Menentukan Jumlah Baris HTML Menggunakan Atribut Rows [klik].

Ukuran dari atribut size dapat digunakan dengan elemen berikut:
  • <input>
  • <hr>
  • <select>

Value Atribut: mengandung jumlah value yang digunakan untuk menentukan pilihan visible pada daftar drop-down. Nilai default dari atribut size adalah 4.

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

HTML Atribut Size

</title>

 

<style>

h2 

{

text-align: center;}

</style>

</head>

 

<body>

<center>

 

<h1 style="color: green;">

Blog Elfan

</h1>

 

<h2>

HTML Atribut Size

</h2>

 

<!-- Ukuran default -->

Name:

<input 

type="text">

 

<br>

<br>

 

<!-- Ukuran ditentukan dengan value 50 -->

Email-id:

<input 

type="text

size="50">

 

</center>

</body>

 

</html>

Output:

Blog Elfan

HTML Atribut Size

Name:

Email-id:


Sintak:
<select size = "value"> option values...</select>

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

HTML Atribut Size

</title>

 

<style>

h2 

{

text-align: center;}

</style>

</head>

 

<body>

 

<h1 style = "color: green;">

Blog Elfan

</h1>

 

<h2>

HTML Atribut Size

</h2>

 

<p>

Algoritma Sorting

</p>

 

<select size="3">

 

<option 

value="merge">

merge sort

</option>

 

<option 

value="bubble">

bubble sort

</option>

 

<option 

value="selection">

selection sort

</option>

 

<option 

value="quick">

quick sort

</option>

 

<option 

value="insertion">

insertion sort

</option>

 

</select>

 

</body>

 

</html>

Output:

Blog Elfan

HTML Atribut Size

Algoritma Sorting



Sintak:
<hr size = "value">

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

HTML Atribut Size

</title>

 

<style>

h2 

{

text-align: center;}

 

hr 

{

background: green;}

</style>

</head>

 

<body>

 

<h1 style = "color: green;">

Blog elfan

</h1>

 

<h2>

HTML Atribut Size

</h2>

 

<hr size = "26">

 

</body>

 

</html>

Output:

Blog elfan

HTML Atribut Size




Artikel ini didedikasikan kepada: Cintana Oliviasandrea, Dedi Nur Ramadhan, Dewi Masithoh, Dyah Ayu Rachmawati Dewi, dan Fahrul Rozi Isneniyanto.

9 komentar untuk "Menentukan Ukuran HTML Menggunakan Atribut Size"

  1. Apa yang dimaksud dengan atribut size pada elemen html?

    BalasHapus
    Balasan
    1. Atribut size pada html digunakan untuk menentuk ukuran width dan height papa elemen, seperti input dan select.

      Hapus
    2. Tujuan dari penggunaan atribut size pada html adalah untuk menentukan lebar awal dalam satuan pixel atau karakter untuk bidang input dan sejumlah baris yang terlihat pada elemen select. Atribut size juga didukung penggunaannya pada elemen hr.

      Hapus
    3. Catatan: atribut size juga berfungsi dengan jenis input teks, search, phone, url, email, dan password.

      Hapus
  2. Apa fungsi atribut size pada elemen input dan select html?

    BalasHapus
    Balasan
    1. Atribut size pada html digunakan untuk mendefinisikan lebar dari elemen INPUT dan tinggi dari elemen SELECT.

      Hapus
    2. Atribut size menentukan lebar yang terlihat pada karakter dari elemen INPUT.

      Hapus
  3. Bagaimana cara menentukan jumlah karakter maksimum pada eleme input dalam penggunaan atribut size html?

    BalasHapus
    Balasan
    1. untuk dapat menentukan jumlah karakter maksimum yang diperbolehkan pada suatu elemen input, maka dapat digunakan atribut maxlength.

      Hapus

Hubungi admin melalui Wa : +62-896-2414-6106

Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.

Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.

- Ikatlah Ilmu dengan Memostingkannya -
- Big things start from small things -