如何创建嵌套的无线电和输入字段以及跨度字段

Question

您好我试图在我的HTML中创建以下表单

以下是我的HTML：

<td>
                        <div class="input-group" ng-cloak>
                            <table class="row col-md-4">
                                <tr>
                                    <td align="left">
                                        <span class="input-group-addon">

                                        Select either one of the option</span>
                                    </td>
                                    <td align="right">
                                        <tr><input type="radio" value="A"></tr>
                                        <tr><input type="radio" value="B"></tr>
                                        <tr><input type="radio" value="C"></tr>
                                    </td>
                                </tr>

                            </table>

                            </div>

但是从这一点你知道我不知道如何继续。当我在第二个td中添加多个tr时，我认为它会起作用，但没有。如何以这种方式使表单看起来？先谢谢你们。

Answer 1

您可能希望将<fieldset>，<legend>和<label>与输入元素一起使用，而不是使用表格布局。

<legend>将是文字的元素＆＃34;选择其中一个...＆＃34;

<label>会围绕您的<input>

我马上就会为你做一个例子。

＆＃13;

＆＃13;

body {
  margin: 2em;
  font-size: 1.3rem;
}
* {
  box-sizing: border-box;
}
.form-row {
  margin: 2ex 0;
  white-space: nowrap;
}
.form-row label {
  display: inline-block;
  width: 10em;
}
[type="text"] {
  width: calc(100% - 10em);
  border: 1px solid gray;
  padding: .5ex .25em;
  font-size: 1.3rem;
}
fieldset {
  position: relative;
  margin: 0;
  padding; 0;
  border: 1px solid black;
}
legend {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 10em;
  height: 100%;
  border-right: 1px solid black;
  text-align: center;
}
legend span {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translatey(-50%);
  width: 100%;
}
fieldset label {
  position: relative;
  display: block;
  margin: 1ex .2em 1ex 10.2em;
  padding: 1ex 0;
  border: 1px solid gray;
  border-radius: 8px;
}
fieldset label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 100%;
  border-radius: 8px 0 0 8px;
  border-right: 1px solid gray;
  background-color: #e9e9e9;
  z-index: -1;
}
[type="radio"] {
  margin: 0 25px 0 15px;
}

＆＃13;

<form action="">
  <fieldset>
    <legend><span>Select either one of the options</span></legend>
    <label for="catA"><input type="radio" name="cat" id="catA" />Cat A</label>
    <label for="catB"><input type="radio" name="cat" id="catB" />Cat B</label>
    <label for="catC"><input type="radio" name="cat" id="catC" />Cat C</label>
  </fieldset>
  <div class="form-row">
    <label for="firstName">First Name</label><input type="text" name="first-name" id="firstName" />
  </div>
  <div class="form-row">
    <label for="lastName">Last Name</label><input type="text" name="last-name" id="lastName" />
  </div>
</form>

＆＃13;

＆＃13;

＆＃13;

Answer 2

首先，你不能把tr放在td里面。如果你想这样做，你需要在td中创建一个表。你应该多读一些html表。

最简单的方法是使用rowspan来合并多行（而不是colspan，它允许你合并行上的列）。

见下面的html：

<table>
    <tr>
        <td align="left" rowspan="3">
            <span class="input-group-addon">Select either one of the option</span>
        </td>
        <td><input type="radio" value="A"/></td>
    </tr>
    <tr><td><input type="radio" value="B" title="Option B"/></td></tr>
    <tr><td><input type="radio" value="C"/></td></tr>
</table>