Cara menggunakan tag formulir html

Dalam tutorial Belajar HTML Dasar. Cara Membuat Form di HTML (form tag), kita sudah menggunakan input tag dengan type=text dan type=password, namun kali ini kita akan mempelajari beberapa atribut penting yang sering digunakan untuk tipe ini

Table of Contents Show

Atribut ukuran. Mengatur Panjang Tampilan
Atribut maxlength. Batasi Panjang Karakter Maksimal
Atribut nonaktif dan hanya baca. Nonaktifkan tag masukan
Atribut id dan class. CSS dan Javascript
Cara Menggunakan Tag Masukkan teks dan ketik kata sandi
Tag form HTML untuk apa?
Langkah demi langkah untuk membuat formulir login HTML?
Tag apa yang digunakan untuk membuat formulir?
Langkah utama untuk membuat formulir di HTML adalah menggunakan tag?

Atribut ukuran. Mengatur Panjang Tampilan

Atribut size untuk input tag type=”text” digunakan untuk membatasi panjang kotak isian. Nilai atribut ini adalah berapa piksel panjang kotak isi

Berikut cara menulis atribut size

<input type="text" name="nama_user" size="4"/>

Berikut adalah contoh kode HTML menggunakan atribut size

<!DOCTYPE html>
<html>
 
<head>
   <title>Belajar Tag Input Type=text HTML</title>
</head>

<body>

   <h4>Belajar tag Input type="text" duniailkom:</h4>
   <form>

   Size = 04 pixel :
   <input type="text" name="nama_user" size="4"/>
   <br/>

   Size = 10 pixel :
   <input type="text" name="nama_user" size="10"/>
   <br/>

   Size = 20 pixel :
   <input type="text" name="nama_user" size="20"/>

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

Atribut maxlength. Batasi Panjang Karakter Maksimal

Atribut maxlegth digunakan untuk membatasi jumlah karakter yang dapat dimasukkan ke dalam kotak input. Nilai atribut ini adalah jumlah maksimal karakter yang dapat diketik. Inilah cara menulis atribut ini

<input type="text" name="id_user" maxlength="4"/>

Dengan memberikan atribut maxlength=”4″, maka ketika user mengetikkan karakter ke-5, karakter tersebut tidak akan bisa diinput. Hal ini cukup penting jika kita membutuhkan panjang karakter yang sudah dibatasi untuk input form, misalnya untuk password yang dibatasi 6 karakter.

Namun, Anda tidak dapat mengandalkan batasan atribut maxlength ini, karena pengguna dapat membuat skrip untuk mengubah nilainya. Atribut maxlength paling baik digunakan sebagai pelengkap. Proses pengecekan pembatasan karakter juga harus dilakukan saat form akan diproses di sisi web server (menggunakan PHP)

Berikut adalah contoh kode HTML menggunakan atribut maxsize

<!DOCTYPE html>
<html>
 
<head>
   <title>Belajar Tag Input Type=text HTML</title>
</head>

<body>

   <h4>Belajar tag Input type="text" duniailkom:</h4>
   <form>

   Size = 04 pixel, maxlength = 04 :
   <input type="text" name="nama_user" size="4" maxlength="4"/>
   <br/>

   Size = 10 pixel, maxlength = 05 :
   <input type="text" name="nama_user" size="10" maxlength="5"/>
   <br/>

   Size = 20 pixel, maxlength = 10 :
   <input type="text" name="nama_user" size="20" maxlength="10"/>

   </form>

</body>
</html>

Atribut nonaktif dan hanya baca. Nonaktifkan tag masukan

Atribut yang dinonaktifkan dan hanya dibaca digunakan untuk membuat kotak teks tidak dapat digunakan. Penggunaan atribut ini biasanya dipadukan dengan javascript agar dapat berfungsi secara maksimal. Misalnya, kotak isian hanya dapat diisi jika pengguna telah mengisi kotak isian lainnya

Kedua atribut ini hanya memiliki 1 nilai yaitu dirinya sendiri yang ditulis dengan disabled=”disabled” dan readonly=”readonly”. Berikut adalah contoh penulisannya

<input type="text" name="nama_user" readonly="readonly" />
<input type="text" name="nama_user" disabled="disabled" />

Meskipun kedua teks yang memiliki atribut ini tidak dapat digunakan, keduanya akan memiliki tampilan yang berbeda. Atribut yang dinonaktifkan akan membuat kotak teks berwarna abu-abu, sedangkan atribut readonly terlihat seperti kotak teks biasa. Jadi biasanya atribut disabled sering digunakan, karena akan menunjukkan kepada user bahwa text box tidak bisa digunakan

Perbedaan lainnya adalah pengguna masih dapat menyalin konten teks ketika atributnya disetel ke readonly. Tetapi tidak untuk atribut yang dinonaktifkan

Berikut adalah contoh penggunaan atribut yang dinonaktifkan dan hanya dibaca di HTML

<!DOCTYPE html>
<html>
 
<head>
   <title>Belajar Tag Input Type=text HTML</title>
</head>

<body>

   <h4>Belajar tag Input type="text" duniailkom:</h4>
   <form>

   User name (normal) :
   <input type="text" name="nama_user"/>
   <br/>

   User name (readonly) :
   <input type="text" name="nama_user" readonly="readonly" />
   <br/>

   User name (disabled) :
   <input type="text" name="nama_user" disabled="disabled" />

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

Atribut id dan class. CSS dan Javascript

Selain atribut type, value, size, maxlength, readonly dan disabled, kita juga bisa menggunakan atribut seperti id dan class pada input tag type=”text”. Tag id dan class akan dibutuhkan untuk pemrograman HTML menggunakan Javascript dan CSS

Cara Menggunakan Tag Masukkan teks dan ketik kata sandi

Sebagai penutup, saya akan membuat beberapa tag input untuk meringkas apa yang telah kita pelajari dalam tutorial ini, berikut cara menggunakan tag input ketik teks dan ketik kata sandi di HTML

<form>
   Nama: <input type="text" name="nama_user" />
   Password: <input type="password" name="password_user"/>
</form>

Objek formulir dalam bentuk teks input yang dibuat dengan tag teks tipe input mungkin merupakan input formulir yang paling sering Anda gunakan. Selain memahami atribut HTML yang digunakan untuk mendesain form, pada tutorial cara membuat form HTML dengan input type text tag ini, Anda juga telah mempelajari contoh penggunaannya.

Tag form HTML untuk apa?

Tag elemen HTML membuat form untuk masukan pengguna .

Cara Membuat Formulir Login yang Menarik dengan HTML .

Deklarasikan Dokumen HTML Anda. Sekarang, buka file html formulir login Anda. .

2. Buat Header Halaman Formulir Login. .

3. Berikan Judul Halaman Form Login. .

3. Tempel File CSS. .

4. Buat Badan Formulir Masuk. .

Buat Tata Letak Formulir Login. .

6. Beri Judul pada Form Login. .

7. Buat Kotak Formulir Login

Tag apa yang digunakan untuk membuat formulir?

Untuk membuat form pada HTML kita membutuhkan tag

Langkah utama untuk membuat formulir di HTML adalah menggunakan tag?

Formulir dalam HTML dapat dibuat dengan tag . Tag ini memiliki beberapa atribut yang harus diberikan, seperti. tindakan untuk menentukan tindakan yang akan dilakukan pada saat data dikirimkan; .