Question

我正在创建一个表单，并将input放在textboxes旁边。我想要的是将所有文本框都放在一起，以便它们从相同的位置开始（如表中所示）。我尝试使用flex，但它只扩展了文本框的宽度，但我不想改变它们。我想要的是所有<textarea class="autofit" required pattern="^abc$" placeholder="Nie dotyczy" ></textarea><br/>都将从同一个位置开始。当然，1个文本框和输入应该在一行中。

此外，在<label for="kom">Test 2</label>我希望文本框仅在用户选择其他：时才可见，所以如果用户选择1,2,3文本框应该消失，如果其他：出现文本框。

＆＃13;

form {
  font: 15px Arial, sans-serif;
  align-items: center;
  justify-content: center;
}

input[type=text],
select {
  width: auto;
  padding: 8px;
  border: 1px solid #ccc;
  align-self: center;
}

label {
  padding: 12px 12px 12px 0;
  min-width: 1.2rem;
  width: 20%;
  max-width: 50rem;
  min-height: 1.2em;
  height: 1.2em;
}

fieldset {
  border: none;
}

textarea {
  min-width: 1.2rem;
  width: 20%;
  max-width: 50rem;
  resize: none;
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 1.2em;
  height: 1.2em;
  padding: 3px;
  max-height: 100%;
  align-self: center;
  font-family: Arial, Helvetica, sans-serif;
}

＆＃13;

<form class="form">
  <label for="formName">Name</label>
  <textarea class="autofit" required pattern="^abc$" placeholder="Put name here"></textarea><br/>
  </div>
  <div>
    <label for="formtype">Test 1</label>
    <select id="type">
  <option value="">Test 1</option>
  <option value="1">Test 2</option>
</select>
  </div><br/>

  <div class="content" data-response="op1">
    <fieldset class="komunikacyjne">
      <label>Header</label><br/>

      <label for="kom">Test 2</label>
      <select id="kom" required>
          <option value="k1">Option 1</option>
          <option value="k2">Option 2</option>
          <option value="k3">Option 3</option>
          <option value="k4">Others:</option>
          <textarea class="autofit" required pattern="^abc$" placeholder="Nie dotyczy" ></textarea><br/>
      </select><br/>

      <input type="checkbox" required name="komunik" /> 11111111
      <textarea class="autofit" required pattern="^abc$" placeholder="Nie dotyczy"></textarea><br/>
      <input type="checkbox" required name="komunik" /> 222
      <textarea class="autofit" required pattern="^abc$" placeholder="Nie dotyczy"></textarea><br/>
      <input type="checkbox" required name="komunik" />3
      <textarea class="autofit" required pattern="^abc$" placeholder="Nie dotyczy"></textarea><br/>
      <input type="checkbox" required name="komunik" /> 444
      <textarea class="autofit" required pattern="^abc$" placeholder="Nie dotyczy"></textarea><br/>
      <input type="checkbox" required name="komunik" /> 555555
      <textarea class="autofit" required pattern="^abc$" placeholder="Nie dotyczy"></textarea><br/>
      <input type="checkbox" required name="komunik" /> 6
      <textarea class="autofit" required pattern="^abc$" placeholder="Nie dotyczy"></textarea><br/>
      <input type="checkbox" required name="komunik" /> 777777777
      <textarea class="autofit" required pattern="^abc$" placeholder="Nie dotyczy"></textarea><br/>
      <input type="checkbox" required name="majat" /> 8
      <textarea class="autofit" required pattern="^abc$" placeholder="Nie dotyczy"></textarea><br/>
    </fieldset>

＆＃13;

Answer 1

好吧，我会尝试在你的情况下使用一个表。请参阅下面的示例。（不包括造型）默认情况下，该复选框有点正确，因为它的大小不适合其可视边框。

<form>
  <table>
        <tr>
          <td>Name</td>
          <td><input type="text" name="one" /></td>
        <tr/>
        <tr>
          <td>VeryLongInputName</td>
          <td><input type="checkbox" name="two" /></td>
        <tr/>
        <tr>
          <td>Short</td>
          <td><textarea name="three"></textarea></td>
        <tr/>
  </table>
</form>

Answer 2

我想出了怎么做。我在<label>开始标记前加input，在</label>结尾标记后加input。请参阅下面的更新代码：

input[type=text], select {
    padding: 8px;
    border: 1px solid #ccc;
    align-self: center;
  }
label {

  display: inline-block;
  min-width:100px;
  width:20%;
  max-width:100rem;
  min-height:1.2em;
  height:1.2em;
}

<label><input type="checkbox" required name="komunik" />test 11111111</label>
<textarea class="autofit" required pattern="^abc$" placeholder="Nie dotyczy"></textarea><br/>
<label><input type="checkbox" required name="komunik" /> test 2</label>
<textarea class="autofit" required pattern="^abc$" placeholder="Nie dotyczy"></textarea><br/>
<label><input type="checkbox" required name="komunik" /> test 3</label>
<textarea class="autofit" required pattern="^abc$" placeholder="Nie dotyczy"></textarea><br/>
<label><input type="checkbox" required name="komunik" /> test 4444444</label>
<textarea class="autofit" required pattern="^abc$" placeholder="Nie dotyczy"></textarea><br/>
<label><input type="checkbox" required name="komunik" /> test 5</label>
<textarea class="autofit" required pattern="^abc$" placeholder="Nie dotyczy"></textarea><br/>
<label><input type="checkbox" required name="komunik" /> test 6666666</label>
<textarea class="autofit" required pattern="^abc$" placeholder="Nie dotyczy"></textarea><br/>
<label><input type="checkbox" required name="komunik" /> test 7</label>
<textarea class="autofit" required pattern="^abc$" placeholder="Nie dotyczy"></textarea><br/>
<label><input type="checkbox" required name="majat" /> test 8</label>
<textarea class="autofit" required pattern="^abc$" placeholder="Nie dotyczy"></textarea><br/>

甚至用HTML格式化表单中的文本框

2 个答案: