Apakah benar menggunakan DIV di dalam FORM?

86

Saya hanya ingin tahu apa yang Anda pikirkan tentang DIV-tag di dalam FORM-tag?

Saya butuh sesuatu seperti ini:

<form>
  <input type="text"/>
  <div> some </div>
  <div> another </div>
  <input type="text" />
</form>

Apakah ini praktik umum untuk digunakan DIVdi dalam FORMatau saya memerlukan sesuatu yang berbeda?

html semantic-markup demas
sumber

Jawaban:

134

Tidak apa-apa.

The formakan mengirimkan satunya jenis masukan kontrol-nya (* juga Textarea, Select, dll ...).

Anda tidak perlu khawatir tentang a divdalam form.

Royi Namir
sumber
2
Bagaimana jika menggunakan formulir di dalam div?
Kick Buttowski
1
@KickBowski Formulir di dalam div tidak ada masalah sama sekali. Anda dapat mencobanya sendiri di validator HTML. Selain itu, hal ini hampir tidak dapat dihindari hari ini, karena halaman modern dibangun di atas div. Jika tidak diizinkan, pembungkus sederhana atau menempatkan formulir dalam wadah sudah akan membuat halaman tidak valid.
Nrzonline
1
Validasi formulir telah berhenti berfungsi untuk saya sejak saya menambahkan div di dalam formulir
Suhas
28

Benar-benar dapat diterima untuk menggunakan DIV di dalam <form>tag.

Jika Anda melihat stylesheet CSS 2.1 default , divdan pkeduanya berada dalam display: blockkategori. Kemudian melihat spesifikasi HTML 4.01 untuk elemen formulir, mereka tidak hanya menyertakan <p>tag, tetapi juga <table>tag, jadi tentu saja <div>akan memenuhi kriteria yang sama. Ada juga <legend>tag di dalam formulir di dokumentasi.

Misalnya, berikut ini melewati validasi HTML4 dalam mode ketat:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
</head>
<body>
<form id="test" action="test.php">
<div>
  Test: <input name="blah" value="test" type="text">
</div>
</form>
</body>
</html>
Alex W.
sumber
11

Anda dapat menggunakan a <div>dalam formulir - tidak ada masalah di sana .... TAPI jika Anda akan menggunakan <div>sebagai label untuk inputjangan ... labeladalah opsi yang jauh lebih baik:

<label for="myInput">My Label</label> 
<input type="textbox" name="MyInput" value="" />
Pastori
sumber
3

Salah jika memiliki <input> sebagai turunan langsung dari <form>

Dan omong-omong <input / > mungkin gagal pada beberapa doctype

Periksa dengan http://validator.w3.org/check

jenis dokumen tidak mengizinkan elemen "INPUT" di sini; kehilangan salah satu tag awal "P", "H1", "H2", "H3", "H4", "H5", "H6", "PRE", "DIV", "ADDRESS"

<input type = "text" />

Elemen yang disebutkan tidak diizinkan untuk muncul dalam konteks tempat Anda meletakkannya; elemen lain yang disebutkan adalah satu-satunya yang diizinkan di sana dan dapat berisi elemen yang disebutkan. Ini mungkin berarti bahwa Anda membutuhkan elemen penampung, atau mungkin Anda lupa menutup elemen sebelumnya.

Satu kemungkinan penyebab untuk pesan ini adalah Anda mencoba untuk meletakkan elemen level blok (seperti "<p>" atau "<table>") di dalam elemen inline (seperti "<a>", "<span> ", atau" <font> ").

stefan bachert
sumber
3

Pertanyaan Anda tidak membahas apa yang ingin Anda masukkan ke dalam tag DIV, yang mungkin menjadi alasan mengapa Anda menerima beberapa jawaban yang tidak lengkap / salah. Yang benar adalah bahwa Anda dapat, seperti yang dikatakan Royi, meletakkan tag DIV di dalam formulir Anda. Anda tidak ingin melakukan ini untuk label, misalnya, tetapi jika Anda memiliki formulir dengan sekumpulan kotak centang yang ingin Anda susun menjadi tiga kolom, gunakan tag DIV (atau SPAN, HEADER, dll. .) untuk mencapai tampilan dan nuansa yang ingin Anda capai.

Clinton
sumber
3

Definisi dan Penggunaan

Tag mendefinisikan divisi atau bagian dalam dokumen HTML.

Tag digunakan untuk mengelompokkan elemen blok untuk memformatnya dengan gaya. http://www.w3schools.com/tags/tag_div.asp

Juga DIV - MDN

Elemen HTML (atau Elemen Divisi Dokumen HTML) adalah wadah umum untuk konten aliran, yang secara inheren tidak mewakili apa pun. Ini dapat digunakan untuk mengelompokkan elemen untuk tujuan gaya (menggunakan atribut class atau id), atau karena mereka berbagi nilai atribut, seperti lang. Ini harus digunakan hanya jika tidak ada elemen semantik lain (seperti atau) yang sesuai.

Anda dapat menggunakan div inside form, jika Anda berbicara tentang menggunakan div daripada tabel, maka google tentang desain web Tableless

Habib
sumber
3
Betulkah? referensi w3schools?
Adonis K. Kakoulidis
2
@AdonisK., Saya tahu semua tentang mengapa seseorang tidak boleh menyertakan referensi ke w3schools, tetapi saya yakin itu tidak pantas mendapatkan downvote, saya akan meminta Anda untuk melihat diskusi ini di Meta: meta.stackexchange.com/questions/120025/… Juga saya telah memperbarui referensi DIV dari MDN
Habib
1

Seperti yang dikatakan orang lain, semuanya baik-baik saja, Anda bisa melakukannya dengan baik. Bagi saya pribadi, saya mencoba mempertahankan bentuk struktur hierarki dengan elemen saya dengan divmenjadi elemen induk terluar. Saya mencoba menggunakan hanya table p uldan spandi dalam formulir. Hanya mempermudah saya untuk melacak hubungan orang tua / anak di dalam halaman web saya .

JT Smith
sumber
0

Saya perhatikan bahwa setiap kali saya memulai tag formulir di dalam div, saudara div berikutnya tidak akan menjadi bagian dari formulir saat saya memeriksa (chrome inspect) untuk selanjutnya, formulir saya tidak akan pernah dikirim. 

<div>
<form>
<input name='1st input'/>
</div>
<div>
<input name='2nd input'/>
</div>
<input type='submit'/>
</form>

Saya pikir jika saya meletakkan tag formulir di luar DIV, itu akan berhasil. Tag formulir harus ditempatkan di awal DIV induk. Seperti yang ditunjukkan di bawah ini. 

<form>
<div>
<input name='1st input'/>
</div>
<div>
<input name='2nd input'/>
</div>
<input type='submit'/>
</form>
Vincent Omondi
sumber
-5

Benar-benar tidak! Ini akan merender, tetapi tidak akan memvalidasi. Gunakan label.

Itu tidak benar. Itu tidak dapat diakses. Anda melihatnya di beberapa situs web karena beberapa pengembang hanya malas. Saat saya merekrut pengembang, ini adalah salah satu hal pertama yang saya periksa dalam pekerjaan kandidat. Bentuknya buruk, tapi luangkan waktu dan pelajari cara melakukannya dengan benar

pengguna2774731
sumber
-8

Tidak, tidak

<div>tag selalu disalahgunakan untuk membuat tata letak web. Tujuan simbolisnya adalah untuk membagi bagian / bagian di halaman sehingga gaya terpisah dapat ditambahkan atau diterapkan padanya. [Dokumen w3sekolah] [W3C]

Ini sangat tergantung pada apa yang Anda somedananother miliki.

HTML5, memiliki lebih banyak tag makna logis, daripada memiliki tag tata letak biasa. The section, header, nav, asidesemuanya memiliki makna semantik mereka sendiri untuk itu. Dan digunakan untuk melawan<div>

Starx
sumber
1
Saya cenderung setuju. Ada banyak hal yang dapat Anda lakukan di dalam html. Tetapi karena pedoman longgar itulah mengapa kami menemukan diri kami menggali keluar dari kekacauan tata letak web tabel dengan kode penuh peretasan. Satu-satunya cara web dapat berkembang adalah jika kita terus mengikuti pedoman baru seperti yang disajikan kepada kita.
JT Smith
Yah, saya butuh area di halaman web. Pengguna mengklik area ini dan mengatur nilai pada input formulir. Elemen HTML apa yang cocok untuk kasus ini?
demas
1
@demas, Untuk penggunaan definisi Anda <select>cocok sempurna jika pilihan yang diberikan, jika tidak <a>atau <buttons>baik.
Starx
27
-1 Anda benar-benar salah. SETIAP SITUS BESAR menggunakan div di dalam formulir. Anda memberikan contoh html 5 yang tidak ada hubungannya dengan pertanyaan. tunjukkan satu situs besar yang tidak memiliki div dalam bentuk. Orang-orang di sini di situs ini melalui jawaban tanpa memeriksa dan menyesatkan pengguna lain
Royi Namir
4
cara untuk tidak membuat sesuatu adalah dengan melihat bagaimana kode perusahaan melakukannya, sebagai suatu peraturan. Jika Anda hanya menggunakan div tersebut untuk memuat teks, jika teks tersebut diterapkan ke kontrol formulir, gunakan label. jika tidak, gunakan p. materi semantik. aksesibilitas penting.
albert