All geek questions in one place

How to encode this form?

I am trying to get away from using the html TABLE tag, but cannot figure out how to build it, what I want it to look like. I took a screenshot with me using a table tag, How can I do this with div or / or spans, etc., And keep the vertical alignment of the labels (firstname, lastname in this example)?
(font size and color, etc., of course, are irrelevant here)
alt text http://img522.imageshack.us/img522/7857/forme.jpg

grateful for any input,
Modano

+3
source share
4 answers

, . , HTML . , , , :

<form [..]>
   <ul>
      <li class="hasError">
         <em class="feedback">error message here</em>
         <div class="attribute">
            <label for="firstName">First name:</label>
            <em>(required)</em>
         </div>
         <div class="input">
            <input type="text" name="firstName" id="firstName" />
            <em class="description">optional description here</em>
         </div>
         <span class="clearBoth" />
      </li>
      <li>
         <em class="feedback" />
         <div class="attribute">
            <label for="firstName">Last name:</label>
            <em>(required)</em>
         </div>
         <div class="input">
            <input type="text" name="lastName" id="firstName" />
            <em class="description">optional description here</em>
         </div>
         <span class="clearBoth" />
      </li>
   </ul>
</form>

:

  • divs,
  • ( ) , . : ". . [...]". , .
  • hasError , - CSS .

CSS ( , ):

form li {
    width: 300px;
}
form li.hasErrors {
    width: 298px;
    border: 1px red;
    background-color: #C55;
}
form .attribute {
    float: left;
    clear: left;
    width: 60px;
}
form .input {
    float: right;
    clear: none;
    width: 240px;
}
form .feedback {
    display: block;
    padding-left: 50px;
    color: red;
}
form .description {
    display: block;
    clear: both;
    color: #888;
}
.clearBoth { display: block; clear: both; }
+4

CSS, . , .

<html>
<head>
<style>
html {
    font-size: 76%;
}
body {
    font-size: 1.0em;
    font-family: verdana;
}
div.input {
    border: 1px solid white;
    clear: left;
    width: 25em;
    height: 5em;
    padding: 2px;
    margin-bottom: 1.0em;
}
div.error {
    border: 1px solid red;
}
div.label {
    float: left;
    width: 7em;
}
div.field {
    float: left;
}
div.errormessage {
    color: red;
}
div.description {
    color: #bbb;
}
input.text {
    width: 13em;
}
</style>
</head>
<body>
<form>
    <div class="input error">
        <div class="label">
            <div>&nbsp;</div>
            <label>First name:<br>(required)</label>
        </div>
        <div class="field">
            <div class="errormessage">error message here</div>
            <input type="text" name="FirstName" class="text">
            <div class="description">optional description here</div>
        </div>
    </div>
    <div class="input">
        <div class="label">
            <div>&nbsp;</div>
            <label>Last name:<br>(required)</label>
        </div>
        <div class="field">
            <div class="errormessage">&nbsp;</div>
            <input type="text" name="LastName" class="text">
            <div class="description">optional description here</div>
        </div>
    </div>
</form>
</body>
</html>
0

HTML/CSS Apart: Prettier Accessible Forms

, , , -.

0

; . , . :

<style type="text/css">
    form { overflow: auto; position: relative; }
    input { float: left; }
    label { clear: left; float: left; width: 10em; }
</style>

<form>
    <label>Field 1</label><input/>
    <label>Field 2</label><input/>
    <label>Field 3</label><input/>
</form>
0

Source: https://habr.com/ru/post/1712822/

More articles:


All Articles