5 Formulir Web XHTML Sederhana untuk Halaman Web

Formulir Web XHTML Sederhana Dalam Desain Web 5. Teknologi 1: Label Sandwich

Sertakan kotak input, kotak pemilihan dan kotak teks ke dalam elemen label dan atur semua sebagai elemen level blok. Atur tombol radio dan tampilan multi-check untuk menyala untuk memfasilitasi penampilan mereka di garis yang sama. Jika Anda lebih suka tombol label dan radio/kotak multi-periksa muncul di garis yang berbeda, Anda dapat memilih untuk tidak memasukkannya ke dalam label, atau menggunakan pembungkus garis keras.

Setiap situasi ditunjukkan di bawah ini.

Ketika ini terlihat lebih bergaya, W3C sebenarnya secara implisit menunjukkan contoh label mereka.

Kode:

Label, Input, SELECT, TEXTAREA {display: block;} label {margin-bottom: 10px;} input [type = radio], input [type = centang kotak] {display: inline;} <norm> <fieldset> <negend> Formulir Kontak </legend> <label untuk = nama = nama </label </label <fieldset = name = name = name = name = name = name = name = name = name = name = name = name for = name = name = name = name = name = name = name = name = name = name = name <fieldset> <fieldset = id = email nama = size email = 20 /> <label for = choices> choices (radio)-<em> label wrapped </em> </label> <input name = pilihan pilihan = radio /> pilihan 1 <input name = pilihan pilihan = radio /> pilihan 2 <input name = choice type = radio /choice 3 <label style = margin-botin-bottom: 0pt; for= Choices2> Choices (checkbox) — <em>non-wrapped label, margin reset</em></label><input name= Choice2 type=checkbox /> Choice 1<input name= Choice2 type=checkbox /> Choice 2<input name= Choice2 type=checkbox /> Choice 3<div style=height: 10px;><!-- just to split the demo up --></div><label for= Choices3> Choices (checkbox) — <em>wrapped, hard line-break</em></label><input name= Choice3 type=checkbox /> Choice 1<input name= Choice3 type=checkbox /> Choice 2<input name= Choice3 type=checkbox /> Choice 3<label for=dropdown>Question</label><select id=dropdown> <optgroup label=Group of Options></optgroup> <option>Option 1</option> <option>Option 2 </pection> <pection> Opsi 3 </tiption> </ pilih> <label untuk = pesan> pesan <textArea cols = 36 baris = 12 name = pesan> </pextarea> </label> <input type = kirim nilai = kirim itu/> </fieldset> </form>

#Label Expamle1,#Input Expamle1,#Expamle1 SELECT,#Expamle1 TexTarea {display: block;}

#label Expamle1 {margin-bottom: 10px;}

#input expamle1 [type = "radio"],#input expamle1 [type = "centang kotak"] {display: inline;}

Teknologi 2: Malas

Banyak pengembang telah mengadopsi metode yang tidak lazim tetapi cepat dan mudah ini (ditandai dengan partisi istirahat garis). Meskipun dapat berjalan, ini berbahaya bagi kemampuan CSS Anda karena Anda tidak memerlukan CSS untuk mengimplementasikannya.

Kode:

<Form> <fieldset> <segend> Formulir Kontak < /Legend> <Label for = Name> Nama < /Label> <Input ID = Nama Nama = Nama Ukuran = 20 /> <Label For = Email> Email < /Label> <Input ID = Nama Email = Pilihan Email = Label = Pilihan = Pilihan = Pilihan> Pilihan (Radio) < /Label <Input> <Input Name = Pilihan Radio = Label = Label = Pilihan = Pilihan 1 type=radio /> Choice 3<label for= Choices3> Choices (checkbox)</label><input name= Choice3 type=checkbox /> Choice 1<input name= Choice3 type=checkbox /> Choice 2<input name= Choice3 type=checkbox /> Choice 3<label for=dropdown>Question</label><select id=dropdown> <optgroup label=Group of Options></optgroup> <option>Option 1</option> <option>Option 2 </pection> <pection> Opsi 3 </tiption> </ pilih> <label for = pesan> pesan </label> <textarea cols = 36 baris = 12 name = pesan> </textArea> <input type = kirim nilai = kirim/> </fieldset> </form>