时间戳

首页 > 解决方案 > 如何正确设计html表单

html - 如何正确设计html表单

问题描述

几天前我刚开始 Web 开发，所以在设计表单时遇到了问题。我正在使用 html 和 css 制作表单，但它的设计不是我需要的。我尝试通过将标签和输入放入 1 div 然后将标签浮动到左侧并输入到右侧但它无法正常工作。

我要这个

我设计了这个

片段

body,
html {
  margin: 0;
  padding: 0;
}

.form {
  width: 50%;
}

.group {
  width: 100%;
  margin: 20px;
}

.group label {
  float: left;
}

.inputrow input {
  float: right;
}

.inputrow input:not(.col-3) {
  width: 80%;
}

.col-3 {
  width: 20%;
}

.clear {
  clear: both;
}
<p>New Contact</p>
<hr style="height:1px;border:none;color:#333;background-color:#333;" />

<div class="form">
  <div class="group">
    <lable>Primary Contact</lable>
    <div class="inputrow">
      <select class="col-3">
        <option>Mr.</option>
        <option>Mrs.</option>
        <option>Ms.</option>
        <option>Miss.</option>
        <option>Dr.</option>
      </select>
      <input class="col-3" type="text" placeholder="First Name" name="FirstName" />
      <input class="col-3" type="text" placeholder="Last Name" name="LastName" />
    </div>
  </div>
  <div class="clear"></div>
  <div class="group">
    <label>Company Name</label>
    <div class="inputrow">
      <input class="col-1" type="text" placeholder="Company Name" name="CompanyName" />
    </div>
  </div>
  <div class="clear"></div>
  <div class="group">
    <label>Contact Email</label>
    <div class="inputrow">
      <input type="text" placeholder="Contact Email" name="Email" />
    </div>
  </div>
  <div class="clear"></div>
  <div class="group">
    <label>Contact Phone</label>
    <div class="inputrow">
      <input type="text" placeholder="Contact Phone" name="Phone" />
    </div>
  </div>
  <div class="clear"></div>
  <div class="group">
    <label>Website</label>
    <div class="inputrow">
      <input type="text" placeholder="Website" name="Website" />
    </div>
  </div>
  <div class="clear"></div>
  <div class="group">
    <label>Contact Type</label>
    <div class="inputrow">
      <input type="radio" name="contacttype" value="Customer">Customer
      <input type="radio" name="contacttype" value="Vendor">Vendor
    </div>
  </div>
</div>

标签： htmlcss

解决方案

您尝试实现的示例显然都是左对齐的。

您可以寻求这样的解决方案（更简单，更清洁）：

body,
html {
  margin: 0;
  padding: 0;
}

.form {
  width: 100%;
}

.group {
  width: 100%;
  padding: 20px;
  clear: both;
}

label,
input,
select {
  float: left;
}

label {
  width: 150px;
}

.m-right {
  margin-right: 20px;
}
<p>New Contact</p>
<hr style="height:1px;border:none;color:#333;background-color:#333;" />

<div class="form">
  <div class="group">
    <label>Primary Contact</label>
    <select class="m-right">
      <option>Mr.</option>
      <option>Mrs.</option>
      <option>Ms.</option>
      <option>Miss.</option>
      <option>Dr.</option>
    </select>
    <input class="m-right" type="text" placeholder="First Name" name="FirstName" />
    <input type="text" placeholder="Last Name" name="LastName" />
  </div>
  <div class="group">
    <label>Company Name</label>
    <input type="text" placeholder="Company Name" name="CompanyName" />
  </div>
  <div class="group">
    <label>Contact Email</label>
    <input type="text" placeholder="Contact Email" name="Email" />
  </div>
  <div class="group">
    <label>Contact Phone</label>
    <input type="text" placeholder="Contact Phone" name="Phone" />
  </div>
  <div class="group">
    <label>Website</label>
    <input type="text" placeholder="Website" name="Website" />
  </div>
  <div class="group">
    <label>Contact Type</label>
    <label><input type="radio" name="contacttype" value="Customer">Customer</label>
    <label><input type="radio" name="contacttype" value="Vendor">Vendor</label>
  </div>
</div>

推荐阅读