Fatal编程技术网
  • html/
  • Html 创建表单使字段和文本彼此相邻-语义方法是什么？

Html 创建表单使字段和文本彼此相邻-语义方法是什么？

html css

Html 创建表单使字段和文本彼此相邻-语义方法是什么？,html,css,Html,Css,我想创建一个表单，这样左侧有文本，右侧有输入，目前我正在做 <div id="labels"> <ul> <li>The Label</li> </ul> </div> <div id="inputs"> <ul> <li><input type="text /></li> </ul> </div> 发生的情况是，文本和字段没有完全对齐（

我想创建一个表单，这样左侧有文本，右侧有输入，目前我正在做

<div id="labels">
<ul>
<li>The Label</li>
</ul>
</div>

<div id="inputs">
<ul>
<li><input type="text /></li>
</ul>
</div>
发生的情况是，文本和字段没有完全对齐（随着我添加项目，输入逐渐降低）。我认为这是因为并非所有的输入都可以是14px（我使用下拉列表、复选框、收音机等）

正确的方法是什么？我知道一张表可以解决这个问题，但这是语义问题吗？

实际上有一个特别的列表！它被称为定义列表（dl），由定义术语和定义（dt/dd）组成。我通常将文本放在dt中，将输入框放在dd中。如下所示：

<form action="bla">
    <dl>
        <dt>Name*</dt>
        <dd><input type="text" name="name" />
        <dt>Email</dt>
        <dd><input type="text" name="email" />
    </dl>
    <p><input type="submit" /></p>
</form>


名字*
电子邮件
实际上有一个特别的列表！它被称为定义列表（dl），由定义术语和定义（dt/dd）组成。我通常将文本放在dt中，将输入框放在dd中。如下所示：

<form action="bla">
    <dl>
        <dt>Name*</dt>
        <dd><input type="text" name="name" />
        <dt>Email</dt>
        <dd><input type="text" name="email" />
    </dl>
    <p><input type="submit" /></p>
</form>


名字*
电子邮件
将标签放在HTML中输入的旁边是有意义的——它更容易阅读，也更易于维护。这方面的典型HTML是：

<div class="fieldWrapper">
  <label for="something">Something</label>
  <input type="text" id="something" name="something">
</div>
<div class="fieldWrapper">
  <label for="something">Something</label>
  <input type="text" id="something" name="something">
</div>

label, input {
  float:left;
}

input {
  font-size:14px;
  padding: 2px; // instead of using fixed height
}

label {
  width: 100px; // can use JavaScript if it needs to be dynamic
  padding-top: 3px; // to make the label vertically inline with the input element
}

.fieldWrapper {
  clear:left;
}
将标签放在HTML中输入的旁边是有意义的——它更容易阅读，也更易于维护。这方面的典型HTML是：

<div class="fieldWrapper">
  <label for="something">Something</label>
  <input type="text" id="something" name="something">
</div>
<div class="fieldWrapper">
  <label for="something">Something</label>
  <input type="text" id="something" name="something">
</div>

label, input {
  float:left;
}

input {
  font-size:14px;
  padding: 2px; // instead of using fixed height
}

label {
  width: 100px; // can use JavaScript if it needs to be dynamic
  padding-top: 3px; // to make the label vertically inline with the input element
}

.fieldWrapper {
  clear:left;
}
这类问题在这里已经被问过多次了，因此，您可以进行简单的搜索并找到许多解决方案

但这里有一个简单的表格可以让您开始：

HTML

<form>
    <div class="line">
        <label for="input">Full Name</label>
        <div class="input">
            <input type="text" size="30" name="input">
        </div>
    </div>
    <div class="line">
        <label for="input">Company</label>
        <div class="input">
            <input type="text" size="30" name="input">
        </div>
    </div>
    <div class="line">
        <label for="nselect">Dropdown Menu</label>
        <div class="input">
            <select name="select">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
        </div>
    </div>
    <div class="line">
        <label for="input">Text 1</label>
        <div class="input">
            <input type="text" size="30" name="input">
        </div>
    </div>
    <div class="line">
        <label for="input">Text 2</label>
        <div class="input">
            <input type="text" size="30" name="input">
        </div>
    </div>
    <div class="line">
        <label for="input">Text 3</label>
        <div class="input">
            <input type="text" size="15" name="input">
        </div>
    </div>
</form>
下面是一个演示：

很多人不会同意我使用div来分隔表单元素，但通过测试，我发现这种格式是最安全、最可靠的方式，因为它可以干净地分隔字段，并且在IE下运行良好。此外，它也是大男孩（facebook、twitter、google）使用的格式.

这类问题在这里已经被问过多次，因此，您可以进行简单的搜索并找到许多解决方案

但这里有一个简单的表格可以让您开始：

HTML

<form>
    <div class="line">
        <label for="input">Full Name</label>
        <div class="input">
            <input type="text" size="30" name="input">
        </div>
    </div>
    <div class="line">
        <label for="input">Company</label>
        <div class="input">
            <input type="text" size="30" name="input">
        </div>
    </div>
    <div class="line">
        <label for="nselect">Dropdown Menu</label>
        <div class="input">
            <select name="select">
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
            </select>
        </div>
    </div>
    <div class="line">
        <label for="input">Text 1</label>
        <div class="input">
            <input type="text" size="30" name="input">
        </div>
    </div>
    <div class="line">
        <label for="input">Text 2</label>
        <div class="input">
            <input type="text" size="30" name="input">
        </div>
    </div>
    <div class="line">
        <label for="input">Text 3</label>
        <div class="input">
            <input type="text" size="15" name="input">
        </div>
    </div>
</form>
下面是一个演示：

很多人不会同意我使用div来分隔表单元素，但通过测试，我发现这种格式是最安全、最可靠的方式，因为它可以干净地分隔字段，并且在IE下工作得很好。此外，它也是大男孩（facebook、twitter、google）使用的格式。

在我的公司，早在2001年我们第一次启动第一个web应用程序时，我们就使用了表

<table class="formTable">
    <tbody>
        <tr>
            <td><label>Name:</label></td>
            <td><input type="text" name="name" /></td>
        </tr>
        <tr>
            <td><label>E-mail:/label></td>
            <td><input type="text" name="email" /></td>
        </tr>
    </tbody>
</table>


姓名：
电子邮件：/label>
虽然这是可行的，但从哲学上讲，我不喜欢这种方法，因为就我而言，表应该包含表化的数据

您还可以使用CSS和DIV：

<style>
    .formLabel, .formInput {
        display:inline-block;   
    }
</style>

<div class="formField">
    <div class="formLabel"><label>Name:</label></div>
    <div class="formInput"><input type="text" name="name" /></div>
</div>
<div class="formField">
    <div class="formLabel"><label>E-Mail:</label></div>
    <div class="formInput"><input type="text" name="email" /></div>
</div>


.formLabel、.formInput{
显示：内联块；
}
姓名：
电邮：
请看这里：

或者，您可以避免同时使用div，只需为每个
标签
和
输入
（或使用类）应用
显示：内联块
。但是，您还必须记住在标签字段组合之间使用分隔符作为回车符。
在我的公司，早在2001年我们第一次启动我们的第一个web应用程序时，我们就使用了一个表


<table class="formTable">
    <tbody>
        <tr>
            <td><label>Name:</label></td>
            <td><input type="text" name="name" /></td>
        </tr>
        <tr>
            <td><label>E-mail:/label></td>
            <td><input type="text" name="email" /></td>
        </tr>
    </tbody>
</table>




姓名：
电子邮件：/label>


虽然这是可行的，但从哲学上讲，我不喜欢这种方法，因为就我而言，表应该包含表化的数据

您还可以使用CSS和DIV：


<style>
    .formLabel, .formInput {
        display:inline-block;   
    }
</style>

<div class="formField">
    <div class="formLabel"><label>Name:</label></div>
    <div class="formInput"><input type="text" name="name" /></div>
</div>
<div class="formField">
    <div class="formLabel"><label>E-Mail:</label></div>
    <div class="formInput"><input type="text" name="email" /></div>
</div>




.formLabel、.formInput{
显示：内联块；
}
姓名：
电邮：


请看这里：


或者，您可以避免同时使用div，只需为每个
标签
和
输入
（或使用类）应用
显示：内联块
。但是，您还必须记住在标签字段组合之间使用分隔符作为回车符。
如果您确实无法更改HTML，可以在
    • 标记上设置CSS
    高度来解决对齐问题。但是我强烈建议您选择其他建议的解决方案，因为您的HTML在当前状态下很难阅读。您应该使用
    标记
     如果确实无法更改HTML，可以在
    • 标记上设置CSS
    高度
    ，以解决对齐问题。但是我强烈建议您选择其他建议的解决方案，因为您的HTML在当前状态下很难阅读。您应该使用
    标记
     编写此
    并设置高度宽度和填充
    编写此
    并设置高度宽度和填充
    等等，什么？您不想使用表，因为这样做是“语义的”，但您使用的是列表？为什么？你不喜欢名单？你喜欢虐待他们？等等，什么？您不想使用表，因为这样做是“语义的”，但您使用的是列表？为什么？你不喜欢名单？你喜欢辱骂他们？我不喜欢，因为@Jan的回答给出了理由。它缺乏灵活性，而且语义不正确。如果你需要在表格中间插入一个段落，例如，你是怎么做的？当你有与输入相关联的“提示”时，它们会去哪里呢？另外，如果您有一个
    字段集
    ，该怎么办？你不能写
    我不喜欢它，因为@Jan的答案上给出了原因。它缺乏灵活性，而且语义不正确。如果你需要在表格中间插入一个段落，例如，你是怎么做的？