Lompat ke konten Lompat ke sidebar Lompat ke footer

Penentuan Persyaratan Pengisian Elemen HTML Menggunakan Atribut Required

Atribut required pada html merupakan atribut tipe boolean yang digunakan untuk menentukan elemen input mana yang harus diisi terlebih dahulu sebelum field input pada form tersebut di-submit.

3 Contoh Penggunaan Atribut Required pada Elemen HTML
Ilustrasi Atribut Required HTML

Sebelum memahami lebih dalam materi tentang Penentuan Persyaratan Pengisian Elemen HTML Menggunakan Atribut Required, terlebih dahulu pelajari materi tentang: Membuat Teks Beku pada HTML Menggunakan Atribut Readonly [klik], Membuat Petunjuk Singkat HTML Menggunakan Atribut Placeholder [klik], dan Menentukan Efek Pola HTML Menggunakan Atribut Pattern [klik].

Elemen: atribut required berasosiasi dengan tiga elemen yang diperlihatkan sebagai berikut.
  • <input>
  • <select>
  • <textarea>

Sintak:
<input required>

Baca Juga: 

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

Atribut Required

</title>

 

<style>

h2 

{

color:green;

font-style:italic;}

 

body 

{

text-align:center;}

</style>

</head>

 

<body>

 

<h1>

Blog Elfan

</h1>

 

<h2>

Atribut Required pada Field Input

</h2>

 

<form action="">

 

Username:

<input 

type="text

name="usrname

required>

 

<br>

 

Password:

<input 

type="password"

name="password">

 

<br>

 

<input type="submit">

 

</form>

 

</body>

 

</html>

Output:

Blog Elfan

Atribut Required pada Field Input

Username:
Password:


Sintak:
<select required>

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

Atribut Required

</title>

 

<style>

h2 

{

color:green;

font-style:italic;}

 

body 

{

text-align:center;}

</style>

</head>

 

<body>

 

<h1>

Blog Elfan

</h1>

 

<h2>

Atribut Required pada Field Select

</h2>

 

<form action="">

 

<select required>

<option value="">

None

</option>

 

<option value="ds">

Data Structure

</option>

 

<option value="algo">

Algorithm

</option>

 

<option value="os">

Operating System

</option>

 

<option value="cn">

Computer Network

</option>

</select>

 

<input type="submit">

 

</form>

 

</body>

 

</html>

Output:

Blog Elfan

Atribut Required pada Field Select

 


Sintak:
<textarea required>

Contoh:

<!DOCTYPE html>

<html>

 

<head>

<title>

Atribut Required

</title>

 

<style>

h2 

{

color:green;

font-style:italic;}

 

body 

{

text-align:center;}

</style>

</head>

 

<body>

 

<h1>

Blog Elfan

</h1>

 

<h2>

Atribut Required pada Field Textarea

</h2>

 

<form action="">

 

<textarea 

rows="7

cols="50"

name="comment

required>

</textarea>

 

<input type="submit">

 

</form>

 

</body>

 

</html>

Output:

Blog Elfan

Atribut Required pada Field Textarea

 

Artikel ini didedikasikan kepada: Yonathan Putro Wicaksono, Zufar Ihya Muhammad, Ahmad Jalil, Ali Himawan, dan Annis Khoirunnisa.

5 komentar untuk "Penentuan Persyaratan Pengisian Elemen HTML Menggunakan Atribut Required"

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

    BalasHapus
    Balasan
    1. Atribut required merupakan atribut tipe boolean yang digunakan untuk menunjukkan bahwa pengguna harus menentukan nilai untuk input tertentu sebelum form dikirim ke server.

      Hapus
    2. Fungsi atribut required pada elemen html, adalah mewajibkan elemen tersebut untuk diberi nilai terlebih dahulu sebelum dilakukan submit data ke server.

      Hapus
  2. Apa elemen apa saja atribut required dapat digunakan pada elemen html?

    BalasHapus
    Balasan
    1. Atribut required merupakan atribut yang digunakan untuk menentukan bidang input yang wajib diisi sebelm melakukan pengiriman form. Atribut required berfungsi dengan jenis input sebagai berikut: teks, search, url, phone, email, password, date, number, checxbox, radio, dan file.

      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 -