开发者

Do I have divitis? WHat should I enclose in a DIV?

开发者 https://www.devze.com 2023-01-17 01:53 出处:网络
I am coding things like this <div class=\"panel\">开发者_JAVA技巧; <fieldset style=\"position: absolute; top:8px; left: 136px; width: 136px; height: 64px;\">

I am coding things like this

<div class="panel">开发者_JAVA技巧;
<fieldset style="position: absolute; top:8px; left: 136px; width: 136px; height: 64px;">
  <legend> </legend>
  <div class="Label" id="Label1" style="position: absolute; top:8px; left: 16px; width: 81px; height: 14px;">one</div>    
  <div class="TLabel" id="Label2" style="position: absolute; top:32px; left: 16px; width: 54px; height: 14px;">two</div>    
</fieldset>
</div>

Do I even need a DIV around a fieldset (or a text input box, radio group, other form input element?


Erm... no. You don't have to put a div around those fieldsets.

Given that in your example there's no form elements at all, why should this even be a form? Okay, I know from your previous questions that you're trying to build a WYSIWYG form editor, but that's no excuse to use these sort of HTML.

If I clean up the example you're using, it would probably look something like:

<fieldset style="top:8px; left: 136px; width: 136px; height: 64px;">
  <label class="Label" id="Label1" style="top:8px; left: 16px;">one</label>    
  <label class="TLabel" id="Label2" style="top:32px; left: 16px;">two</label>    
</fieldset>

Since some styles are being applied more than once I believe it would be appropriate to store them in a stylesheet instead.

fieldset, label {
    position: absolute;
}

You also should have no need to set explicit width and height on the labels, especially if you don't have any form of border or background.

Logically you should also group label - input pairs together, for instance with a unordered list. Remember that for accessibility you're going to need the for attribute to point to the correct input elements. It would be better to mention the context of what you're doing here.


Do I even need a DIV around a fieldset (or a text input box, radio group, other form input element?

Only you yourself can know this. But in general, no. Why not apply the style directly to the elements? A <div> around all those elements certainly seems excessive and is necessary only in rare cases.

In particular, labels on a form should be <label>s! Always use the semantically “correct” tag rather than an unspecific tag like <span> or <div>.


you could use unordered lists for displaying form elements.

that doesn't look too bad to me (other than the nasty inline absolute positioning - dreamweaver right?)

but that's fine really.

except did you know there is a <label> element?

apply a class to the and you can eliminate those two extra divs

<div class="panel">
<fieldset style="position: absolute; top:8px; left: 136px; width: 136px; height: 64px;">
  <legend> </legend>
  <label class="Label" id="Label1" style="position: absolute; top:8px; left: 16px; width: 81px; height: 14px;">one</label> 
  <label class="TLabel" id="Label2" style="position: absolute; top:32px; left: 16px; width: 54px; height: 14px;">two</label>    
</fieldset>
</div>

Divitis (IMO) is more severe like:

<div class="content">
<div class="content-body">
<div class="content-start">
<div class="title">The Title</div>
    <div class="theauthor">The Author</div>
    <div class="thedate"><div class="day">Thursday</div> 10th December</div>
</div>
</div>
</div>


no, you don't need a div around those elements - if you want to position them manually, you can do this with the element directly. also, if you need labels, why don't you use the <label>-tag?


It depends on what you are trying to achieve with the layout. Can we see what you're trying to do?

One thing you certainly want to do is to remove the inline styling, e.g.:

style="position: absolute; top:8px; left: 136px; width: 136px; height

Put all that in a CSS file.

0

精彩评论

暂无评论...
验证码 换一张
取 消